Animate a Video Game Character

by Mark Lassoff

If you prefer you may access all the code for this tutorial in my GitHub repository.

We’re going to animate a video game character within a web browser. This can be accomplished fairly easily with the proper graphical assets and the CreateJS library. In this tutorial we’ll create a simple animation that will move against a graphic background.

Graphical Assets

To keep it simple, we’re going to use only to graphical assets for this tutorial. We’ll use a background image and a sprite sheet. The background graphic is a simple .png graphic. The sprite sheet displays the five different states of the animation:

Note that each state of the animation must have the same height and width. Now we’re ready to start our code. For this example I have put all the code in a single file.

At this early stage there are just two items of note. First you’ll notice that the CreateJS library is attached. You can (if you prefer) download the library and attach a local file, which would allow your animation program to be accessed offline. You will also note that in the body of the document we’ve added a canvas element with a static width and height.

We’ll begin the script section of the document with a number of globals that will be used as references for our objects and to track the state of the animation as it executes.

You’ll encounter all of these global variables in context later in the script, so let’s move on to the initialization sequence

The first part of initialization gets the reference to the HTML canvas element, sets the context and then initializes the CreateJS “stage” abstraction. If you’ve worked in Actionscript or Flash, you probably recognize the stage and will find the CreateJS implementation to be similar. The rest of the init sequence utilizes the CreateJS asset queue to prepare the assets that will be part of the animation– in this case the background image and the spritesheet. The asset queue is very convenient if you are loading a large number of assets. Each asset is assigned a convenient global ID.

queueLoaded() is the call-back function that executes once the asset queue is downloaded and available. In this function we’re preparing the stage, the animation and setting up various timers for the animation.

The key here is where we setup the spritesheet. Note that we create the createJS.SpriteSheet object by providing the image(s) to be included in the animation, the height and width of the frames, and the array of cells that contain the animation. In the last lines of the method we set the speed of the animation and start any timers we’re going to use. The animation will not play unless you at least set up the stage Ticker.

createEnemy() adds the animation to the stage, sets a registration point and, finally, positions the animation within the stage.

Finally, when the timer ticks we move the animation along the X and Y axis, insuring that the animation remains within the stage boundaries. Note that the speed of the animation is controlled by two globals: xSpeed and ySpeed.

And finally, for your convenience, the full code listing:


1 Trackback / Pingback

  1. Create 8-Bit Pixel Art with Photoshop (Tutorial part 3 with Images)Learn to Program

Leave a Reply

Your email address will not be published.