Sprite Animation in HTML5 Canvas with KineticJS

If you want to simulate motion with repeated display of a set of images, where each image correspond to one position in a series of positions in motion, then you can do this easily with sprite. Sprite is individual image in this series of images that constitute motion. The example of sprite is a person walking, where his/her motions of hands and legs are repeated during the walk. However sprite animation is not limited to repeated motion only. You can simulate, for example, explosion of an object, with series of images (sprites), each showing different stages of the explosion.

In my simple HTML5 game, the planet stops moving (and the game ends) when it hits any asteroid or boundaries of the Canvas. I modified it so that the planet explodes when it hits any obstacle. And for this I used Sprites. KineticJS makes animating Sprites very easy. This is how my sprite sheet looks like (sprite sheet is one image that contains small individual sprite images) –

So explosion of the planet in my game happens in three stages, as shown in the above image.To animate this using KineticJS, first I need to create a JS object that describes positions and sizes of each image in the sprite sheet –

var explodeAnim = {
    explode :[{
        x:3,
        y:7,
        width:35,
        height:36
    },
    {
        x:45,
        y:7,
        width:35,
        height:36
    },
    {
        x:89,
        y:7,
        width:35,
        height:36
    }
    ]
};

X and Y coordinates of each image are with respect to the top-left corner of the sprite sheet image. Next I create Sprite object in KineticJS –

explosionSprite = new Kinetic.Sprite({
    x:0,y:0,
    image:explodeSprite,
    animation:"explode",
    animations:explodeAnim,
    frameRate:7
});

explosionSprite.hide();
layer.add(explosionSprite);

X and Y above are initial location of the sprite object. I have set it to 0.
Sprite sheet image is loaded (in variable explodeSprite) and set to ‘image’ member variable.
Sprite data (information about individual images in the sprite sheet) that I have created in explodeAnim variable is assigned to ‘animations’ member variable. I have set information about only one sprite animation in this variable. But a sprite sheet can contain sprites for many animations and you can specify them with different keys in the animation data object. I have only one key, ‘explode’, and I have assigned it to ‘animation’ member variable.
‘frameRate’ decides how fast the animation is performed.

When the collision happens, I call explode() function to perform sprite animation –

function explode()
{
    var x = kimgMovingO.getX();
    var y = kimgMovingO.getY();
    explosionSprite.setX(x);
    explosionSprite.setY(y);
    kimgMovingO.hide();
    explosionSprite.show();
    explosionSprite.afterFrame(2,function(){
        explosionSprite.stop();
        explosionSprite.hide();
        layer.draw();
        stopGame();
    });
    explosionSprite.start();
}

First I move sprite object to location of the moving object ( which is planet in my game). Then I hide the moving object and make sprite object visible. And then I start sprite animation with by calling explosionSprite.start(). Note that in this case sprite animation has three states, and each state is one frame. I want to stop animation after the third frame, which is what I do in explosionSprite.afterFrame function.

I have made one other change to the game. I have made the background image to rotate at regular interval.

Click the Start button below to see these changes.


-Ram Kulkarni

This entry was posted in Game, HTML5, JavaScript and tagged , , , , . Bookmark the permalink.

12 Responses to Sprite Animation in HTML5 Canvas with KineticJS

  1. How u check collision between sprites?

    • Ram Kulkarni says:

      Not sure what you mean by collision between sprites. Typically only one image in the sprite sheet would be displayed at a time, so collision cannot happen between images in the sprite sheet. If you are asking how to detect collision between images in general, then you may want to refer to my blog

  2. Hello! :D How did you change the background of the sprites in runtime so that the white background of the sprites do not show (but the background instead)?

    • Ram Kulkarni says:

      You will need to make background of image transparent before adding to the sprite sheet. You can use any image editor that support this, like PhotoShop, GIMP etc. However I don’t think you would want to do that at runtime.

  3. jhebbel says:

    I’ve been using CSS sprites for a couple years now for website icons and image itemed menus, However when the CSS Trim or position method is not compatible it shows my entire sprite image, Is HTML5’s Canvas method a suitable and better way of doing this as I can use to maintain compatibility as long as the is the non sprite version.

    I know I could always just ditch sprites but it makes for wicked fast page loads especially when a lot of PNG’s are used.

    • jhebbel says:

      It stipped my code lol so post is kind of grammatically incorrect. I want to use somthing like the following [canvas][im src='nonspriteimg.png'][/canvas] To maintain compatibility. Also is the canvas itself styleable i.e. set a transparent bg or alpha for mouseover?

      • Ram Kulkarni says:

        I haven’t used CSS for sprite animation, so I won’t be able to compare it with animation in Canvas. You cannot display image in the canvas by embedding image tag in it. You will have to write some JavaScript. Take a look at http://www.w3schools.com/tags/canvas_drawimage.asp.

        Regarding CSS styles for Canvas, I have used them to set background color and border.

        • jhebbel says:

          I’m only talking about for menu use, not necessarily animation outside what can be done in jquery. But as i understand it you can embed img tag inside canvas tag for backwards compatibility for non html5 compliant browsers.

  4. allc1809 says:

    How do you make an explosion, for example, a jet hitting an enemy jet – the enemy jet explodes in a sequence of explosions. Thanks.

    • Ram Kulkarni says:

      As I explained in this post –

      1. Create images of the jet in different stages of explosion
      2. Create a sprite sheet – one image with all above created images arranged one after the other, sequentially
      3. Create sprite sheet JS object, e.g. explodeAnim object in my post
      4. Create Kinetic.Sprite object, like explosionSprite. Hide the object initially
      5. When you detect collision, hide the moving jet image and make sprite object visible and call start method (of Kinetic.Sprite)
  5. sundar says:

    Great article. nice explanation. Wonderful designing.
    http://www.cavinitsolutions.com/

Leave a Reply