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!