Show:

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.

An animation can be created either from a list of images or sequentially numbered images. p5.play 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.

Constructor

SpriteAnimation ()

Defined in v3/p5.play.js:1835

Example:

let shapeShifter = new SpriteAnimation("dog.png", "cat.png", "snake.png"); let walking = new SpriteAnimation("walking0001.png", 5);

Methods

draw
(
  • x
  • y
  • r=0
)

Defined in v3/p5.play.js:2092

Draws the animation at coordinate x and y. Updates the frames automatically.

Parameters:

  • x Number

    x coordinate

  • y Number

    y coordinate

  • [r=0] Number optional

    rotation

getFrameImage () p5.Image

Defined in v3/p5.play.js:2315

Returns the current frame image as p5.Image.

Returns:

p5.Image:

Current frame image

getImageAt
(
  • frame
)
p5.Image

Defined in v3/p5.play.js:2325

Returns the frame image at the specified frame number.

Parameters:

  • frame Number

    Frame number

Returns:

p5.Image:

Frame image

getWidth () Number
deprecated

Defined in v3/p5.play.js:2336

Use .w or .width instead.

Returns the current frame width in pixels. If there is no image loaded, returns 1.

Returns:

Number:

Frame width

goToFrame
(
  • toFrame
)

Defined in v3/p5.play.js:2267

Plays the animation forward or backward toward a target frame.

Parameters:

  • toFrame Number

    Frame number destination (starts from 0)

nextFrame ()

Defined in v3/p5.play.js:2241

Goes to the next frame and stops.

onComplete () SpriteAnimation

Defined in v3/p5.play.js:2215

fire when animation ends

Returns:

play ()

Defined in v3/p5.play.js:2186

Plays the animation.

previousFrame ()

Defined in v3/p5.play.js:2254

Goes to the previous frame and stops.

rewind ()

Defined in v3/p5.play.js:2205

Plays the animation backwards. Equivalent to ani.goToFrame(0)

stop ()

Defined in v3/p5.play.js:2196

Stops the animation.

Properties

frame

Number

Defined in v3/p5.play.js:1883

The index of the current frame that the animation is on.

frameChanged

Boolean

Defined in v3/p5.play.js:1945

True if frame changed during the last draw cycle

frameDelay

Number

Defined in v3/p5.play.js:1907

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: 4

images

Array

Defined in v3/p5.play.js:1875

Array of frames (p5.Image)

looping

Boolean

Defined in v3/p5.play.js:1936

If set to false the animation will stop after reaching the last frame

Default: true

name

String

Defined in v3/p5.play.js:1862

The name of the animation

offset

Object x and y keys

Defined in v3/p5.play.js:1895

The offset is how far the animation should be placed from the location it is played at.

Example:

offset.x = 16;

playing

Boolean

Defined in v3/p5.play.js:1918

True if the animation is currently playing.

Default: true

visible

Boolean

Defined in v3/p5.play.js:1927

Animation visibility.

Default: true