Sprite AnimationAbout Blog Projects
It wasn't very long ago that virtually all games on the web involved installing Flash or some other heavey-duty software package, but now, with the help of HTML5 it couldn't be easier. There are many different ways of creating a basic game using JQuery and a few web tools, it all depends on what you want to achieve.
GameQuery is probably the best choice if all you want to do is create a basic arcade game such as asteroids or copter. This tutorial is a great place to start. It explains how to create a space shooter game with sprite animation and GameQuery frames. GameQuery is free and as far as I am aware, fairly lightweight. It is a popular choice for the first time game developer.
The sprite at the top of this page was created using this link. You can create a range of characters, with different styles and clothing and is completely free! Simply decide on the sprite you want and once you are happy, download the .png image.
To run the demo, simply click the "Resume" link to set him off and either use the buttons provided to move and jump (middle square), or the keyboard (W,A,S,D,Space) if you prefer. Using the keyboard is a little more realistic, since you only move when pressing the keys.
I split the sprite into four sections (up, down, left, right) and changed the background image of the container according to the function called. The example above shows how I animated the sprite right, using the image in fig. 1.2.
Moving the Sprite
I didn't add any movement to my sprite animation (other than the transitions and jumping capability), because this is only a demo and it isn't really very practical to make a game this way. There are much better ways to do this, especially if you want to piece together a game, which will be more robust and less time-consuming. However, I did find a great JQuery example here, which moves a square around (as well as an impressive animated "Sonic" sprite).
The book suggested looks really interesting and I may give it a read. If anyone has an alternative to ImpactJS, or wants to know more about my sprite animation, feel free to leave a comment!