Retro Style Platform Runner Game for mobile with EaselJS (Part 5) – Animations and polishing

In this 5th and for the moment last part of my series on creating an html5-canvas-game I’m going to write about adding animations and other elements to polish up the game a little bit.

The result:

Background Parallax

So we’re going to start off with the background – at the moment it’s looking kinda pale and you cannot really see any movement. A background can contain pretty much anything that doesn’t distract the player from the game but is also not too boring. In this example I will just create a simple grid. Add the following to the jumpy.js:

And when the game is initialized, don’t forget to add the grid to the stage:

To emphasize movement we will make the background move with about 50% of the world-movement creating a parallax-effect. We accomplish that by adding the following to the ‘self.tick’-method:

Note: This is pretty much the most simple way to make a background move seamlessly as the world moves, however if you have a more complex background you will probably have to use either a greater modulo(%) or handle you background-movement individually.

The changes above should already result in something similar to this:

Pretty simple – right? ;)

More Background Parallax

To add more motion to the scene we will create just a couple white lines in the background, that are supposed to symbolize distant waterfalls. To create such a waterfall-line, we add the following method to the jumpy.js:

And when we initialize the game, we will just create 4(or how many we want) of those lines:

And now we will make those lines move, just we like we made the grid move (it’s a little more complex this time, but the basic idea behind it, is the same):

And voila – now we got a pretty decent looking parallax-background already, of course with this way, it’s pretty simple to use just any graphic instead of white line, just add some vertcal-movement as well, and it should be good to go. The current result after adding all parallax elements looks like this:


Now we will bring some more life into the scene by adding some animations, starting with some waterfalls. The key to animations in EaselJS is pretty much the same like most other engines and platforms: SpriteSheets. A SpriteSheet is a graphic that contains all frames of the animation as stills. This is how the SpriteSheets of the waterfall, we are going to use, looks, it contains 3 frames:

The basic way for creating a SpriteSheet-Animation in EaselJS looks like this:

CAUTION: EaselJS version 0.4.2 does NOT support Canvas-Elements in SpriteSheets, however our scaling-algorithm creates a Canvas-Element, meaning that we have to UPDATE our version of EaselJS – you can download the “NEXT-Version” on – However, be aware, that this version uses namespacing, the simplest fix to get our game running with the “NEXT-Version” is to add the following into our index.html BEFORE loading EaselJS:

Note: The SpriteSheet-Data CAN also be stored and loaded from a JSON – but in this case the SpriteSheet-Data contans dynamic values, like the size and the image, that’s why I prefer to just initialize the whole thing within a JS method. For a more detailed view on all the possible attributes of a SpriteSheet, please refer to:

As my next step I created a new layer in the front to add the waterfalls to and added a method that would add a waterfall to every platform with a probability of 35%. Since this is just placing and moving objects, I’m not going into detail about what lines of code I added where – for details please download and view the sourcecode.

As a final step I then added a fly to fly around our hero, it’s based on a simple 2-frame animation, and its movement is the following:

And as allways: Download the source.