van an nguyen

Sprite extraction

Sprite extraction and animation

Principle

Before doing anything interesting with the sprites, we need to:

    1. Load the sprite sheet(s),
    2. Extract the different postures and store them in an array of sprites,
    3. Choose the appropriate one, and draw it within the animation loop, taking into account elapsed time. We cannot draw a different image of the woman walking at 60 updates per second. We will have to create a realistic “delay” between each change of sprite image.

In this lesson, we will construct an interactive tool to present the principles of sprite extraction and animation.

Sprite extraction

In this example, we’ll move the slider to extract the sprite indicated by the slider value. See the red rectangle? This is the sprite image currently selected! When you move the slider, the corresponding sprite is drawn in the small canvas. As you move the slider from one to the next, see how the animation is created? 

Try it at JSBin:

Screenshot of the example: move a slider to select a subimage/sprite from the spritesheet

HTML code:

  1. <html lang=“en”>
  2.  <head>
  3.  <title>Extract and draw sprite</title>
  4.  <style>
  5.    canvas {
  6.       border: 1px solid black;
  7.     }
  8.  </style>
  9.  </head>
  10.  <body>
  11.    Sprite width: 48, height: 92, rows: 8, sprites per posture: 13<p>
  12.    <label for=“x”>x: <input id=“x” type=“number” min=0><br/>
  13.    <label for=“y”>y: <input id=“y” type=“number” min=0><br/>
  14.    <label for=“width”>width: <input id=“width” type=“number” min=0><br/>
  15.    <label for=“height”>height: <input id=“height” type=“number” min=0><p>
  17. Select current sprite: <input type=range id=“spriteSelect” value=0> <output id=“spriteNumber”>
  19.  <p/>
  20.    <canvas id=“canvas” width=“48” height=“92” />
  21.  </p>
  22.    <canvas id=“spritesheet”></canvas>
  23.  </body>
  24. </html>

Notice that we use an <input type=”range”> to select the current sprite, and we have two canvases: a small one for displaying the currently-selected sprite, and a larger one that contains the sprite sheet and in which we draw a red square to highlight the selected sprite.

Here’s an extract from the JavaScript. You don’t have to understand all the details, just look at the part in bold which extracts the individual sprites:

  1. var SPRITE_WIDTH = 48;   // Characteristics of the sprites and spritesheet
  2. var SPRITE_HEIGHT = 92;
  3. var NB_ROWS = 8;
  4. var NB_FRAMES_PER_POSTURE = 13;
  6. // the different input and output fields
  7. var xField, yField, wField, hField, spriteSelect, spriteNumber;

  8. // The two canvases and respective contexts
  9. var canvas, canvasSpriteSheet, ctx1, ctx2;
  11. window.onload = function() {
  12.     canvas = document.getElementById(“canvas”);
  13.     ctx1 = canvas.getContext(“2d”);
  14.     canvasSpriteSheet = document.getElementById(“spritesheet”);
  15.     ctx2 = canvasSpriteSheet.getContext(“2d”);
  17.     xField = document.querySelector(“#x”);
  18.     yField = document.querySelector(“#y”);
  19.     wField = document.querySelector(“#width”);
  20.     hField = document.querySelector(“#height”);
  21.     spriteSelect = document.querySelector(“#spriteSelect”);
  22.     spriteNumber = document.querySelector(“#spriteNumber”);
  23.     
  24.     // Update values of the input fields in the page
  25.     wField.value = SPRITE_WIDTH;
  26.     hField.value = SPRITE_HEIGHT;
  27.     xField.value = 0;
  28.     yField.value = 0;
  29.     // Set attributes for the slider depending on the number of sprites on the 
  30.     // sprite sheet
  31.     spriteSelect.min = 0;
  32.     spriteSelect.max=NB_ROWS*NB_FRAMES_PER_POSTURE – 1;
  33.     // By default the slider is disabled until the sprite sheet is fully loaded
  34.     spriteSelect.disabled = true;
  35.     spriteNumber.innerHTML=0;
  37.     // Load the spritesheet
  38.     spritesheet = new Image();
  39.     spritesheet.src=“http://i.imgur.com/3VesWqx.png&#8221;;
  41.     // Called when the spritesheet has been loaded
  42.     spritesheet.onload = function() {
  43.       // enable slider
  44.       spriteSelect.disabled = false;
  46.       // Resize big canvas to the size of the sprite sheet image
  47.       canvasSpriteSheet.width = spritesheet.width;
  48.       canvasSpriteSheet.height = spritesheet.height;
  50.      // Draw the whole spritesheet
  51.      ctx2.drawImage(spritesheet, 0, 0);

  52.      // Draw the first sprite in the big canvas, corresponding to sprite 0
  53.      // wireframe rectangle in the sprite sheet
  54.      drawWireFrameRect(ctx2, 0 , 0, SPRITE_WIDTH, SPRITE_HEIGHT, ‘red’, 3);

  55.      // small canvas, draw sub image corresponding to sprite 0
  56.      ctx1.drawImage(spritesheet, 0, 0, SPRITE_WIDTH, SPRITE_HEIGHT,
  57.                                  0, 0, SPRITE_WIDTH, SPRITE_HEIGHT);
  58.    };
  60.    // input listener on the slider
  61.    spriteSelect.oninput = function(evt) {
  62.      // Current sprite number from 0 to NB_FRAMES_PER_POSTURE * NB_ROWS
  63.      var index = spriteSelect.value;
  65.      // Computation of the x and y position that corresponds to the sprite
  66.      // number index as selected by the slider
  67.      var x = index * SPRITE_WIDTH % spritesheet.width;
  68.      var y = Math.floor(index / NB_FRAMES_PER_POSTURE) * SPRITE_HEIGHT;
  70.      // Update fields
  71.      xField.value = x;
  72.      yField.value = y;
  74.      // Clear big canvas, draw wireframe rect at x, y, redraw stylesheet
  75.      ctx2.clearRect(0, 0, canvasSpriteSheet.width, canvasSpriteSheet.height);
  76.      ctx2.drawImage(spritesheet, 0, 0);
  77.      drawWireFrameRect(ctx2, x , y, SPRITE_WIDTH, SPRITE_HEIGHT, ‘red’, 3);
  79.      // Draw the current sprite in the small canvas
  80.      ctx1.clearRect(0, 0, SPRITE_WIDTH, SPRITE_HEIGHT);
  81.      ctx1.drawImage(spritesheet, x, y, SPRITE_WIDTH, SPRITE_HEIGHT,
  82.                                  0, 0, SPRITE_WIDTH, SPRITE_HEIGHT);
  84.      // Update output elem on the right of the slider
  85.      spriteNumber.innerHTML = index;
  86.   };
  87. };
  89. function drawWireFrameRect(ctx, x, y, w, h, color, lineWidth) {
  90.   ctx.save();
  91.   ctx.strokeStyle = color;
  92.   ctx.lineWidth = lineWidth;
  93.   ctx.strokeRect(x , y, w, h);
  94.   ctx.restore();
  95. }

Explanations:

    • Lines 1-4: characteristics of the sprite sheet. How many rows, i.e., how many sprites per row, etc.
    • Lines 11-39: initializations that run just after the page has been loaded. We first get the canvas and contexts. Then we set the minimum and maximum values of the slider (an <input type=range>) at lines 31-32, and disable it at line 34 (we cannot slide it before the sprite sheet image has been loaded). We display the current sprite number 0 in the <output> field to the right of the slider (line 35).  Finally, in lines 37-39, we load the sprite sheet image.
    • Lines 42-58: this callback is run once the sprite sheet image has been loaded. We enable the slider, set the big canvas to the size of the loaded image, and then draw it (line 51). We also draw the first sprite from the sprite sheet in the small canvas and draw a red wireframe rectangle around the first sprite in the sprite sheet (lines 52-58).
    • Lines 61-87: the input listener callback, called each time the slider moves. Lines 65-68 are the most important ones here: we compute the x and y position of the sprite selected with the slider. We take into account the number of sprites per posture, the number of rows, and the dimensions of each sprite. Then, as in the previous step, we draw the current sprite in the small canvas and highlight the current sprite with a red rectangle in the sprite sheet.

The code is generic enough to work with different kinds of sprite sheets. Adjust the global parameters in bold at lines 1-5 and try the extractor.

Example 2: here is the same application with another sprite sheet. We just changed these parameter values: try the same code but with another sprite sheet (the one with the robot) – see on JSBin:

same example but with the robot spritesheet

Now it’s time to see how we can make a small sprite animation framework!

Leave a comment