How to use sprite sheets with HTML5 canvas

June 12th, 2011

Sprite sheets have been a part of game development since the mid-70’s and there’s a reason they’re still being used today. It uses less memory and processor power because you can load all of a character’s positions and poses in one image file instead of a different file for each one.Then you just move the sprite sheet to only show the part you want. And the great thing is, you can do this with the HTML5 canvas tag too, which makes building games more efficient.

To do this, you just need to add a few move parameters to the basic drawImage function. Let’s use the ship from my canvas shooter game as an example.

If we want to drive the ship on the canvas, then we would use this code:

1
2
3
4
5
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ship = new Image();
ship.src = 'ship.png';
ctx.drawImage(ship, x, y);

If you don’t understand this code, it’s probably best to learn more about it before you get into sprite sheets.

To use drawImage to display our sprite sheet, we’re going to need add six more parameters. And they’re divided into two main groups, the source info and the destination info:

1
ctx.drawImage(sprites,srcX,srcY,srcW,srcH,destX,destY,destW,destH);

The first one is obviously our sprite image. The next four are the position and width of our source image. Then last for are the position and width of the final image when it’s drawn on the canvas. Usually, the height and widths with be the same value because if srcW is bigger than destW, the image of our ship will get smushed over to the side and will be able to see the next image on the sprite sheet. If destW is the larger number, than our image ship will be stretch across the wider width.

In this example, when the user pushes either the left or right arrows keys, we’ll reposition the sprite sheet to show the ship turning in that direction. I’m not going to go line by line through the entire code, just the parts that you need to know to understand what’s going on. For our purposes, making the ship look like it’s turning, we can use the same basic set up as when you want the ship to move left and right:

1
2
3
4
5
6
7
8
9
10
11
if (rightKey) {
  ship_x += 5;
  srcX = 83;
} else if (leftKey) {
  ship_x -= 5;
  srcX = 156;
}
ctx.drawImage(sprites,srcX,srcY,ship_w,ship_h,ship_x,ship_y,ship_w,ship_h);
if (rightKey == false || leftKey == false) {
  srcX = 10;
}

The first part of the code is pretty simple and anyone with any experience building games will know what’s going on there, if the right arrow key is pressed do this or if the left arrow key is pressed do this. But when the right arrow key is pressed, we aren’t just moving the ship right by increasing ship_x by five, we’re also changing what part of the sprite sheet we see by changing the value of srcX. In this case, it’s to 83 pixels, which displays the second image on the sprite ship, which shows the ship turning right. The same happens when the left arrow key is pressed. But there’s still one more thing to remember, the sprite sheet has the be reset, as it will have to be in most cases. A simple if statement, that checks if neither of the left or right arrow keys are being pressed, then reset srcX back to 10.

You can check out a demo here.

It’s actually a lot more simple than you would think it would be. Using a technique like this can really add to your game. Another thing to remember is that you could put every single graphic you need for your game on one sprite sheet so that you only need to load the one element and that could improve loading times for your game.

4 Responses to How to use sprite sheets with HTML5 canvas

  1. Grinya says:

    This’s simple and nice.

    Thx.

  2. html5juego says:

    I love this example, it is just what every body needs in order to get started with html5 animation., thanks!

  3. html5juego says:

    Any idea how can I increment the source as I progress to the right and display diferent images?, it is maybe a dumb question but I just can’t figure out how …

  4. This is just what I was looking for, Thank you very much.

    There only one thing that I am lacking and it is to move the ship upwards and downwards while the background is been also replaced. That way I would have figured out how to build an asteroids game by my own.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>