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

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')
})