Avatar Animations

CreatiCode

Prerequisite

Loading an Avatar Into a Scene

Description

When we run an animation on an avatar, the avatar goes through a series of poses one by one. Each pose defines the position and angle of all body parts for the avatar. For example, below are 5 frames that are part of a running animation.

After an avatar is loaded, it can only run the “idle” animation, which means standing still and doing nothing. You can easily add other animations to an avatar, as if you are “teaching” this avatar to do more things. To work with animations, you need to know how to add animations to an avatar, start an animation and stop an animation.

Block for Adding Animations to an Avatar

Here is the block to “teach” the avatar how to run one or more animations:

Animation Name List: the list of animations to be enabled on the avatar. When you click the “Please Select” input box, a library window will present all the pre-built avatar animations you can choose from. Note that you can select multiple animations. When you click any animation, it will be listed in the top row of the library window. You can click any animation in the top row to deselect it. You have to click “confirm” on the top right at the end.

After you confirm the list of animations to add, their names will be listed in the input field one by one, separated by a comma. For example, the following block contains 2 animation names of “Fast Run” and “Defeat”:

Behavior

When running this block, the selected animations will be downloaded and attached to the avatar model. Note that this block can only be used after an avatar has been loaded into the scene. In fact, it is usually placed immediately below an “add avatar” block.

Also, you only need to add animations to an avatar once, because once the animation behaviors are added to an avatar, you do not need to add them again. It is a common mistake to run “add animations” repeatedly inside a loop.

Block for Starting an Animation

After adding an animation to an avatar, you can use the following block to make the avatar run that animation:

Animation Name: the name of the animation to run. When you click the “Please Select” input box, a library window will be presented with all the animations you can use. Note that you can only pick one animation, and it has to be included in the “add animations” block. For example, to run the animation “fly”, you have to add the “fly” animation to the avatar beforehand, otherwise, it wouldn’t know how to “fly”.
Looping: if “yes”, then the animation will restart whenever it finishes playing; if “no”, then it will stop after playing once, and freeze the avatar at the last frame until you start another animation.
from %: the starting point of the animation in percentage, which can be any value between 0 and 100. For example, suppose the animation has 40 frames, and if we set “from %” to 50, then the animation will start playing at the 20th frame.
to %: the stopping point of the animation in percentage, which can be any value between 0 and 100, and has to be no smaller than the “from %”. For example, suppose the animation has 40 frames, and if we set “to %” to 80, then the animation will end at the 32nd frame. At this point, if “Looping” is “yes”, then the animation will restart at the frame specified by the “from %”. If “Looping” is “no”, then the animation will freeze at the 32nd frame. If “from %” and “to %” are exactly the same, then the animation will freeze at that one frame. For example, if they are both 50%, then the avatar will show the frame at half the time of the full animation.
Speed Ratio: a speed ratio percentage that controls how fast to play the animation. When it is 100, the animation will play at its original speed. If the value is more than 100, such as 200, then the animation will play at double the speed. Note that the speed ratio will not affect the starting and stopping frames, but how fast these frames are played out.
Blocking Mode: if “yes”, the program logic will be blocked on the current block until it completes; if “no”, then the program will continue to the next block attached below this block. For example, if you set an animation to loop forever, and also set it to “Blocking”, then no block attached below it will ever run.
Offset x/y/z: You can shift the avatar without changing its position when you start a new animation. For example, when the avatar switches from “Idle” to “Fly”, it will be flying at the height of its feet. This looks not very natural. Therefore, you can add an offset in the Z direction so that the body will appear higher.

Broadcast Messages and Broadcast Progress Points: The last 2 inputs allow you to automatically broadcast messages at certain points during the animation. The “broadcast messages” input accepts a list of one or more messages separated by commas, such as “move,return”, which have to be defined first using the “when I receive” block. The “broadcast progress points” input accepts a list of progress points separated by commas, such as “50,100”. You have to make sure the number of messages and the number of progress points are the same. In the example below, we are broadcasting the “update color” message at progress of 50% and 100%:

Behavior

When running this block, the avatar will play the specified animation based on the parameters you have specified. If the avatar is already running some other animation, then that animation will be stopped first.

Remember that you always have to add an animation before starting that animation. Otherwise, the avatar will not know how to do that animation.

Note that most of the animations are defined “in-place”, which means they do not move the body center of the avatar. For example, to make an avatar run, you also need to change the avatar’s position (such as using the move block) while playing the “run” animation. Otherwise, the avatar will stay in the same position.

Example

Program: This program adds 2 animations to the robot avatar, then starts the “Run” animation in “looping” mode. Since the animation is “Non-Blocking”, the forever loop below it will start right away, moving the avatar forward.

Result:

Stopping an Animation

Sometimes you might want an avatar to stop an animation, such as stop running or stop dancing. You will find that there is no block for “stop animation”. Instead, you should make the avatar start the “Idle” animation.

In this example, you can click one button to make the avatar dance, and another button to make it stop:

Here is the resulting program: