Current frame index being shown
Flip each frame horizontally. Sets Sprite.flipHorizontal.
Flip each frame vertically. Sets Sprite.flipVertical.
Indicates the frame index the animation should freeze on for a non-looping animation. By default it is the last frame.
Indicates whether the animation should loop after it is completed
Duration to show each frame (in milliseconds)
The sprite frames to play, in order. See SpriteSheet.getAnimationForAll to quickly generate an Animation.
Add a SpriteEffect manually
Clear all sprite effects
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.
Applies the darken effect to a sprite, changes the darkness of the color according to hsl
Applies the desaturate effect to a sprite, desaturates the color according to hsl
Draws the animation appropriately to the 2D rendering context, at an x and y coordinate.
The 2D rendering context
The x coordinate of where to draw
The y coordinate of where to draw
Draws the animation with custom options to override internals without mutating them.
Applies the fill effect to a sprite, changing the color channels of all non-transparent pixels to match a given color
Applies the grayscale effect to a sprite, removing color information.
Applies the invert effect to a sprite, inverting the pixel colors.
Indicates whether the animation is complete, animations that loop are never complete.
Applies the lighten effect to a sprite, changes the lightness of the color according to hsl
Applies the opacity effect to a sprite, setting the alpha of all pixels to a given value
Plays an animation at an arbitrary location in the game.
The x position in the game to play
The y position in the game to play
Removes an SpriteEffect from this animation.
Effect to remove from this animation
Removes an effect given the index from this animation.
Index of the effect to remove from this animation
Resets the animation to first frame.
Applies the saturate effect to a sprite, saturates the color according to hsl
Skips ahead a specified number of frames in the animation
Frames to skip ahead
Not meant to be called by game developers. Ticks the animation forward internally and calculates whether to change to the frame.
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.