powered by Slim Framework
enhanced by Nesbot.com

HTML5: Experimenting with the canvas for a basic walk animation

Published on Oct 10, 2011 by Jamie Munro

I don't claim to be an animator, Javascript expert, or anything else; I simply wanted to explore the new canvas tag in HTML5.  In the following article, I demonstrate how to create a simple walking animation using a free sprite that I found on the Internet.




Before I show the solution, I'm going to start with the finished product.  Like I stated, it's extremely basic and not the most overly exciting thing in the world.  But from a person who has been creating web applications for 10 years, I found it pretty cool.

[[EXAMPLE]]

To accomplish this, you will need a basic sprite image.  Here is the one I used:



Finally the basic HTML5 and Javascript are contained below to perform the actual walking animation.


<!DOCTYPE html>
<html>
<head>
<title>Sprite Test</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
</head>

<body>

<canvas id="myCanvas"></canvas>
<img src="/img/Koopa-update.png" id="koopa" style="display: none" alt="" />

<script>
var myCanvas;
var context;
var koopa;

var x = 0;
var timer;
var walker = 300;

$(document).ready(function() {
myCanvas = document.getElementById('myCanvas');
context = myCanvas.getContext('2d');

koopa = document.getElementById('koopa');
timer = setInterval("drawFrameLeft()", walker);
});

function drawFrameLeft() {
context.clearRect(0, 0, 300, 300);
context.drawImage(koopa, 215 + (x * 30), 0, 30, 45, 0 + (x * 30), 0, 30, 45);
x++;

if (x > 5) {
x = 0;
clearInterval(timer);
timer = setInterval("drawFrameRight()", walker);
}
}

function drawFrameRight() {
context.clearRect(0, 0, 300, 300);
context.drawImage(koopa, 155 - (x * 30), 0, 30, 45, 150 - (x * 30), 0, 30, 45);
x++;

if (x > 5) {
x = 0;
clearInterval(timer);
timer = setInterval("drawFrameLeft()", walker);
}
}
</script>
</body>
</html>


The above code is by no means optimized and I've pretty much hard-coded everything for this sprite.  But let's review the specifics to explain what is happening.

The first thing that is done is a new canvas is created and assigned an id.  An image is also loaded and hidden that contains the above sprite.  In the Javascript, a reference is obtained to this canvas which is then used to retrieve the drawing context.  Once you have the context, you can draw images, shapes, text, etc… with it.  In this scenario, I'm drawing an image onto the canvas.

Once the elements are all instantiated in Javascript, I start a basic timer to make the animation move to the left.  In this sprite there are 6 pieces to the animation, so once all frames are displayed, the timer is stopped and started again going in the opposite direction.  This is repeated endlessly.

Instead the drawFrame* functions, I first clear the rectangle.  If this isn't done, the last frame will stay on the screen – potentially a nice effect, just not in this scenario.  Next the drawImage function is called.  It accepts 9 parameters and they do the following:

  • The reference to the image to draw

  • The start x position in the image sprite to use

  • The start y position in the image sprite to use

  • The width of the image to pull – in this case each frame is 30 pixels wide

  • The height of the image to pull – in this case each frame is 45 pixels tall

  • The x position of where to draw it on the canvas

  • The y position of where to draw it on the canvas

  • The width of the frame to draw – typically this will match the width of the image to pull for each frame

  • The height of the frame to draw – typically this will match the height of the image to pull for each frame


That is the extent of making a basic animation.  The next steps are to remove the hard-coded values and make them all variables.  Also, it would be best to attempt to buffer the next frame of the animation in the background and then swap the canvases to avoid a "flicker" effect when there is a background image or other things happening on the canvas.

Summary


Converting a sprite image to an animation in HTML5 is as easy as drawing an image on the canvas and adjusting the location of where the x, y coordinates of the next frame to display are.

Tags: HTML5 | Javascript | html5

<- CSS: Fixed Position Content  Home CSS3: Transitioning AJAX Content into view with CSS3 Animations -> 
blog comments powered by Disqus