Introduction to Animation spritesheet

Animation based on spritesheet'ah used in games for quite some time. Including the popular games such as Legend of Zelda: A Link to the Past or Cut the Rope. In this article we will talk about how this works and how its animation program. As a programming language will be using JavaScript, but you can choose any convenient for you.

Before we talk about how to program spritesheet animation, we need to define three terms: animation, and sprite, indeed, spritesheet.

Animation

Back in 1872 the British and American photographer Eadweard Muybridge was commissioned to find out if the horse raises all its 4 legs while running. Meybridzh for that use multiple cameras to take photos of a horse with a rider ran past. As a result, the photographer got 16 images horse. By the way, in a couple of them are really four feet in the air.

Later Meybridzh repeated the experiment, but put all the photos in a device that could project them in rapid succession so that the resulting illusion of running horses. This device later called the film projector.

How to quickly change the images to create the illusion of movement called animation.

Sprite

Sprite is a graphical representation that is placed on the big stage. That is, the sprite is part of the scene.

Sprites are a popular way to create a large and complex scenes, as you can manipulate and control each image individually. This allows better control of what is happening on stage.

It is not uncommon in the game, there are dozens, even hundreds of sprites. Loading each of them as an individual and self-image will consume a lot of memory and computing power. In order to avoid these inconveniences and used spritesheet'y.

Spritesheet'y

When you put a lot of sprites into a single image, you get spritesheet.

Spritesheet'y used to accelerate the process of displaying images on the screen. It is much more efficient and faster upload one big picture and show it to the part you download a lot of sprites and show them.

Animation based on spritesheet, is nothing more than an ordinary spritesheet, which is not shown entirely, and frame by frame. And these images change with a sufficiently high velocity.The principle of this animation is similar to the principle of the film projector, created Meybridzhem.

Part spritesheet'a

Spritesheet itself consists of two parts: a frame and cycles.

A frame is a normal picture (or sprite). For example, a horse Meybridzha: each image of a horse across a frame animation.

If you put the pictures in the right order, you get a continuous movement. That is the cycle.

Programming spritesheet animation

There are 3 stages of creating spritesheet animation:

1. Create an image.
2. Update image for each frame of animation.
3. Drawing animation on the screen.

Create an image

Start by creating a function (or class) that will handle our spritesheet animation. This function will create an image and establish its way to ensure that we can use it for further drawing on the screen.

1 2 3 4 5 6 7 8 9 10 11 12 13

function SpriteSheet(path, frameWidth, frameHeight) {    var image = new Image();    var framesPerRow;    // вычисление количества кадров в строке после загрузки изображения    var self = this;    image.onload = function() {       framesPerRow = Math.floor(image.width / frameWidth);    };    image.src = path; }

Since spritesheet'y may have different sizes, knowing the size of one frame, we will know the number of shots in a row and column.

It is important that each frame of animation has the same size, otherwise the animation will not genuine.

Update image

To update spritesheet animation, we need to change the picture that is drawn at the moment.Below spritesheet divided into frames, each of which is numbered.

To change the current frame to the next need not immediately, but after some time. That is, when the show of one of the frames you want to make some delay before you change it.

It is important to note that not everyone is available to sprite spritesheet in each of his shots.For example, in spritesheet'e Meybridzha 16th sprite offline. If we did not consider this, the animation would have been a flash.

Avoid spikes easily: we will not draw these empty picture:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function SpriteSheet(path, frameWidth, frameHeight, frameSpeed, endFrame) {   // код удален для краткости   var currentFrame = 0;  // текущий кадр для отрисовки   var counter = 0;       // счетчик ожидания   // обновление анимации   this.update = function() {     // если подошло время смены кадра, то меняем     if (counter == (frameSpeed - 1))       currentFrame = (currentFrame + 1) % endFrame;     // обновление счетчика ожидания     counter = (counter + 1) % frameSpeed;     } };

If you use an operation to take the remainder of the division (%) for currentFrame we create a continuous cycle of numbers from 0 to endFrame. Thus, we reproduce only those frames, images for which we have in spritesheet'e.

Drawing animation

We calculate the row with the required overs, taking the remainder from dividing the number of the current frame by the number of frames in a row. Also, we calculate the column with the desired frame by dividing the number of the current frame by the number of frames in a row.

Using the obtained values ​​we can find the coordinates of the framework within which the frame is required:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// отрисовка текущего кадра    this.draw = function(x, y) {       // вычисление столбика и строчки с нужным кадром       var row = Math.floor(currentFrame / framesPerRow);       var col = Math.floor(currentFrame % framesPerRow);       ctx.drawImage(          image,          col * frameWidth, row * frameHeight,          frameWidth, frameHeight,          x, y,          frameWidth, frameHeight);   }; }

Now we are ready to create the animation:

1 2 3 4 5 6 7 8 9 10

spritesheet = new SpriteSheet('Walk_Cycle_Image.png', 125, 125, 3, 16); function animate() {    requestAnimFrame( animate );    ctx.clearRect(0, 0, 150, 150);    spritesheet.update();    spritesheet.draw(12.5, 12.5); }

Several cycles in one spritesheet

The above code will work for any spritesheet'a containing exactly one cycle. However, there are several cycles spritesheet'y (animation).

To work with multiple animations in one spritesheet'e, we need to change our principle.

Create an image

To store information about the image and its size:

1 2 3 4 5 6 7 8 9 10 11 12 13

function SpriteSheet(path, frameWidth, frameHeight) {   this.image = new Image();   this.frameWidth = frameWidth;   this.frameHeight = frameHeight;   // вычисление количества кадров в строке после загрузки изображения   var self = this;   this.image.onload = function() {     self.framesPerRow = Math.floor(self.image.width / self.frameWidth);   };   this.image.src = path; }

Updating and drawing animation

Feature Animation () will be responsible for updating and drawing pictures:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

function Animation(spritesheet, frameSpeed, startFrame, endFrame) {   var animationSequence = [];  // array holding the order of the animation   var currentFrame = 0;        // the current frame to draw   var counter = 0;             // keep track of frame rate   // создание последовательности из номеров кадров анимации   for (var frameNumber = startFrame; frameNumber <= endFrame; frameNumber++)     animationSequence.push(frameNumber);   // обновление анимации   this.update = function() {     // если подошло время смены кадра, то меняем     if (counter == (frameSpeed - 1))       currentFrame = (currentFrame + 1) % animationSequence.length;     // обновление счетчика ожидания     counter = (counter + 1) % frameSpeed;   };   // отрисовка текущего кадра   this.draw = function(x, y) {     // вычисление количества кадров в строке после загрузки изображения     var row = Math.floor(animationSequence[currentFrame] / spritesheet.framesPerRow);     var col = Math.floor(animationSequence[currentFrame] % spritesheet.framesPerRow);     ctx.drawImage(       spritesheet.image,       col * spritesheet.frameWidth, row * spritesheet.frameHeight,       spritesheet.frameWidth, spritesheet.frameHeight,       x, y,       spritesheet.frameWidth, spritesheet.frameHeight);   }; } spritesheet = new SpriteSheet('Walk_Cycle_Image.png', 125, 125); walk = new Animation(spritesheet, 3, 0, 15); function animate() {    requestAnimFrame( animate );    ctx.clearRect(0, 0, 150, 150);    walk.update();    walk.draw(12.5, 12.5); }

Since spritesheet comprises a plurality of frames for the different animations, we need to know the number of frames the animation which we now want to play.

Afterword

We wrote a simple game-runner, using the most animated, as discussed in the article. The source code presented in this article, you can see by clicking on thislink.