Show:
Module: p5play

An SpriteAnimation object contains a series of images (p5.Image) that can be displayed sequentially.

All files must be png images. You must include the directory from the sketch root, and the extension .png

A sprite can have multiple labeled animations, see Sprite.addAnimation and Sprite.changeAnimation, however an animation can be used independently.

An animation can be created either by passing a series of file names, no matter how many or by passing the first and the last file name of a numbered sequence. p5play will try to detect the sequence pattern.

For example if the given filenames are "data/file0001.png" and "data/file0005.png" the images "data/file0003.png" and "data/file0004.png" will be loaded as well.

Constructor

SpriteAnimation
(
  • fileName1
  • fileName2
  • fileNameN
)

Defined in lib/p5play.js:2667

Parameters:

  • fileName1 String

    First file in a sequence OR first image file

  • fileName2 String

    Last file in a sequence OR second image file

  • [fileNameN] String optional multiple

    Any number of image files after the first two

Example:

var sequenceAnimation;
var glitch;

function preload() {
  sequenceAnimation = loadAnimation("data/walking0001.png", "data/walking0005.png");
  glitch = loadAnimation("data/dog.png", "data/horse.png", "data/cat.png", "data/snake.png");
}

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(0);
  animation(sequenceAnimation, 100, 100);
  animation(glitch, 200, 100);
}

Methods

changeFrame
(
  • frame
)

Defined in lib/p5play.js:3045

Changes the current frame.

Parameters:

  • frame Number

    Frame number (starts from 0).

clone () SpriteAnimation

Defined in lib/p5play.js:2882

Objects are passed by reference so to have different sprites using the same animation you need to clone it.

Returns:

SpriteAnimation:

A clone of the current animation

draw
(
  • x
  • y
  • r=0
)

Defined in lib/p5play.js:2907

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

getFrame () Number

Defined in lib/p5play.js:3105

Returns the current frame number.

Returns:

Number:

Current frame (starts from 0)

getFrameImage () p5.Image

Defined in lib/p5play.js:3125

Returns the current frame image as p5.Image.

Returns:

p5.Image:

Current frame image

getHeight () Number

Defined in lib/p5play.js:3164

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

Returns:

Number:

Frame height

getImageAt
(
  • frame
)
p5.Image

Defined in lib/p5play.js:3135

Returns the frame image at the specified frame number.

Parameters:

  • frame Number

    Frame number

Returns:

p5.Image:

Frame image

getLastFrame () Number

Defined in lib/p5play.js:3115

Returns the last frame number.

Returns:

Number:

Last frame number (starts from 0)

getWidth () Number

Defined in lib/p5play.js:3146

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

Returns:

Number:

Frame width

goToFrame
(
  • toFrame
)

Defined in lib/p5play.js:3085

Plays the animation forward or backward toward a target frame.

Parameters:

  • toFrame Number

    Frame number destination (starts from 0)

nextFrame ()

Defined in lib/p5play.js:3059

Goes to the next frame and stops.

onComplete () SpriteAnimation

Defined in lib/p5play.js:3035

fire when animation ends

Returns:

play ()

Defined in lib/p5play.js:3007

Plays the animation.

previousFrame ()

Defined in lib/p5play.js:3072

Goes to the previous frame and stops.

rewind ()

Defined in lib/p5play.js:3026

Rewinds the animation to the first frame.

stop ()

Defined in lib/p5play.js:3017

Stops the animation.

Properties

frameChanged

Boolean

Defined in lib/p5play.js:2769

True if frame changed during the last draw cycle

frameDelay

Number

Defined in lib/p5play.js:2731

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 lib/p5play.js:2716

Array of frames (p5.Image)

looping

Boolean

Defined in lib/p5play.js:2760

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

Default: true

playing

Boolean

Defined in lib/p5play.js:2742

True if the animation is currently playing.

Default: true

visible

Boolean

Defined in lib/p5play.js:2751

Animation visibility.

Default: true