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 and its x position is a floating point number and

the animation should loop. In code the animation which slides an item in the x direction becomes

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!