Home » Tutorials » JavaScript » Animating Sprites In HTML5 Canvas

Animating Sprites In HTML5 Canvas

Animating Sprites In HTML5 Canvas

  • Stumble it!
  • Share

When you want to build your own web games using the HTML5 Canvas element, you will need to find a way to handle your sprites animation. In this article, we will introduce HTML5 Canvas animation and walks you through creating an animation of character walking.

View Demo

If you are new to HTML5 Canvas element, I suggest you to read this article first “HTML5 Canvas For Absolute Beginners“.

We are going to use the following PNG file as source of our sprite sequence:

sprite
PNG sprite sequence

HTML5 Structure

<!DOCTYPE html>
    <head>
    	<meta charset="UTF-8" />
        <title>Animating Sprites In HTML5 Canvas | onlyWebPro.com</title>
    </head>
    <body>
        <canvas id="myCanvas" width="100" height="100">
            <!-- Insert fallback content here -->
            Sorry, your browser doesn't support canvas technology
        </canvas>
        <script>
			//Script goes here
		</script>
    </body>
</html>

We will create a canvas for displaying our sprites and set the width, height of the canvas to 100px. Please bear in mind that, the width and height of each frame of the PNG sprite sequence is 100 pixel:

animated_sprites_description

Besides, please remember to assign an id for our canvas element. For this case, we named it as “myCanvas“.

And that’s all for the HTML structure! Now, let’s take a look at the JavaScript section.

JavaScript

<script>
	var width = 100,
		height = 100,
		frames = 4,
		
		currentFrame = 0,
		
		canvas = document.getElementById("myCanvas");
		ctx = canvas.getContext("2d");
		image = new Image()
		image.src = 'sprite.png';
	
	var draw = function(){
		ctx.clearRect(0, 0, width, height);
		ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height);
	
		if (currentFrame == frames) {
		  currentFrame = 0;
		} else {
		  currentFrame++;
		}
	}
	
	setInterval(draw, 100);
</script>

As you seen above, the first thing we do in JavaScript section is to define the variables:

  • width: The width of the canvas.
  • height: The height of the canvas.
  • frames: The total frames of the animated sprites.
  • currentFrame: The current frame of the animated sprites.
  • canvas: For accessing the rendering context element.
  • ctx: Render canvas’s context in 2D format.
  • image: A variable to hold our PNG file.

To animate the sprite, we need just display each frame of the sprite using drawImage() method. The drawImage() is a method that allow us to draw image or video onto canvas. Below is the syntax and parameters of drawImage():

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Parameter Description
img Specifies the image, canvas, or video element to use
sx Optional parameter. The x coordinate where to start clipping
sy Optional parameter. The y coordinate where to start clipping
swidth Optional parameter. The width of the clipped image
sheight Optional parameter. The height of the clipped image
x The x coordinate where to place the image on the canvas
y The y coordinate where to place the image on the canvas
width Optional parameter. The width of the image to use (stretch or reduce the image)
height Optional parameter. The height of the image to use (stretch or reduce the image)

Next, we write a conditional statement to check if the currentFrame is less than total frames, then increment the currentFrame. The currentFrame is used to decide which frame of the sprite should we display on the canvas via drawImage() method.

Lastly, we use “setInterval()” to run the draw function every 100 milliseconds.

That’s it! Save your document and run it on supported browser!

You may also like:


  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes
  • Create Sequential Animations in jQuery

Android, iOS Development Tutorials