van an nguyen

A small sprite animation framework

A small sprite animation framework

Introduction

Now that we have presented the principle of sprite extraction (sprites as sub-images of a single composite image), let’s write a small sprite animation framework.

Here is how you would create and animate a sprite:

  1. var robot;
  3. window.onload = function() {
  4.    canvas = document.getElementById(“canvas”);
  5.    ctx = canvas.getContext(“2d”);
  7.   // Load the spritesheet
  8.   spritesheet = new Image();
  9.   spritesheet.src = SPRITESHEET_URL;
  11.   // Called when the spritesheet has been loaded
  12.   spritesheet.onload = function() {
  13.     …
  14.     robot = new Sprite();
  15.     // 1 is the posture number in the sprite sheet. We have
  16.     // only one with the robot.
  17.     robot.extractSprites(spritesheet, NB_POSTURES, 1,
  18.                          NB_FRAMES_PER_POSTURE,
  19.                          SPRITE_WIDTH, SPRITE_HEIGHT);
  20.     robot.setNbImagesPerSecond(20);
  22.     requestAnimationFrame(mainloop);
  23.  }; // onload
  24. };
  26. function mainloop() {
  27.   // Clear the canvas
  28.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  29.   // draw sprite at 0, 0 in the small canvas
  30.   robot.draw(ctx, 0, 0, 1);
  32.   requestAnimationFrame(mainloop);
  33. }

Try the example on JSBin that uses this framework first! Experiment by editing line 20: robot.setNbImagesPerSecond(20); changing the value of the parameter and observing the result.

Example of the sprite framework on JsBin. Screenshot

THE SPRITEIMAGE object AND SPRITE MODELS

In this small framework we use “SpriteImage “, a JS object we build to  represent one sprite image. Its properties are: the global sprite sheet to which it belongs, its position in the sprite sheet, and its size. It also has a draw method for drawing the sprite image at an xPos, yPos position, and at anappropriate size. 

  1. function SpriteImage(img, x, y, width, height) {
  2.    this.img = img; // the whole image that contains all sprites
  3.    this.x = x;     // x, y position of the sprite image in the whole image
  4.    this.y = y;
  5.    this.width = width; // width and height of the sprite image
  6.    this.height = height;
  7.   
  8.    this.draw = function(ctx, xPos, yPos, scale) {
  9.       ctx.drawImage(this.img,
  10.         this.x, this.y, // x, y, width and height of img to extract
  11.         this.width, this.height,
  12.         xPos, yPos, // x, y, width and height of img to draw
  13.         this.width*scale, this.height*scale);
  14.  };
  15. }

We define the Sprite model. This is the one we used to create the small robot in the previous example.

    • A Sprite is defined by an array of SpriteImage objects.
    • It has a method for extracting all SpriteImages from a given sprite sheet and filling the above array.
    • It has a draw method which will draw the current SpriteImage. A Sprite is an animated object, therefore, calling draw multiple times will involve an automatic change of the current SpriteImage being drawn.
    • The number of different images to be drawn per second is a parameter of the sprite.

Here is the code of the Sprite model:

  1. function Sprite() {
  2.   this.spriteArray = [];
  3.   this.currentFrame = 0;
  4.   this.delayBetweenFrames = 10;
  6.   this.extractSprites = function(spritesheet,
  7.                                  nbPostures, postureToExtract,
  8.                                  nbFramesPerPosture,
  9.                                  spriteWidth, spriteHeight) {
  10.     // number of sprites per row in the spritesheet
  11.     var nbSpritesPerRow = Math.floor(spritesheet.width / spriteWidth);
  13.     // Extract each sprite
  14.     var startIndex = (postureToExtract -1) * nbFramesPerPosture;
  15.     var endIndex = startIndex + nbFramesPerPosture;
  16.     for(var index = startIndex; index < maxIndex; index++) {
  17.     // Computation of the x and y position that corresponds to the sprite
  18.       // index
  19.       // x is the rest of index/nbSpritesPerRow * width of a sprite
  20.       var x = (index % nbSpritesPerRow) * spriteWidth;
  21.       // y is the divisor of index by nbSpritesPerRow * height of a sprite
  22.       var y = Math.floor(index / nbSpritesPerRow) * spriteHeight;
  24.       // build a spriteImage object
  25.       var s = new SpriteImage(spritesheet, x, y, spriteWidth, spriteHeight);
  27.       this.spriteArray.push(s);
  28.     }
  29.   };
  31.   this.then = performance.now();
  32.   this.totalTimeSinceLastRedraw = 0;
  34.   this.draw = function(ctx, x, y) {
  35.     // Use time based animation to draw only a few images per second
  36.     var now = performance.now();
  37.     var delta = now – this.then;
  39.     // Draw currentSpriteImage
  40.     var currentSpriteImage = this.spriteArray[this.currentFrame];
  41.     // x, y, scale. 1 = size unchanged
  42.     currentSpriteImage.draw(ctx, x, y, 1);
  44.     // if the delay between images is elapsed, go to the next one
  45.     if (this.totalTimeSinceLastRedraw > this.delayBetweenFrames) {
  46.     // Go to the next sprite image
  47.       this.currentFrame++;
  48.       this.currentFrame %= this.spriteArray.length;
  50.     // reset the total time since last image has been drawn
  51.       this.totalTimeSinceLastRedraw = 0;
  52.     } else {
  53.       // sum the total time since last redraw
  54.       this. totalTimeSinceLastRedraw += delta;
  55.     }
  57.     this.then = now;
  58.   };
  60.   this.setNbImagesPerSecond = function(nb) {
  61.     // delay in ms between images
  62.     this.delayBetweenFrames = 1000 / nb;
  63.   };
  64. }

Same example but with the walking woman sprite sheet

Try this JsBin

Woman animated

This time we have changed the parameters of the sprites and sprite sheet. Now you can select the index of the posture to extract: the woman sprite sheet has 8 different postures, so you can call:

  1. womanDown.extractSprites(spritesheet, NB_POSTURES, 1,
  2.                          NB_FRAMES_PER_POSTURE,
  3.                          SPRITE_WIDTH, SPRITE_HEIGHT);
  5. womanDiagonalBottomLeft.extractSprites(spritesheet, NB_POSTURES, 2,
  6.                         NB_FRAMES_PER_POSTURE,
  7.                         SPRITE_WIDTH, SPRITE_HEIGHT);
  9. womanLeft.extractSprites(spritesheet, NB_POSTURES, 3,
  10.                          NB_FRAMES_PER_POSTURE,
  11.                          SPRITE_WIDTH, SPRITE_HEIGHT);
  12. // etc…

Moving the sprites, stopping the sprites

Example at JsBin

Woman moving left and right, jsbin screenshot

As usual, we used key listeners, an inputStates global object, and this time we created 8 woman sprites, one for each direction.

Notice that we added a drawStopped method in the Sprite model in order to stop animating the woman when no key is pressed for moving her.

Leave a comment