Sprite Animation

About Blog Projects
HTML Map Left Right Up Down Jump

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.

Sprite Animation

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.

Fig. 1.1

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.

Animating the sprite was a little more tricky. After a bit of searching, I managed to find this JavaScript library, which does all the hard work for you. It takes a bit of effort to size the image container up and configure the transition speed but once happy, you can create some impressive sprite animations with these two links.

//The CSS for the container with the sprite background
.man {
   left: -104;
   float: left;
   height: 50px;
   width: 32px;
   background-image: url(my_sprite_left.png);

//The JavaScript for animating the sprite right
function moveRight(){
      columns: 4,
      totalFrames: 4,
      duration: 200,
      loop: true,
      complete: function(){
         // this will be called when
         // there is no loop and the
         // animation finishes
         alert("animation End");

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.

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


ImpactJS is by far the best JavaScript game software I have seen, with a lot of support available on the web. Unfortunately, it isn't free, but for what you get I think $99 is very reasonable. I have yet to try it out for myself, but from what others are saying, this is the software for the serious game developer!

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!

Greetings, Our daily Scripture email delivery will be unavailable while we upgrade our system. We expect it to continue in the near future. We encourage you to continue to read Scripture every day, it is alive and powerful. Many devotions are available at aDevotion.org/archive as well as adevotion.blogspot.com; additional Bible teachings are available at believers.org.

ABibleverse.org pausing (God bless you!)