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.

key frames

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

javascript

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

javascript

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

javascript

box.animations.push(xSlide);

The performance (Animatable) is started with

javascript

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

You can see the result here

Basic Sliding Box Animation

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!

javascript

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:

Playing an Animation in Reverse

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!