Tag: KineticJS

Posted on

Sprite Animation Revisited


Last year I had blogged about animating sprite using Kinetic JS.
Code in that post was part of a simple game I had created. So the code specific for animating sprite was explained in snippets. A reader of that post contacted me with a request to provide a complete example. So I created a small demo of sprite animation only. If you are interested, you can download it from here. This demo animates images in the sprite sheet at a fixed location, it does not move the image. So I thought  it would be interesting to add motion to sprite images when they are animated.

First, take a look at the demo. Click on the Walk button to make the person walk. You can stop any time. If the person hits right side wall, then she falls, which is also simulated using sprite animation. I know the ‘walk’ does not look natural, but creating graphics is not my string point and this is the best I could manage.

Walking Speed : (Enter value from 1 to 10)

Continue reading “Sprite Animation Revisited”

Posted on

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

Continue reading “Sprite Animation in HTML5 Canvas with KineticJS”