How to create sprite animation on a web page?
Well, there are definitely multiple ways of doing it.
How about being cool?
What do the cool dudes do nowadays?
They write in HTML5 with libraries like KineticJS.
Kinetic provides a quick and easy interface for showing animation.
But there is one problem. It reads all sprites from a single image. Figuring out sprite coordinates is way too boring.
I have a good news for you: I wrote a software to automate it!
Here is the software:
Windows Application for HTML5 Kinetic Sprite Animation Framing
Web Package – Kinetic Sprite Animation
Here are animation example I made with it (art is not mine, I borrowed it from Xenia’s school homework guidelines – perhaps, it came from some book):
How do you make yours?
- Draw sprites in a single image and store the image as png or jpg. Sorry, my application only supports up to 9 sprites. You are welcome to modify it.
- Start the application
- Push “Load Images” button and load your image. It shall be visible on a screen.
- With the left slider, set total number of your sprites.
- With the right slider, choose sprites one-by-one. With the left mouse button, drag blue rectangle to frame the first sprite. Use right mouse button + mouse move to resize the box. Sorry, I use same size for all frames. Rationale: I’m too lazy to resize each individual sprite.
- Repeat for all frames: select frame with the right slider and move blue rectangle to frame it.
- Push Save button to save the result
- Unpack “web package”, copy your image to folder walkcycle_4, then in that folder open walkcycle.htm and replace lines like x: 214.666666666667, y: 30.6666666666667, width: 138.666666666667, height: 144.666666666667 with the data you generated and saved.
- Change image file name at the end of walkcycle.htm with your image.
- Open walkcycle.htm in a browser. It might ask you whether you allow content to be executed. Allow it. Push “Start” button and enjoy.
Sadly, it does not work in Opera. But it works in Google Chrome, Mozilla and IE on my machine.