Retro Style Platform Runner Game for mobile with EaselJS (Part 1)

Editors Note: The tutorial is a little bit outdated now, but it still works. However if you would like to learn more on this topic and get a more detailed verison plus all the extras and resources, you should check out my ebook: From Zero to the Appstore – Blueprints for an HTML5 Game.

Here I’m starting a series of 4 articles on how to create a small game with EaselJS that “can” run on your mobile device (unfortunately it won’t run on all mobile devices) – however I also plan on a future posting on how to use technologies like cocoonJS to create a WELL-PERFORMING native app from this.

The FINAL result

The result is going to look similar to this (but with better code!) – In case you take a look at the source-code: This is NOT a good example on how to code cleanly – I did this as a quick mashup to try out a few things. – You can also do another jump, while in the air:

To test this on your mobile device, point your mobile browser to:

The result of Part 1&Part 2

Let’s get started with the basics – Setting up the Stage

Working with EaselJS is pretty simple, especially when you worked with ActionScript3 before, as a lot of the methods and classes are based on ActionScript3-equivalents. So basically the first thing you have to do in order to see a result, is to create a canvas-element and set up the “Stage” here is how this can be done:

However, if you tried this out, it wouldn’t bring you that much of a result, because in order to actually see something the Stage has to be ‘updated’ (stage.update();) by EaselJS, also this is something, that has to be done every frame – so to do that, we can setup an event, that will update the Stage every frame.

Great! Now we have a stage, that is updated with 30 frames/second.

More basics – Adding something to the stage

Now that we’ve setup the Stage, we can obviously still see nothing, because there is no object/image there to display.

The basic flow of doing this is to: 1) Preload an Image then 2) Create an DisplayObject with that image and finally 3) add this DisplayObject to the Stage(or another Container)

Some might ask here, why I’m not introducing PreloadJS to preload all the assets (or in this case: one asset) – well PreloadJS is a very nice way to do so – and I also recommend using it for some projects, but I tried running the app with the cocoonJS-launcher and receiveed a big load of Errors from cocoon(due to cocoon’s limited JS-parsing). Now this is NOT the fault of PreloadJS, however since preloading assets is nothing super-complicated, that requires super-extensive knowlege(basically one function), I chose to use an own 5-line implementation to achieve this.

Great! – So how do I make a game from this?

Well, a typical game usually needs the following things:

User Input

To listen to userinput-events we first have to distinguish if the device is a touch-device or has a regular screen and add the according event listeners.

This is pretty straight forward and should widely explain itself.


To create movement, the simples thing to do is e.g. to alter the position of an object a little bit every frame, just like this:

However in order to get the whole thing not too messy, once there are more objects involved in the scene, we should setup an own class for each object, or at least each object that is moving, as an example I put together the following:

With the Hero-class implemented, we can now create a hero object and apply some interaction, all together it would look like this:

here’s how it should look like(depending on the background-color, that you chose for your html-body):

Of course this is very basic, and the movement is absolutely not realistic, since there is no acceleration in the movement, but we can fix this by adding a velocity-object to the hero, just add the following:

and this is how it should look like by now:

Awesome, now we have a basic “game”, with a character falling down, that will be reset on any user-input. The next parts are going to cover collisions and animations.

You can download the source-files here: download



  • yasin

    nice, good job! keep on going ;)

  • adude

    man, pretty cool tutorial!
    really looking forward for the next ones!!

  • Ludei

    Olaf, nice tutorial. If you ever need first hand help regarding CocoonJS, please don’t hesitate to contact us at or in by submitting this form:

    We would be glad to help!

    • olsn

      thanks! – absolutely will do that :)

  • Ludei

    Also,we are improving the script injection support, we are confident that frameworks like PreloadJS will be supported in CocoonJS in the near future. Right now we have document.createElement(“script”) support but the scripts must be added to the document body using document.body.appendChild.

  • Pingback: Retro Style Plattform Runner Game for mobile with EaselJS (Part 2) | indiegamr

  • Pingback: Retro Style Platform Runner Game for mobile with EaselJS (Part 3) – adding movement & more collision | indiegamr

  • Pingback: Retro Style Platform Runner Game for mobile with EaselJS (Part 4) – adjusting to mobile displays | indiegamr

  • Madhu Rakhal Magar

    Simply Great,

    I love the game a lot and the techniques that you use.

  • Pingback: Retro Style Platform Runner Game for mobile with EaselJS (Part 5) – Animations and polishing | indiegamr

  • Lars

    Thanks for this helpful tutorial.

    I’m looking now at keyboard input. It looks like you used DOM event handling — does EaselJS not provide help for keyboard events, like it does for mouse events?

    • olsn

      Actually I don’t know about that – but good point!
      The main-goal for this was to run it also on a mobile device in which case keyboard&mouse are irrelevant ;-)
      But I will look it up and update the article. Thank you.

  • Pingback: Generate Repeatable Random Numbers (in JS) | indiegamr

  • Benny Neugebauer

    Nice tutorial. Thank you very much!

  • Jake

    I wonder, where you able to handle EaselJs’s onPress events inside CocoonJS?

  • Jake

    For some reason, neither is working for me at the canvas or DisplayObject level.
    I’m using EaselJs 0.6.0 with the latest version of CocoonJS (downloaded today).

    document.addEventListener(‘touchstart’,..) works, but the same call fails when performed on a canvas or a DisplayObject instance.

    I tried also “click” instead of “touchstart”.

    Do you have any suggestion what might cause it?

  • Jake

    Well, after setting createjs.Touch.enable(stage), touchstart fires when registered on canvas level, still not on an individual DisplayObject though.

    • olsn

      Hi Jake,

      yes I did not test this this on individual DisplayObjects, just on the Stage and I assumed that it would work on everything, but you are right, as it turns out this was not working. I tracked down the issue that was causing this problem and wrote a little quick fix for that, I’ll post it shortly.


    • olsn
  • Pingback: The Big List of HTML5 Game Tutorials | Game Venture

  • HTML5

    I wonder, where you able to handle EaselJs’s onPress events inside CocoonJS?

  • Pingback: Spiele-Entwicklung mit dem Canvas-Element | queoflow Blog

  • Herzuull

    Hello !
    Your tutorial is just awesome ! Thanks to it, I can bring back an old shmup project I have.
    It’s a vertical shmup, almost danmaku one (I’ll take a look at performance issues with the lot of bullets / ennemies / bloodsplat … ).
    I have tried to do the logic behind easelJS but, by my-self and be a non mathematic guy, it’s just a lose of time.

    I’m looking for a path system (like in gamemaker : ennemies follow a path made of points) if you have some ideas :)

    Thanks again !
    PS : here an old screen of the GameMaker version ;)