Time for action Making a game guide animation

Time for action Making a game guide animation

There is a graphics file named guide_sprite.png in the images folder. It is a game guideline graphic that contains each step of the animation.

Let's draw this guide into our game with animations:

  1. 1. Open the html5games.untangle.js JavaScript file in the text editor.

  2. 2. In the jQuery ready function add the following code:

    // load the guide sprite image
untangleGame.guide = new Image();
untangleGame.guide.onload = function() {
untangleGame.guideReady = true;
// setup timer to switch the display frame of the guide sprite
untangleGame.guideFrame = 0;
setInterval(guideNextFrame, 500);
}
untangleGame.guide.src = "images/guide_sprite.png";

  3. 3. We add the following function to move the current frame to the next frame every 500 meters:

    function guideNextFrame()
{
untangleGame.guideFrame++;
// there are only 6 frames (0-5) in the guide animation.
// we loop back the frame number to frame 0 after frame 5.
if (untangleGame.guideFrame > 5)
{
untangleGame.guideFrame = 0;
}
}

  4. 4. In the gameloop function, we draw the guide animation according to the current frame. 

    // draw the guide animation
if (untangleGame.currentLevel == 0 && untangleGame.guideReady)
{
// the dimension of each frame is 80x130.
var nextFrameX = untangleGame.guideFrame * 80;
ctx.drawImage(untangleGame.guide, nextFrameX, 0, 80, 130, 325,
130, 80, 130);
}

  5. 5. Let's watch the animation in the web browser by opening the index.html. The following screenshot demonstrates the animation of the game guideline. The guideline animation will play and loop until the player levels up:

What just happened?

We can draw only a region of an image when using the drawImage context function.

The following screenshot demonstrates the process of the animation step by step. The rectangle is the clipping region. We used a variable named guideFrame to control which frame to show. The width of each frame is 80. Therefore, we get the x position of the clipping region by multiplying the width and the current frame number:

var nextFrameX = untangleGame.guideFrame * 80;
ctx.drawImage(untangleGame.guide, nextFrameX, 0, 80, 130, 325, 130, 80, 130);

The guideFrame variable is updated every 500 meters by the following guideNextFrame function: 

function guideNextFrame()
{
untangleGame.guideFrame++;
// there are only 6 frames (0-5) in the guide animation.
// we loop back the frame number to frame 0 after frame 5.
if (untangleGame.guideFrame > 5)
{
untangleGame.guideFrame = 0;
}
}

Animating a sprite is a commonly used technique when developing games. There are some benefits of using sprite animation when developing games in traditional video games. The reasons may not apply to the web game development but we have other benefits of using sprite sheet animation:

  • All frames are loaded as one file so the whole animation is ready once the sprite file is loaded.

  • Putting all frames into one file means we can reduce the HTTP request from the web browser to the server. If each frame is a file, the browser requests the file many times while now it just requests one file and uses one HTTP request.

  • Putting different images into one file also helps reduce the duplicate file's header, footer, and meta data.

  • Putting all frames into one image means we can easily clip the image to display any frame without the complex code to change the image source.

It is usually used in character animation. The following screenshot is a sprite animation of an angry cat that I used in an HTML5 game named Neighbours (http://gamedesign.cc/html5games/neighbours/):

We built the sprite sheet animation by clipping the frame and setting up the timer ourselves in this example. When working with a lot of animations, we may want to use some third party sprite animation plugin or create our own canvas sprite animation to better reuse and manage the logic code.

Note

Sprite animation is an important topic in HTML5 games development and there are many online resources discussing this topic. The following links are some of them:

The sprite animation tutorial (http://codeutopia.net/blog/2009/08/21/using-canvas-to-do-bitmap-sprite-animation-in-javascript/) from CodeUtopia discusses how we can make a sprite object from scratch and use it to animate a sprite.

The sprite animation demo (http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/) by John Graham provides another sprite object to animate a sprite in canvas.

The Spritely (http://www.spritely.net/), on the other hand, provides sprite animation over the DOM element with CSS. It is useful when we want to animate a sprite without using canvas.