Skip to main content

Animation

Animations are a series of graphics that take a specific duration in milliseconds. Each of these units is called a "Frame". There are a few playing strategies as well to consider

ts
export enum AnimationStrategy {
/**
* Animation ends without displaying anything
*/
End = 'end',
/**
* Animation loops to the first frame after the last frame
*/
Loop = 'loop',
/**
* Animation plays to the last frame, then backwards to the first frame, then repeats
*/
PingPong = 'pingpong',
/**
* Animation ends stopping on the last frame
*/
Freeze = 'freeze',
}
ts
export enum AnimationStrategy {
/**
* Animation ends without displaying anything
*/
End = 'end',
/**
* Animation loops to the first frame after the last frame
*/
Loop = 'loop',
/**
* Animation plays to the last frame, then backwards to the first frame, then repeats
*/
PingPong = 'pingpong',
/**
* Animation ends stopping on the last frame
*/
Freeze = 'freeze',
}

Animation frames can be created by hand in the following example

ts
const animation = new ex.Animation({
frames: [
{
graphic: newSprite,
duration: 500,
},
{
graphic: circle,
duration: 1000,
},
{
graphic: rect,
duration: 1500,
},
{
graphic: triangle,
duration: 2000,
},
],
});
ts
const animation = new ex.Animation({
frames: [
{
graphic: newSprite,
duration: 500,
},
{
graphic: circle,
duration: 1000,
},
{
graphic: rect,
duration: 1500,
},
{
graphic: triangle,
duration: 2000,
},
],
});

Animations can be constructed quickly from ex.SpriteSheets

Character running sprite sheet

Animations also emit events per frame, per loop, and per end (if it completes).

ts
animation.events.on('loop', (a) => {
console.log('loop')
})
animation.events.on('frame', (f) => {
console.log('frame')
})
animation.events.on('end', (a) => {
console.log('ended')
})
ts
animation.events.on('loop', (a) => {
console.log('loop')
})
animation.events.on('frame', (f) => {
console.log('frame')
})
animation.events.on('end', (a) => {
console.log('ended')
})