SpriteAnimation

SpriteAnimation

new SpriteAnimation()

Look at the Animation reference pages before reading these docs. A SpriteAnimation object contains a series of images (p5.Image objects) that can be displayed sequentially. A sprite can have multiple labeled animations, see Sprite.addAnimation and Sprite.changeAnimation, but you can also create animations that can be used without being added to a sprite first. The SpriteAnimation constructor can be used in multiple ways. An animation can be created either from a list of images or sequentially numbered images. p5play will try to detect the sequence pattern. For example if the image file path is "image1.png" and the last frame index is 3 then "image2.png" and "image3.png" will be loaded as well.
Source:
Parameters:
Name Type Attributes Description
...images p5.Image <repeatable>
 p5.Image objects to be used as frames
Example
let shapeShifter = new SpriteAnimation("dog.png", "cat.png", "snake.png");

Members

frameDelay :Number

Delay between frames in number of draw cycles. If set to 4 the framerate of the animation would be the sketch framerate divided by 4 (60fps = 15fps)
Default Value:
  • 4
Source:
Type:
  • Number

(readonly) frameImage :p5.Image

Returns the current frame as p5.Image.
Source:
Type:
  • p5.Image

frames :Array

The frames of the animation.
Source:
Type:
  • Array

h :Number

Height of the animation.
Source:
Type:
  • Number

height :Number

Height of the animation.
Source:
Type:
  • Number

images :Array

The frames of the animation. Alt for ani.frames
Source:
Type:
  • Array

(readonly) lastFrame :Number

Returns the index of the last frame.
Source:
Type:
  • Number

scale :Number|Object

The animation's scale. Can be set to a number to scale both x and y or an object with x and/or y properties.
Default Value:
  • 1
Source:
Type:
  • Number | Object

w :Number

Width of the animation.
Source:
Type:
  • Number

width :Number

Width of the animation.
Source:
Type:
  • Number

Methods

clone() → {SpriteAnimation}

Make a copy of the animation.
Source:
Returns:
Type:
SpriteAnimation
A copy of the animation.

draw(x, y, ropt, sxopt, syopt)

Draws the animation at coordinate x and y. Updates the frames automatically. Optional parameters effect the current draw cycle only and are not saved between draw cycles.
Source:
Parameters:
Name Type Attributes Description
x Number horizontal position
y Number vertical position
r Number <optional>
 rotation
sx Number <optional>
 scale x
sy Number <optional>
 scale y

goToFrame(toFrame)

Plays the animation forward or backward toward a target frame.
Source:
Parameters:
Name Type Description
toFrame Number Frame number destination (starts from 0)
Returns:
[Promise] a promise that resolves when the animation completes

loop()

Plays the animation forwards and loops it.
Source:

nextFrame()

Goes to the next frame and stops.
Source:

noLoop()

Prevents the animation from looping
Source:

pause()

Pauses the animation.
Source:

play()

Plays the animation, starting from the specified frame.
Source:
Returns:
[Promise] a promise that resolves when the animation completes

previousFrame()

Goes to the previous frame and stops.
Source:

rewind()

Plays the animation backwards. Equivalent to ani.goToFrame(0)
Source:
Returns:
[Promise] a promise that resolves when the animation completes rewinding

stop()

Stops the animation. Alt for pause.
Source: