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.
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.
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.
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.
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
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
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
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!