How to load animations
An animation is a series of images that are displayed one after the other at a fast enough rate to give the appearance of motion.
The loadAni
function has a three different
modes: sequence, list,
and sprite sheet.
In this mini example, the cloud breathing animation is loaded using a numbered sequence of images given the path to the first image and the index of the last image in the sequence.
The animation
function is similar to the p5.js image
function. Use it in the p5.js
draw function to display an animation at a position.
In this mini example the loadAnimation
function is given a list of images.
The ani.frameDelay
property defines how many frames an image in the animation is displayed before
the next image is displayed. The default is 4. Higher values make the animation play slower. A frame
delay of 1 would make the animation play as fast as possible.
Try it out! Try changing the frameDelay in this mini-example.
This mini example loads an animation from a sprite sheet, which is a single image that contains all the frames of an animation. Take a look at the sprite sheet in this sketch which is displayed just so you can see what one looks like.
In sprite sheet mode, an atlas object can be used to specify the size of each frame and how many frames of animation there are.
If you really need to use an animation when your program starts, you should load it in the p5.js preload function instead of setup.
Animating
p5play gives you total control over your animations.
Try using your keyboard to test out some of the different ways to control animations!
Sprites with Animations
The sprite.addAni
function can be used to add a previously loaded animation to a sprite or it can
load and add an animation to a sprite just like loadAni
. By default the last animation added to
the
sprite will be the animation the sprite displays.
Try pressing the left mouse button. When the
sprite.debug
property is set to true you can
see the sprite's physics body collider.
Control a Sprite's Animation
sprite.ani
stores the sprite's current animation,
which can be changed by setting it to the name of a different
animation.
sprite.mirror
can be used to flip the sprite
horizontally or vertically.
Try pressing left and right to make the ghost move.
Try pressing the space bar to stop the animation.
Groups with Animations
If a group has only one animation, new group sprites will use that animation. Otherwise by default the sprite gets the last animation loaded.
Note that in this mini-example if you put splats too close together they'll move apart until their colliders are no longer overlapping. The size of the collider is taken from the size of the animation.
Try clicking the mouse to add new splats!