Draw. SpriteAnimation

SpriteAnimation - Steps a tile through its frames over time: looping, once, or there and back

  • Driven by the engine time like a Timer, so it pauses with the game and needs no update call
  • Read tileInfo each frame for the frame to draw, from an object's update or before a drawTile
  • loop, play and pingPong each start over from the first frame; stop holds the current one
  • Frames follow each other along the row, as tileInfo.frame counts them

Constructor

new SpriteAnimation(tileInfo, frameCount, frameTimeopt)

Create an animation over a run of frames, looping from the start

Parameters:
NameTypeAttributesDefaultDescription
tileInfoTileInfo

The first frame

frameCountnumber

How many frames, one or more

frameTimenumber<optional>
0.1

Seconds each frame shows for

Source
Example
const walk = new SpriteAnimation(tile(0, 16), 4, .1); // four frames, a tenth of a second each
const attack = new SpriteAnimation(tile(4, 16), 3, .05).play(); // once, then holds the last frame
// in update: this.tileInfo = (attack.isDone ? walk : attack).tileInfo;

Members

elapsedFrames

How many frames have gone by since the start, fractional

Source

firstTile

Properties
TypeDescription
TileInfo

The first frame, the others follow it along the row

Source

frame

The frame showing now, 0 to frameCount-1

Source

frameCount

Properties
TypeDescription
number

How many frames

Source

frameTime

Properties
TypeDescription
number

Seconds each frame shows for

Source

heldFrame :number|undefined

Type:
  • number | undefined
Properties
TypeDescription
number | undefined

The frame held by stop, undefined while running

Source

isDone

True once a play has shown its last frame for its time

Source

mode

Properties
TypeDescription
string

How it runs: 'loop', 'once' or 'pingPong', set by loop, play and pingPong

Source

speed

Properties
TypeDescription
number

Rate multiplier, 2 plays twice as fast; set it before starting

Source

startTime

Properties
TypeDescription
number

Engine time it started at

Source

tileInfo

The tile of the frame showing now

Source

Methods

loop() → {SpriteAnimation}

Start over from the first frame and repeat forever

Source
Returns:
Type: 
SpriteAnimation

pingPong() → {SpriteAnimation}

Start over from the first frame and run there and back forever

Source
Returns:
Type: 
SpriteAnimation

play() → {SpriteAnimation}

Start over from the first frame, run through once and hold the last frame

Source
Returns:
Type: 
SpriteAnimation

restart(modeopt) → {SpriteAnimation}

Start over from the first frame in a mode

Parameters:
NameTypeAttributesDescription
modestring<optional>

'loop', 'once' or 'pingPong', the current mode when left out

Source
Returns:
Type: 
SpriteAnimation

stop() → {SpriteAnimation}

Hold the current frame

Source
Returns:
Type: 
SpriteAnimation