Sprite–based animation

Hello! Welcome for the sprite animation lesson. 

A sprite is a small character that you can animate by drawing consecutive images.

Here you can see a small woman that is just moving... and the way we could obtain this effect is that we used what we call a "sprite sheet". 

A sprite sheet is a big image with different sub-images that... if you draw them consecutively and rapidly it gives the illusion of a movement. 

We've got different postures in this sprite sheet. 

We've got in the first row the woman moving towards us, in the next row she's going to the bottom and left, and so on... 

We can have many different sorts of sprite sheets. 

How can we work with that?

The first thing is that you need to understand how to compute the coordinates for extracting a sub-image. 

We've got different parameters here that are the number of postures, the number of frames -of small images- per posture, and of course the width and the height of a sub-image. 

I wrote a small utility that you will find in the course, that is good for checking if the sprite extraction parameters are correct. 

Here I just change the position of the slider. 

You can see that I can extract the sprite, the sub-image, number 17 here... and the code... you can try it with other sorts of sprite sheets. 

Here, we've got a huge sprite sheet with big resolution sprites. 

And on the same sprite sheet we've got only one posture.... number of posture: 1, that is made of 16 different images. 

And if you look at the code from the extractor, if you try it, you will see that it goes automatically to the next line when it reaches the end of the line. 

Because it knows the width of the sprite sheet and the width of the sprites, the sub-images, and the number of sub-images.

So, once you've got an extractor and you know how to do that (extract sub-images), you can just draw in real time consecutive images, to obtain such an effect. 

And in the course, we propose what we called "a small sprite framework", that is composed of different constructor functions. 

One is called SpriteImage and defines a sub-image inside the big sprite sheet. 

It's got a property that is the sprite sheet it belongs to, the x and y position inside the sprite sheet, and the width and the height. 

We also wrote a method for drawing this sprite, it will call the drawImage from the canvas API, and we just set the correct parameters for drawing the sub-image. 

We also defined another constructor function for defining the sprites themselves. 

A sprite is an animated character made of different SpriteImages.

So, in this code, what do we have? We've got an extractSprite method. 

When you want to create a new animated character made of small images, you create a sprite, you extract the different sub-images... this one actually returns an array of images…this.spriteArray.push(s) here... and then we've got a draw function that instead of drawing a single image, will draw the current sub-image for the character. 

And if you call consecutively this draw function, you can see that the current frame index is changing. 

In that example, we draw ten times... ten images per second. 

And we can set this number to have a faster animation... the way we use these two utility functions is like that: you first create a sprite... here robot = new Sprite()... then you extract the different sub-images... you pass the sprite sheet and the different parameters that define the sprite itself: how many postures, how many frames per posture and so on... 

Then you set the animation rate you want: 20 images per second... if I use 10 it will be... ok... if I use 40 it will be faster... 60 it will be even faster, and so on. 

SO, I can set the speed of the animation: 6 images per second here... and then, in the loop (the animation loop), we just call the draw function on the sprite: robot.draw() will just draw and change automatically the image to be drawn, depending on the number of images per second you wanted. 

We proposed these simple sprite extractor function and Sprite model. 

But there is room for improvements: we count on you for helping us improve these utilities by adding more functionalities.

For example, we can have some sprite sheets that contain alphabets.. a, b, c... or numbers, and you can have some utility functions for transforming a string into a set of images, for example. 

Or we can have vertically aligned sprites inside the sprite sheet... in the examples we provided, we can extract only horizontally... there is room for improvement.

Here, we mixed the code from the spriteextractor / framework with the code from the small game framework with the monster. 

We just inserted the utility functions, defined a woman object with the x and y positions, we also defined the set of sprites for animating it. 

We also created, in this example, two constants with the indexes of the sprite postures for animating the woman to the left... the moving left posture when she’s moving to the left, and so on... 

That's all for this lesson! I hope you will show us what you can do with these utility functions, try with other sprite sheets... 

See you in the next lesson where we will learn how to manage game states, menus, make enemies die and other things like that... bye bye!

We have not yet investigated how this works, nor have we built it into the small game engine we started to build in earlier chapters. First, let's explain how to use "sprites" in JavaScript and canvas.