Designing Animations

Designing a Clip

The first step is to decide what you want to see in a clip, that is what is the performance to be. This gives the performer and its animation.

In this game clip a box, the performer, is to slide between two places once every second. The box will be able to be viewed from any angle.

The first stage design is to sketch what is needed at key time points, a little like an animated gif design.

After one second the box should be in its new position and one second later in its start position. This sequence is then continually repeated.

In Babylon.js the Animation is changing the position of the box along the x axis, which is floating point number, and should also loop. It is critical to declare the type for the animation because the animation has no concept of what it is animating. In this case, the animation is simply moving the box's position along the X axis. While the animation will know its target - the box - it has no understanding of what it means to animate its position along the X axis. To combat this, we need to define the type for the animation as a floating point animation with BABYLON.ANIMATION.ANIMATIONTYPE_FLOAT and define the property which will accept the input as position.x. With these definitions, the animation has a roadmap of how to apply its keyframe data to the target resulting in a very flexible and powerful system that can animate almost anything. In code, this declaration looks like

const frameRate = 10;

const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

The key frames are at 0, 1 and 2 seconds. To find the frame number after t seconds multiply the time by the frame rate, i.e. t x frameRate. In this case the key frames are at frame numbers, 0, 1 x frameRate and 2 x frame Rate. Starting the box at x = 2 and sliding it to x = -2, gives the x positional values of the box after 0, 1 and 2 seconds as 2, -2 and 2 respectively.

The key frames are set into an array of JavaScript objects with properties for frame (number) and value and added to the animation, as in

const keyFrames = [];

keyFrames.push({
    frame: 0,
    value: 2,
});

keyFrames.push({
    frame: frameRate,
    value: -2,
});

keyFrames.push({
    frame: 2 * frameRate,
    value: 2,
});

xSlide.setKeys(keyFrames);

The animation is now fully made and can be applied to the box

box.animations.push(xSlide);

The performance (Animatable) is started with

scene.beginAnimation(box, 0, 2 * frameRate, true);

You can see the result here

Reversing an Animation

Fun tip, the second and third arguments for the beginAnimation method are a starting frame and ending frame from your keyFrames list. If you reverse those two values, the animation will play in reverse!

const startFrame = 0;
const endFrame = 10;
const frameRate = 10;

const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const keyFrames = []; 

keyFrames.push({
    frame: startFrame,
    value: 2
});

keyFrames.push({
    frame: endFrame,
    value: -2
});


xSlide.setKeys(keyFrames);

box.animations.push(xSlide);

//backwards animation
scene.beginAnimation(box, endFrame, startFrame, false);

Check it out here:

The Animation Curve Editor (ACE)

Now that you're starting to understand the basics of animations in Babylon and how to create them, you'll also want to consider taking a look at the Animation Curve Editor (ACE). This super easy-to-use tool allows you to create full animations in a matter of seconds without writing any code!

Check it out!