Using animated bitmaps with EaselJS and Box2dWeb

Building on the EaselBox framework I’ve been cobbling together (see my last post about the Angry Birds clone), here is a demo using animated bitmaps.    I put a spinning Earth in a field of sparkling stars, and made their gravities draw them closer together.   With my EaselBox framework for integrating EaselJS for drawing on canvas with the Box2dWeb physics engine, it took almost no time at all.  Well, not counting all the time I spent googling for free, pretty artwork.

EaselJS / Box2d demo with animated bitmaps

Quick note: I was inspired at the last Boston HTML5 Game Development meetup with a presentation by Greg Smith.  He presented Boxbox, which is a Javascript wrapper for Box2d which is very similar to my EaselBox.  His API was much cleaner than mine originally was, and it inspired me to clean mine up–thanks, Greg!

Where I think EaselBox has an advantage over Boxbox is that I’m using the power of EaselJS for all the canvas rendering, with a display list and object model similar to what you might use in Flash.  It is written by Grant Skinner, who has a ton of Flash experience.   Boxbox is clean and simple, but it hasn’t yet replicated all the functionality that EaselJS already has.

Anyway, check out the demo, take a look, and let me know what you think.  I already have an idea for the next demo, involving binding callbacks to collision events.


9 thoughts on “Using animated bitmaps with EaselJS and Box2dWeb

  1. awesome!
    but i’ve got some problem. when i try to apply it for rectangle obj, then it shows full img not single frame. i mean ,
    type: ‘static’,
    widthPixels:20, heightPixels:20, /* doesnt work, in case of radiusPixels working fine */
    imgSrc: ‘img/mush.png’,
    frames: { width: 55, height: 48, regX: -27.5, regY: -24 },
    startFrame: 0

    and that animation is always looping, how can i play specific frame like we can do in easeljs

    var animation = new BitmapAnimation(new SpriteSheet({images: [‘img/man.png’], frames: {width:120,height:128,regX:60,regY:63},
    animations: {
    throw: [0, 4, false, 2],
    idle: [4, 4],
    normal: [0, 0]

    thanks in advance

    • I think I never got around to adding sprite animation to rectangles. It’s easy to do, I can knock it out today. In the meanwhile, if you want to hack it on your side, it’s as easy as copying these lines out of the EaselBoxCircle class and sticking them in the exact same place on EaselBoxRectangle:

      if options and options.frames
      data = {
      images: [options.imgSrc],
      frames: options.frames,
      bmpAnim = new BitmapAnimation(new SpriteSheet(data))
      object = bmpAnim.clone()
      object.gotoAndPlay(options.startFrame | 0);
      object = new Bitmap(options.imgSrc)

    • Ok, if you pull the latest source, there is support for animated bitmaps for rectangles. You can see a demo of it in the “Kitchen Sink” example.

  2. how can I change fixture of a object runtime. like ,
    var b2fix = Ball.obj.GetFixtureList();

    • never mind i found it. here is this if anyone need it.

      var b2fix = Ball.body.GetFixtureList();

  3. this is fantastic, really helpful!
    if i wanted to turn the magnetism on and off when you click on the planet, how would you suggest i do that? i’ve been struggling with it for hours. first i tried ‘naming’ object that is the planet and then toggling its properties. then i tried a un-gravity function. now i’m just confused. how would you approach it? please advise

    • One easy cheat you could do is to set the planet’s mass to zero. Then it will have no gravitational effect on any of the other bodies.

      You can see here in this line that the gravity between two objects is proportional to their mass, so if they have no mass, there is no attraction:

      # calculate force of gravity
      forceMagnitude = gravitationalConstant * obj1.body.GetMass() * obj2.body.GetMass() / distSq

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s