Spritesheets and Animations

Planning
Step 1
In this lesson we will learn to make a Sprite class using a spritesheet to hold all of its animations
Planning
Step 2
We will be using this spritesheet of a character walking in 4 directions

Each Column is a different animation frame

Each Row is a different animation

Check Your Work
Step 3
The repo you've started with has a Player class which can move around with the arrow keys

Try it out

Step 4
In the Player.js file we see the Player.draw() function uses a colored rectangle

Change it so that we draw the spritesheet, which is loaded as trainerImage

Check Your Work
Step 5
We see that this displays the entire spritesheet

We want instead to select a small portion of the image and display that...

Information
Step 6
The image function allows us to display a small section of the source image

This window is called the Source

The Source has an x, y, width and height

Step 7
Add these parameters to the image function at the end like so

Set the source x and source y to 0

Set the source width and source height to 64

Check Your Work
Step 8
Our sprite now displays the first animation frame of the spritesheet
Planning
Step 9
Let's use this to make a Sprite class

The Sprite class will handle drawing and animating each sprite based on a couple of parameters

Step 10
Create a new file named Sprite.js

Add this Script to index.htmls header

Step 11
Create a Sprite class
Step 12
Each Sprite will need to know the imageData and the source width and height

Add this constructor to the class

Step 13
Assign 3 properties to the 3 inputs

so each Sprite object will have an image a sw and a sh

Step 14
The Sprite class needs two methods: draw() and animate()
Step 15
Move the image function call from the Player's draw function to the Sprite's draw function

Go to Player.js:

Go to Sprite.js:

Step 16
The Sprite will need a bit of information from the player in order to draw the image at the right place and size

Add x, y, w and h parameters to the draw method

Step 17
Now we can use those parameters in the image call
Step 18
Make variables for source X and source Y

Eventually we'll calculate their values depending on what frame we want to display.

For now we'll set them both to 0

Step 19
Lastly set the source x and source y using the Sprite's sx and sy properties
Step 20
Give the player a sprite property and set it equal to a new sprite

We'll set the imageData to trainerImg, and the sourceWidth and sourceHeight to 64

Step 21
The player's draw function now calls on its sprites draw function

And we pass the player's x, y, width (64), and height (64) to the function

Check Your Work
Step 22
Now we should see the Sprite class is drawing our image just as before
Planning
Step 23
Next we'd like to animate our sprite

Our spritesheet is set up such that we can play an animation by moving the source window over

We need to move the source window over by the source width

Information
Step 24
Note it's important to set up your spritesheets so that each image is the same distance away from each other

Our animation frames are each spaced out 64 pixels from each other

Planning
Step 25
The next animation frame requires the source x to be moved over an additional 64 pixels

frame 0 is at 0 pixels (0 x 64)

frame 1 is at 64 pixels (1 x 64)

frame 2 is at 128 pixels (2 x 64)

...

frame 100 would be at 6400 pixels (100 x 64)

Step 26
Add a frame property to your Sprite class
Step 27
Set the source x to the current frame multiplied by the source width
Step 28
Now tell the animate function to increase the animation frame by 1
Step 29
Have the draw() method call the animate() method
Check Your Work
Step 30
You should see the character animate rapidly and then disappear

But why do they disappear?

Planning
Step 31
The frame number get's high enough to move the source window of the spritesheet

We need to set the animation frame back to 0 when is passes the number of frames in the animation

Step 32
Let's add a number of frames property to the Sprite class

By default the value will be set to 1 frame (an image with no animation)

Step 33
In the Player's constructor set the number of frames in its sprite to 4
Challenge
Step 34
In the animate function tell the animation frame to reset to 0 IF it is greater than or equal to the number of frames
Check Your Work
Step 35
Your Sprite should repeat its animation whenever it reaches the end

But it is very fast...

Planning
Step 36
We could slow it down by only advancing the animation frame once every 4 frames or so
Information
Step 37
We can use frameCount to help with this

frameCount records the number of frames since the program began as shown below:

Information
Step 38
Here's how it looks if we take mod 4 of the frameCount

frameCount % 4:

(this video is slowed down so we can read it better)

Step 39
So let's only advance the animation frame if frameCount % 4 is equal to 0

Add this if-statement around the code the increases frame by 1

Check Your Work
Step 40
Now we can see it has slowed down, but is still quite fast
Step 41
Add a frameSpeed property to the Sprite class

By default the animation speed will be 0 (assuming most images will have no animation)

Step 42
In the player's draw method pass a framespeed of 4 to the sprite
Step 43
Update the frame advance code to mod by the frameSpeed instead of the number 4
Challenge
Step 44
How can you make this animation play slower. Do you need to mod by a higher or a lower number?

Set the frameSpeed here in the Player's draw method

Try to get the animation to play at close to this animation speed

Planning
Step 45
Next we'll allow the player to play different animations in the spritesheet

We can choose the animation by changing the Row of the source window

Each row is separated by the source height

Step 46
Add an animationNumber property to the Sprite
Step 47
Set the source y to the animationNumber multiplied by the source height
Step 48
Try setting the animationNumber to 1
Check Your Work
Step 49
The sprite should now be playing it's second animation
Step 50
Revert the Sprite's animationNumber so that it starts at 0 in the contructor
Planning
Step 51
In our case, each animationNumber represents a different direction for the player to walk in

Whenever the player moves we need to update their direction

Step 52
Here when the player presses left, we set the sprite's animation number to 1
Check Your Work
Step 53
The player should start by facing downwards and if you tap LEFT the player should turn to the left
Challenge
Step 54
Make the player face all 4 directions properly
Step 55
Let's make the player stop walking if they have no x or y velocity (if they are not moving)

Set the frameSpeed back if the player is moving:

Step 56
Also we set their animation frame to 0 when the stop as well
Check Your Work
Step 57
We should now have a fully animated player walking around!
Planning
Step 58
That may have seemed like a lot of work, but let's add another Sprite now that the Sprite class is complete

We'll add this animated flower to our project

Step 59
Save and upload this image to your project

Right click -> save as

Drag and drop the image here:

Step 60
Open the ImageLoader file

This file calls loadImage on every image in the preload function

(preload waits for all images to load before starting the program)

Step 61
First we add a new variable named flowerImg and set it equal to a loadImage function
Step 62
Copy the image code from the flower asset and paste it into the loadImage function

Paste inside a of " "s

Step 63
Make a new file "Flower.js"

Include this file in your index.html

Step 64
In Flower.js we'll create a Flower class and give it an x and a y property in its constructor
Planning
Step 65
So all we need to do to give this new class an animated sprite is add a sprite property and tell it to draw itself
Step 66
Add a sprite property

Our sprite has

- 4 animation frames

- a speed of 30

and

- a source x and y of 32px

Step 67
Add a draw method to the flower class where it calls it's sprite's draw method

The sprite will draw itself at the flower's x and y position, with a width and height of 32

Step 68
Now we add a new Flower at (50, 50) and tell it to draw iteself
Check Your Work
Step 69
With that you should have an animated flower
Spritesheets and Animations Info

Account

MVCode

Created By

jamie

Access Level

public

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach