Animation

Hmm... That horse looks too stale. Let's make it dance!

Builders can add CSS animations to any object. The most used forms of animations are to let an object move from side to side, up and down or let it rotate.

To learn more about animating objects in the Buenoverse, read on, or check out the video tutorial below:

To add animation to an object, go to Object menu → Interactions → Effects → Animation

Object menu → Interactions → Effects → Animation

You can choose the premade animations or make your custom animation using timeframes and basic editing options.

At the top you will see Idle and Enter/Exit;

• Idle; The animation which will play from the moment you enter the room.

• Enter/Exit; The animation will play only if a player enters/exits the interaction zone of an object. (Can set different animations each for enter and exit.)

Once you choose a pre-made or custom animation option you will see that the animation icon is added to the object bar in blue indicating that it is active.

Once you click on it you will be able to see various options such as;

1. Remove animation; removes the animation from the object

2. Idle - Enter/Exit; changes between idle and enter/exit mode.

3. Change animation; opens the animation selection window.

4. Edit animation; opens the edit animation window.

5. Toggle loop; if selected activates loop for animations or if not animations play only once.

6. Edit animation time; determines how long the animation lasts in seconds

7. Adjust transform origin; Let’s you adjust the origin of transform.

Animations window

Custom Animations

If you click on edit animation, the edit animation window will open, there you have some of the same options as well as the timeline option which let’s you create your own animations.

Pressing the Plus Icon beside the Timeline option will add a timeline frame to the list. Then you can start editing the options within a timeline frame in order to create a motion. By adding a timeline frame and editing the movements you can create an animation.

Let’s take a look at some of the options in the timeline.

Time: How long does the motion last until it reaches the next frame. It is different from the animation time, where the time of the whole animation is decided.

Movement: Adds movement to the directions Up/Down and Left/Right.

Rotation: Adds Rotation to the X,Y,Z axes.

Scale: Adds scale animation, increasing or decreasing the scale of the object in X and Y axes.

Skew: Adds a skew animation to the X and Y axes.

Let’s see animation in action!

Let's go through a custom animation process step-by-step.

I want this relatively giant spider hanging from the traffic lights to swing side-to-side.

That spider looks very frozen right now.

We click on our spider and then go to Interactions → Effects → Animation

Object menu → Interactions → Effects → Animation

I want this to be an idle animation so I stay in Idle and choose Custom.

Choosing custom in idle tab

You can now see the animation icon added and active in the Object menu. Next we click it and then click the Edit button beside the Custom Animation in order to open the Edit Animation window.

Object Menu -> Animations -> Edit

Next we will add a time frame by clicking the + icon next to Timeline.

Edit Animation window

We want our Spider to swing so first we will start our animation from the right sight. We click Rotation icon, and then choose a value on the Rotate X bar in order to move the Spider. You can either use the slider or enter a specific value in the box beside.

Adding rotation to the starting frame

Our starting frame is done, now our spider will start swinging from the right side. Now we need another frame and enter the exact opposite values to swing our spider to the left. Since this will be a loop there is an easier way to do it. Simply duplicate the frame by clicking the three dots on it's side and then, remove or add "-" to the previously entered values to reverse them.

Duplicating the first frame and reversing the values to get a rotation to the left

Amazing, now we have spider swinging from right to left. But in order to complete the loop we need it to swing from left to right as well. Again we can either add a new time frame and enter values. BUT the first frame is exactly what we want we don't even need to change the values so let's just duplicate it, and this time simply edit the time to a higher value than our second frame so it is initiated after the second frame.

Adding our last frame by duplicating the first frame and editing the time value

Not bad, but our Spider doesn't look like it is swinging. It looks like it is having a seizure. That's because the transform origin is located in the middle as default. If builders use a rotate animation, they can alter the point of origin. This is point is where the rotation will revolve around. So we need to make the origin the top of the web. Let's click the Adjust Transform Origin button and then click on top of the web.

Adjusting transform origin

Our animation is almost complete, the Spider is swinging too fast in my taste, if it keeps going like this It's going to get dizzy. Let's edit the time values so that it is slower.

Editing time values

Voila! Our Spider is now happily swinging.

Happy swinging spider