Loading an Animation
An animation is a series of images (frames) that are displayed one after the other at a fast enough rate to give the appearance of motion.
The sprite.addAni function adds an animation to a sprite. It works with three different
animation formats: sequence, list, and sprite sheet.
In this code example, the cloud breathing animation is loaded using a numbered sequence of images given the path to the first frame and the index of the last frame in the sequence.
sprite.addAni can also be provided a list of frames.
The ani.frameDelay property specifies how long each frame in the animation 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 changing the frame delay in this code example!
A sprite sheet is a single image that contains all the frames of an animation.
ani.spriteSheet is displayed in the sketch so you can see what one looks like.
Every animation frame must be the same size, grid aligned, and in order from left to right, top to bottom.
If you want an animation to only use specific frames from the sprite sheet, set the "frames" property of the atlas object to an array of frame indexes.
Animating
sprite.ani stores the sprite's current animation, which enables access to its properties
and functions like play and stop.
Try using your keyboard to control the animation!
Changing Animations
Provide a name for an animation as an optional first input parameter to
sprite.addAni. Then you can use the sprite.changeAni function to
change a sprite's animation.
Try pressing the left mouse button. When the sprite.debug property is set to true,
you can see the sprite's physics body collider.
Try pressing left and right on your keyboard to make the ghost move.
Try pressing the space bar to stop the animation.
Groups with Animations
If an animation is added to a group, new group sprites will receive a copy of that animation.
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!
Sprite Sheet of Animations
To load multiple animations use the addAnis function, which accepts two input
parameters:
- a sprite sheet image or url
- an object that uses animation names as keys and atlas objects as values.
In the "hero" example the size of the hero sprite is set to 32x32 pixels in the
Sprite constructor. The size is used as a multiplier to row and column values in
sprite sheet atlas objects.
Click this link to see the full questKid sprite sheet used in the example.
Anis
Every sprite and group has an anis object that stores its animations. The keys are
animation names and values are animation objects. It works like groups do, utilizing soft and
dynamic inheritance.
For example, setting anis.offset changes the offset of all the sprite's animations.
The ani.offset property is used to adjust the position of an animation relative to
the sprite's position.
Sprite Sheet of Images
Some sprite sheets contain a collection of images (subtextures) packed into a single file. This enables them to be loaded with one network request, reducing loading time and improving performance.
Take a look at the traffic sprite sheet from Kenney's "Pixel Vehicle Pack".
In q5play, each subtexture can be loaded as a single frame animation.
Texture Atlas
Known issue in q5play beta: using animations from a texture atlas is not working yet.
A texture atlas describes the size and position of each subtexture within a tightly packed sprite sheet. For example, see the traffic texture atlas.
Use parseTextureAtlas to parse an xml texture atlas into an object that can be used
with addAnis.
Cut Frames
When sections of a pixel art (low resolution) sprite sheet are drawn to the canvas, edge artifacts can occur.
In this example, notice how the edges contains parts of other vehicles?
Set anis.cutFrames to true before loading animations to make q5play cut a sprite
sheet image into separate images for each frame.
Animation Sequencing
sprite.changeAni can accept an animation object, animation name, or array of animation
names that will be played in sequence.
By default if looping is enabled, the last animation in the sequence will be looped. To loop the
entire sequence, use '**' as the last animation name. If instead you want the sequence
to stop at the end, use ';;' as the last animation name.
This code example shows how the hero character can be moved around the screen using WASD or the arrow keys!