SpriteAnimation Class
Look at the Animation reference pages before reading these docs. The SpriteAnimation constructor can be used in multiple ways.
https://p5play.org/learn/sprite_animation.html
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. 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.
Constructor
SpriteAnimation
-
images
Parameters:
-
images...p5.Image multiple- p5.Image objects to be used as frames
Example:
let shapeShifter = new SpriteAnimation("dog.png", "cat.png", "snake.png");
Item Index
Methods
clone
()
SpriteAnimation
Make a copy of the animation.
Returns:
A copy of the animation.
draw
-
x -
y -
[r] -
[sx] -
[sy]
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.
Parameters:
-
xNumberhorizontal position
-
yNumbervertical position
-
[r]Number optionalrotation
-
[sx]Number optionalscale x
-
[sy]Number optionalscale y
frameImage
()
p5.Image
Returns the current frame as p5.Image.
Returns:
Current frame image
goToFrame
-
toFrame
Plays the animation forward or backward toward a target frame.
Parameters:
-
toFrameNumberFrame number destination (starts from 0)
Returns:
[Promise] a promise that resolves when the animation completes
loop
()
Plays the animation forwards and loops it.
nextFrame
()
Goes to the next frame and stops.
noLoop
()
Prevents the animation from looping
pause
()
Pauses the animation.
play
()
Plays the animation, starting from the specified frame.
Returns:
[Promise] a promise that resolves when the animation completes
previousFrame
()
Goes to the previous frame and stops.
rewind
()
Plays the animation backwards. Equivalent to ani.goToFrame(0)
Returns:
[Promise] a promise that resolves when the animation completes rewinding
stop
()
Stops the animation. Alt for pause.
Properties
endOnFirstFrame
Boolean
Ends the loop on frame 0 instead of the last frame. This is useful for animations that are symmetric. For example a walking cycle where the first frame is the same as the last frame.
Default: false
frame
Number
The index of the current frame that the animation is on.
frameChanged
Boolean
True if frame changed during the last draw cycle
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: 4
frames
Array
The frames of the animation.
h
Number
Height of the animation.
height
Number
Height of the animation.
images
Array
The frames of the animation. Alt for ani.frames
lastFrame
Number
Returns the index of the last frame.
looping
Boolean
If set to false the animation will stop after reaching the last frame
Default: true
name
String
The name of the animation
offset
Object x and y keys
The offset is how far the animation should be placed from the location it is played at.
Example:
offset.x = 16;
playing
Boolean
True if the animation is currently playing.
Default: true
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: 1
visible
Boolean
Animation visibility.
Default: true
w
Number
Width of the animation.
width
Number
Width of the animation.