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

This is Part 2 of my tutorial on How to create a Runner Game for mobile with EaselJS – in this part i’m going to cover the collision-detection between two objects in EaselJS.

Types of Collision Detection

There are several types of collision detection methods, I’m going to explain two of the most commong ways to detect a collision – if you want more/detailed information on the subject I would encourage you to google for it or try this article as an introduction to the topic.

1) Distance Based- or Circle-Collision

This is probably the simplest type of collision detection. What you basically have to do is to set a collision-radius for each object, then calculate the distance between the objects and see if the distrance is lower than the radii combined. However the following image shows, that this kind of detection won’t be suitable for our platform game:

As you can see, with this method, a collision is detected way before an actual collision occures. This is due to the fact, that the platform has a very different hight and width. However a circle-collision-detection would be perfect for any Pool-game for example.

2) Bounding-Box-Collision

This type of  detection is (is many cases, not all) more accurate than the circle-based detection and it basically works by defining a rectangle of the boundaries for each object and then check if those two rectangles intersect in any way.

There are two(or probably more, but i’m only going to point out two of them) ways to collect a collision this way.

The first method is actually not checking for a collision, but for non-collisions. This simply requires four if clauses:

  • a) is the space between rect1.left and rect2.right ?
  • b) is there space between rect1.right and rect2.left ?
  • c) is there space between and rect2.bottom ?
  • d) is there space between rect1.bottom and ?

If any (1 or more) of the statements above are true, then there is no intersection between the rectangles, however if all of the statements are false, there must be an intersection.

And here is the according piece of code:

Even though this method looks super-simple – we are unfortunately NOT going to use this method. Instead we will use a method that checks for an intersection AND returns the size of the intersecting area.

To explain this a little better i drew up a graphic for this:

So what we are going to do, is calculate the X- and the Y-overlapping value, if both values are greater than 0, there is an intersecting area.

=> if  dx < 0 and d< 0 then there is a collision, in this case we can return -dx and -dy as overlapping values

And the method in JS looks like this – I also added two parameters x and y, to calculate where the rect1 wants to move to:

This is also the method we are going to use in the game. There are plenty of other methods that are probably more accurate(a mix of Circle/BoundBox-collision, Pixel-perfect collision ect.), but usually take longer for their calculation. And for the sake of keeping everything simple our current method will do a pretty good job and you won’t really notice any flaws of the collisions in the game. I could spend a lot more time on figuring out a pixel-perfect collision algorithm ect., just to get rid of the last “free spaces” – however it won’t look that much more realistic to be worth the effort. This is actually a good tipp for new game-developers:

Go with simple!:
In 90% of the cases a simple version works just (almost) as good as a ‘perfect’ version, that would have taken much much longer to develop. The same with making a method as universial as possible because you say “I might need it later for something else” – there’s a very good chance, that you will not need it- and if you do: Do it when you need it, you won’t loose any time.

So now we’ve got our collision-method – how do we use it in the game?


Before we can acutally use the detection-method in the game, we need the bounding rectangle of our EaselJS DisplayObject – however since EaselJS is not providing such a function(yet?), we will use the method from here and put it into our utils.js(included in the zip-file from Part 1) as well as the “calculateIntersection()” method.

We then will update the tick-method of our Hero-class with the following:

now we have to add a platform for the hero to collide with, I therefor create a method called “addPlatform”, that should mostly explain itself:

also I did update the javascript-file holding the main methods and the game loop ect. quite a bit(to make the post not too big, I left out a few parts – download the ZIP-file to get the full source):

When you try this out – it should look similar to this:

Some of you might noticed that, the hero is also able to jump twice now: I removed the reset()-method from Hero.js and replaced it with a similar jump()-method:

And that’s pretty much all there is to get a basic collision detection working – Again: There are PLENTY of other methods, some of them maybe better in performance and/or accuracy, however I find this approach to be both fairly simple, effective and easy to follow – but suggestions for different approaches are allways welcome, just leave a comment! ;)

The sources for this part can be found right here: Download