Phaser API Documentation

  Version: 
Filter
This is a beta release of our new docs system. Found an issue?
Please tell us about it in the #📖-newdocs-feedback channel on the Phaser Discord

Phaser . Animations . Animation

This is a beta release of our new docs system. Found an issue?
Please tell us about it in the #📖-newdocs-feedback channel on the Phaser Discord

Phaser . Animations . Animation

A Frame based Animation.

Animations in Phaser consist of a sequence of AnimationFrame objects, which are managed by this class, along with properties that impact playback, such as the animations frame rate or delay.

This class contains all of the properties and methods needed to handle playback of the animation directly to an AnimationState instance, which is owned by a Sprite, or similar Game Object.

You don't typically create an instance of this class directly, but instead go via either the AnimationManager or the AnimationState and use their create methods, depending on if you need a global animation, or local to a specific Sprite.

Constructor:

new Animation(manager, key, config)

Parameters:

name type description
manager Phaser.Animations.AnimationManager

A reference to the global Animation Manager

key string

The unique identifying string for this animation.

config Phaser.Types.Animations.Animation

The Animation configuration.

Since: 3.0.0

Members

delay: number
Focus
Focus

Description:

The delay in ms before the playback will begin.

Type:
number
Default: 0
Since: 3.0.0
Focus
Focus
duration: number
Focus
Focus

Description:

How long the animation should play for, in milliseconds. If the frameRate property has been set then it overrides this value, otherwise the frameRate is derived from duration.

Type:
number
Since: 3.0.0
Focus
Focus
frameRate: number
Focus
Focus

Description:

The frame rate of playback in frames per second (default 24 if duration is null)

Type:
number
Default: 24
Since: 3.0.0
Focus
Focus

Description:

Extract all the frame data into the frames array.

Type:
Since: 3.0.0
Focus
Focus
hideOnComplete: boolean
Focus
Focus

Description:

Should the GameObject's visible property be set to false when the animation finishes?

Type:
boolean
Default: false
Since: 3.0.0
Focus
Focus
key: string
Focus
Focus

Description:

The unique identifying string for this animation.

Type:
string
Since: 3.0.0
Focus
Focus

Description:

A reference to the global Animation Manager.

Type:
Since: 3.0.0
Focus
Focus
msPerFrame: number
Focus
Focus

Description:

How many ms per frame, not including frame specific modifiers.

Type:
number
Since: 3.0.0
Focus
Focus
paused: boolean
Focus
Focus

Description:

Global pause. All Game Objects using this Animation instance are impacted by this property.

Type:
boolean
Default: false
Since: 3.0.0
Focus
Focus
repeat: number
Focus
Focus

Description:

Number of times to repeat the animation. Set to -1 to repeat forever.

Type:
number
Default: 0
Since: 3.0.0
Focus
Focus
repeatDelay: number
Focus
Focus

Description:

The delay in ms before the a repeat play starts.

Type:
number
Default: 0
Since: 3.0.0
Focus
Focus
showOnStart: boolean
Focus
Focus

Description:

Should the GameObject's visible property be set to true when the animation starts to play?

Type:
boolean
Default: false
Since: 3.0.0
Focus
Focus
skipMissedFrames: boolean
Focus
Focus

Description:

Skip frames if the time lags, or always advanced anyway?

Type:
boolean
Default: true
Since: 3.0.0
Focus
Focus
type: string
Focus
Focus

Description:

A frame based animation (as opposed to a bone based animation)

Type:
string
Default: frame
Since: 3.0.0
Focus
Focus
yoyo: boolean
Focus
Focus

Description:

Should the animation yoyo (reverse back down to the start) before repeating?

Type:
boolean
Default: false
Since: 3.0.0
Focus
Focus

Methods

addFrame(config)
Focus
Focus

Description:

Add frames to the end of the animation.

Parameters:

name type description
config string | Array.<Phaser.Types.Animations.AnimationFrame>

Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects.

Returns:
Description:

This Animation object.

Examples:
Since: 3.0.0
Focus
Focus
addFrameAt(index, config)
Focus
Focus

Description:

Add frame/s into the animation.

Parameters:

name type description
index number

The index to insert the frame at within the animation.

config string | Array.<Phaser.Types.Animations.AnimationFrame>

Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects.

Returns:
Description:

This Animation object.

Examples:
Since: 3.0.0
Focus
Focus
calculateDuration(target, totalFrames, duration, frameRate)
Focus
Focus

Description:

Calculates the duration, frame rate and msPerFrame values.

Parameters:

name type description
target Phaser.Animations.Animation

The target to set the values on.

totalFrames number

The total number of frames in the animation.

duration number

The duration to calculate the frame rate from.

frameRate number

The frame ate to calculate the duration from.

Examples:
Since: 3.50.0
Focus
Focus
checkFrame(index)
Focus
Focus

Description:

Check if the given frame index is valid.

Parameters:

name type description
index number

The index to be checked.

Returns:
Description:

true if the index is valid, otherwise false.

Type:
  • boolean
Examples:
Since: 3.0.0
Focus
Focus
destroy()
Focus
Focus

Description:

Destroys this Animation instance. It will remove all event listeners, remove this animation and its key from the global Animation Manager, and then destroy all Animation Frames in turn.

Examples:
Since: 3.0.0
Focus
Focus
<protected> getFirstTick(state)
Focus
Focus

Description:

Called internally when this Animation first starts to play. Sets the accumulator and nextTick properties.

Parameters:

name type description
state Phaser.Animations.AnimationState

The Animation State belonging to the Game Object invoking this call.

Examples:
Since: 3.0.0
Focus
Focus
<protected> getFrameAt(index)
Focus
Focus

Description:

Returns the AnimationFrame at the provided index

Parameters:

name type description
index number

The index in the AnimationFrame array

Returns:
Description:

The frame at the index provided from the animation sequence

Examples:
Since: 3.0.0
Focus
Focus
getFrameByProgress(value)
Focus
Focus

Description:

Returns the frame closest to the given progress value between 0 and 1.

Parameters:

name type description
value number

A value between 0 and 1.

Returns:
Description:

The frame closest to the given progress value.

Examples:
Since: 3.4.0
Focus
Focus
getFrames(textureManager, frames, [defaultTextureKey])
Focus
Focus

Description:

Creates AnimationFrame instances based on the given frame data.

Parameters:

name type arguments description
textureManager Phaser.Textures.TextureManager

A reference to the global Texture Manager.

frames string | Array.<Phaser.Types.Animations.AnimationFrame>

Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects.

defaultTextureKey string <optional>

The key to use if no key is set in the frame configuration object.

Returns:
Description:

An array of newly created AnimationFrame instances.

Examples:
Since: 3.0.0
Focus
Focus
getLastFrame()
Focus
Focus

Description:

Returns the animation last frame.

Returns:
Description:

The last Animation Frame.

Examples:
Since: 3.12.0
Focus
Focus
getNextTick(state)
Focus
Focus

Description:

Called internally. Sets the accumulator and nextTick values of the current Animation.

Parameters:

name type description
state Phaser.Animations.AnimationState

The Animation State belonging to the Game Object invoking this call.

Examples:
Since: 3.0.0
Focus
Focus
getTotalFrames()
Focus
Focus

Description:

Gets the total number of frames in this animation.

Returns:
Description:

The total number of frames in this animation.

Type:
  • number
Examples:
Since: 3.50.0
Focus
Focus
<private> handleYoyoFrame(state, isReverse)
Focus
Focus

Description:

Handle the yoyo functionality in nextFrame and previousFrame methods.

Parameters:

name type description
state Phaser.Animations.AnimationState

The Animation State to advance.

isReverse boolean

Is animation in reverse mode? (Default: false)

Examples:
Since: 3.12.0
Focus
Focus
nextFrame(state)
Focus
Focus

Description:

Advance the animation frame.

Parameters:

name type description
state Phaser.Animations.AnimationState

The Animation State to advance.

Examples:
Since: 3.0.0
Focus
Focus
pause()
Focus
Focus

Description:

Pauses playback of this Animation. The paused state is set immediately.

Returns:
Description:

This Animation object.

Examples:
Since: 3.0.0
Focus
Focus
previousFrame(state)
Focus
Focus

Description:

Called internally when the Animation is playing backwards. Sets the previous frame, causing a yoyo, repeat, complete or update, accordingly.

Parameters:

name type description
state Phaser.Animations.AnimationState

The Animation State belonging to the Game Object invoking this call.

Examples:
Since: 3.0.0
Focus
Focus
removeFrame(frame)
Focus
Focus

Description:

Removes the given AnimationFrame from this Animation instance. This is a global action. Any Game Object using this Animation will be impacted by this change.

Parameters:

name type description
frame Phaser.Animations.AnimationFrame

The AnimationFrame to be removed.

Returns:
Description:

This Animation object.

Examples:
Since: 3.0.0
Focus
Focus
removeFrameAt(index)
Focus
Focus

Description:

Removes a frame from the AnimationFrame array at the provided index and updates the animation accordingly.

Parameters:

name type description
index number

The index in the AnimationFrame array

Returns:
Description:

This Animation object.

Examples:
Since: 3.0.0
Focus
Focus
repeatAnimation(state)
Focus
Focus

Description:

Called internally during playback. Forces the animation to repeat, providing there are enough counts left in the repeat counter.

Parameters:

name type description
state Phaser.Animations.AnimationState

The Animation State belonging to the Game Object invoking this call.

Examples:
Since: 3.0.0
Focus
Focus
resume()
Focus
Focus

Description:

Resumes playback of this Animation. The paused state is reset immediately.

Returns:
Description:

This Animation object.

Examples:
Since: 3.0.0
Focus
Focus
toJSON()
Focus
Focus

Description:

Converts the animation data to JSON.

Returns:
Description:

The resulting JSONAnimation formatted object.

Examples:
Since: 3.0.0
Focus
Focus
<private> updateAndGetNextTick(state, frame)
Focus
Focus

Description:

Update Frame and Wait next tick.

Parameters:

name type description
state Phaser.Animations.AnimationState

The Animation State.

frame Phaser.Animations.AnimationFrame

An Animation frame.

Examples:
Since: 3.12.0
Focus
Focus
updateFrameSequence()
Focus
Focus

Description:

Called internally whenever frames are added to, or removed from, this Animation.

Returns:
Description:

This Animation object.

Examples:
Since: 3.0.0
Focus
Focus