Angry Birds clone with EaselJS and Box2dWeb

Posted on by

Box2D is a lot of fun: you can build cool physics-based games with very little coding.  Popular games like Angry Birds were built with it.    If you haven’t yet seen the awesome Seb Lee-Delisle’s live coding example of building an Angry Bird clone in 45 minutes with the Corona SDK for iOS and Android, do it now!  You’ll be inspired to build your own Angry Birds clone, like I was.

So I set about copying Seb’s clone game, “Ghosts and Monsters”, except I wanted to do in Javascript, using the Box2dWeb JS port of Box2D.  However, there are not a lot of options in Javascript for integrating rendering with Box2D.  I did find two:

  • ImpactJS, a proprietary, closed-source Javascript game framework for building HTML5 games. While ImpactJS has become quite popular in gaming, the closed-source nature and game license turned me off
  • boxbox, which I haven’t tried yet. It is an open-source JS project with a simplified API that wraps both Box2D and rendering. It’s not clear whether it exposes you to the full methods and attributes of the Box2DWeb library.

Neither of these appealed to me.  I ended up rolling my own integration with EaselJS.   I chose EaselJS over Processing.js (which I’ve used in the past), because of its built-in functionality for mapping events (like clicking and dragging) to the shapes.   So, I rolled my own EaselJS-Box2dWeb wrapper, stole the “Ghosts and Monsters” artwork (thanks, Seb!), and got something quick and dirty working in relatively short time.

There are a couple of gotchas with integrating a graphics library and Box2Dweb.  For example:

  • Box2D co-ordinates are all expressed in meters, while EaselJS are expressed in pixels.  Have fun with all the conversions!
  • Box2D object co-ordinates represent the object’s center of mass, while EaselJS co-ordinates represent the upper-left most position of the object.   This is a bit of a nuisance, and don’t forget to set a EaselJS’s Bitmap’s regX and regY properties so the object rotates around its center.

Check out a working demo here, and grab the source code here on Github.

Oh, and yay for CoffeeScript!

23 thoughts on “Angry Birds clone with EaselJS and Box2dWeb”

  2. hi!
    this is so amazing..
    I’m working on something like that using box2dweb and easeljs.
    I was wondering could u plz help me, how can i move my canvas background so it will follow where ball is hitting like angrybird.

    Reply ↓

      • Boo-yahh.. You are awesome..
        It worked. I managed to integrate this in my project. I will post my project link when I will finish it.
        thnks a bunch. 🙂

  3. Boo-yahh.. You are awesome..
    It worked. I managed to integrate this in my project. I will post my project link when I will finish it.
    thnks a bunch. 🙂

    Reply ↓

  4. Hi! this is me again.
    im again stuck. could you plz help me how can i remove an easelObj from box2d world.
    I’ve used destroyBody() method to destroy a box2d obj, so box2d obj removed but easelobj still on the stage, no physics with it though. Thanks in advance.

    Reply ↓

    • Yes, you were close. You also need to call the “removeChild” method to remove it from the easel stage:

      @box2dWorld.DestroyBody(object.body) #for Box2d
      @easelStage.removeChild(object.easelObj) #for EaselJS

      I updated the EaselBox code so that EaselBoxWorld now has a “removeEntity” method that does this. You can use that, or else call the two lines above manually.

      Here’s a Gist with an example:


      # Example for how to remove an object:
      obj = @world.addEntity( type: 'dynamic',radiusPixels: 30) # first, create the object
      @world.removeEntity(obj) # now, remove it
      # What "removeEntity" does:
      removeEntity: (object) ->
      @box2dWorld.DestroyBody(object.body)
      @easelStage.removeChild(object.easelObj)

      view raw

      gistfile1.coffee

      hosted with ❤ by GitHub

      Reply ↓

  5. hi!
    could u plz tell me is it possible to remove an event frm easel. like i ve a button
    btn.onPress = showSome();

    now how can i remvoe onPress event from btn so it wont be clickable nomore. thanks in advance :

    Reply ↓

    • I think that would just be a Javascript question. You could try setting the function to null?, e.g.:

      btn.onPress = null;

      Reply ↓

  6. hi, im again.
    My qus might not related to easeljs but more related to angrybird.
    when we release birds it collide with dummies then when it becomes stable(which im guessing when obj turns red to grey in debug mode ) camera automatic pan for next shot.
    Is there any way to do this perfectly? after releasing the bird I used timer for another throw which is not good/ nice.
    So, in one word how can i know obj becomes stable after collision occurs

    Reply ↓

    • Hi Gruff, it was because the original source was all CoffeeScript, so I was using the Node module for parsing the CS. I just looked, and it appears I accidentally committed the compiled JS, which I hadn’t intended.

      Reply ↓

Leave a reply to jeffcole Cancel reply