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
Temp1538434252

Each Column is a different animation frame

Each Row is a different animation

Temp1538434326
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

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

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
Temp1538435344

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
Temp1538435644

Set the source x and source y to 0

Set the source width and source height to 64

Temp1538435984
Check Your Work
Step 8
Our sprite now displays the first animation frame of the spritesheet
Temp1538436014
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
Temp1538436093

Add this Script to index.htmls header

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

Add this constructor to the class

Temp1538436590
Step 13
Assign 3 properties to the 3 inputs
Temp1538436505

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

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

Go to Player.js:

Temp1538437204

Go to Sprite.js:

Temp1538529143
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

Temp1538529194
Step 17
Now we can use those parameters in the image call
Temp1538529225
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

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

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
Temp1538440872

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
Temp1538441162
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

Temp1538441767

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
Temp1538441518

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
Temp1538442166

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
Temp1538442247
Step 27
Set the source x to the current frame multiplied by the source width
Temp1538443117
Step 28
Now tell the animate function to increase the animation frame by 1
Temp1538443196
Step 29
Have the draw() method call the animate() method
Temp1538443332
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
Temp1538443698

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
Temp1538443823

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

Temp1538443959
Step 33
In the Player's constructor set the number of frames in its sprite to 4
Temp1538519309
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
Temp1538518944
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
Temp1538522377
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
Temp1538523691

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
Temp1538523976

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
Temp1538524095
Step 43
Update the frame advance code to mod by the frameSpeed instead of the number 4
Temp1538524183
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

Temp1538524297

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

Temp1538524480

Each row is separated by the source height

Step 46
Add an animationNumber property to the Sprite
Temp1538525204
Step 47
Set the source y to the animationNumber multiplied by the source height
Temp1538529379
Step 48
Try setting the animationNumber to 1
Temp1538525340
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
Temp1538525609
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
Temp1538525678
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)
Temp1538526384

Set the frameSpeed back if the player is moving:

Temp1538526452
Step 56
Also we set their animation frame to 0 when the stop as well
Temp1538526595
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

Temp1538527196

Drag and drop the image here:

Temp1538527272
Step 60
Open the ImageLoader file
Temp1538527589

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
Temp1538527664
Step 62
Copy the image code from the flower asset and paste it into the loadImage function
Temp1538527799

Paste inside a of " "s

Temp1538527874
Step 63
Make a new file "Flower.js"
Temp1538527910

Include this file in your index.html

Temp1538527971
Step 64
In Flower.js we'll create a Flower class and give it an x and a y property in its constructor
Temp1538528072
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
Temp1538528211

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
Temp1538528429

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
Temp1538528867
Check Your Work
Step 69
With that you should have an animated flower
Spritesheets and Animations Info

Account

MVCode Clubs

Created By

Newprofile 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