Options
All
  • Public
  • Public/Protected
  • All
Menu

Animations allow you to display a series of images one after another, creating the illusion of change. Generally these images will come from a SpriteSheet source.

Creating an animation

Create a Texture that contains the frames of your animation. Once the texture is loaded, you can then generate an Animation by creating a SpriteSheet and using SpriteSheet.getAnimationForAll.

var game = new ex.Engine();
var txAnimPlayerIdle = new ex.Texture('/assets/tx/anim-player-idle.png');
// load assets
var loader = new ex.Loader(txAnimPlayerIdle);
// start game
game.start(loader).then(function() {
  var player = new ex.Actor();

  // create sprite sheet with 5 columns, 1 row, 80x80 frames
  var playerIdleSheet = new ex.SpriteSheet(txAnimPlayerIdle, 5, 1, 80, 80);

  // create animation (125ms frame speed)
  var playerIdleAnimation = playerIdleSheet.getAnimationForAll(game, 125);

  // add drawing to player as "idle"
  player.addDrawing('idle', playerIdleAnimation);
  // add player to game
  game.add(player);
});

Sprite effects

You can add sprite effects to an animation through methods like Animation.invert or Animation.lighten. Keep in mind, since this manipulates the raw pixel values of a Sprite, it can have a performance impact. "Animations will loop by default. You can use Animation.loop to change this behavior.

Hierarchy

  • AnimationImpl
    • Animation

Implements

Index

Constructors

constructor

Properties

anchor

anchor: Vector = new Vector(0.0, 0.0)

currentFrame

currentFrame: number = 0

Current frame index being shown

drawHeight

drawHeight: number = 0

drawWidth

drawWidth: number = 0

flipHorizontal

flipHorizontal: boolean = false

Flip each frame horizontally. Sets Sprite.flipHorizontal.

flipVertical

flipVertical: boolean = false

Flip each frame vertically. Sets Sprite.flipVertical.

freezeFrame

freezeFrame: number = -1

Indicates the frame index the animation should freeze on for a non-looping animation. By default it is the last frame.

height

height: number = 0

loop

loop: boolean = true

Indicates whether the animation should loop after it is completed

rotation

rotation: number = 0

scale

scale: Vector = new Vector(1, 1)

speed

speed: number

Duration to show each frame (in milliseconds)

sprites

sprites: Sprite[] = []

The sprite frames to play, in order. See SpriteSheet.getAnimationForAll to quickly generate an Animation.

width

width: number = 0

Methods

addEffect

  • addEffect(effect: Effects.ISpriteEffect): void

clearEffects

  • clearEffects(): void

colorize

  • colorize(color: Color): void
  • Applies the colorize effect to a sprite, changing the color channels of all pixels to be the average of the original color and the provided color.

    Parameters

    Returns void

darken

  • darken(factor?: number): void
  • Applies the darken effect to a sprite, changes the darkness of the color according to hsl

    Parameters

    • Default value factor: number = 0.1

    Returns void

desaturate

  • desaturate(factor?: number): void
  • Applies the desaturate effect to a sprite, desaturates the color according to hsl

    Parameters

    • Default value factor: number = 0.1

    Returns void

draw

  • draw(ctx: CanvasRenderingContext2D, x: number, y: number): void

fill

  • fill(color: Color): void
  • Applies the fill effect to a sprite, changing the color channels of all non-transparent pixels to match a given color

    Parameters

    Returns void

grayscale

  • grayscale(): void
  • Applies the grayscale effect to a sprite, removing color information.

    Returns void

invert

  • invert(): void
  • Applies the invert effect to a sprite, inverting the pixel colors.

    Returns void

isDone

  • isDone(): boolean
  • Indicates whether the animation is complete, animations that loop are never complete.

    Returns boolean

lighten

  • lighten(factor?: number): void
  • Applies the lighten effect to a sprite, changes the lightness of the color according to hsl

    Parameters

    • Default value factor: number = 0.1

    Returns void

opacity

  • opacity(value: number): void
  • Applies the opacity effect to a sprite, setting the alpha of all pixels to a given value

    Parameters

    • value: number

    Returns void

play

  • play(x: number, y: number): void
  • Plays an animation at an arbitrary location in the game.

    Parameters

    • x: number

      The x position in the game to play

    • y: number

      The y position in the game to play

    Returns void

removeEffect

  • removeEffect(effect: Effects.ISpriteEffect): void
  • removeEffect(index: number): void
  • Removes an ISpriteEffect from this animation.

    Parameters

    • effect: Effects.ISpriteEffect

      Effect to remove from this animation

    Returns void

  • Removes an effect given the index from this animation.

    Parameters

    • index: number

      Index of the effect to remove from this animation

    Returns void

reset

  • reset(): void

saturate

  • saturate(factor?: number): void
  • Applies the saturate effect to a sprite, saturates the color according to hsl

    Parameters

    • Default value factor: number = 0.1

    Returns void

skip

  • skip(frames: number): void
  • Skips ahead a specified number of frames in the animation

    Parameters

    • frames: number

      Frames to skip ahead

    Returns void

tick

  • tick(): void
  • Not meant to be called by game developers. Ticks the animation forward internally and calculates whether to change to the frame.

    internal

    Returns void