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) –

Image may be NSFW.
Clik here to view.

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