Customize Box2D debug draw and make it run even on Starling mobile apps

One Box2D feature which is really underestimated is the debug draw. When I started blogging about Box2D I wrote a post about debug draw, but recently when I tried to render debug draw in Starling – which shouldn’t be possible since Starling does not use flash.display.Sprite class – I googled a bit for it and found some workarounds that really scared me.

So, at first, here is how you can override the classic debug draw routine.

The example is taken from the post “creation of a Box2D hook like the one seen on iOS Mikey Hooks game” with highlighted lines to add.

Basically we create a custom debug class and override the orignal one:

And this is CustomDebug class:

The result I wanted to give is some kind of psychedelic effect just to show you something, anyway you got the point:

You should know how to play: click and hold your mouse over a static body to create a hook and rewind it, release mouse button to destroy the hook. Try to swing like a tarzan geek.

And this is a video taken directly from my iPhone, how you can see it works, although it’s dropping a bit my frame rate, but since it’s just a debug, it does not matter:

And… yes, I am making a game out of it. Hoping not to get sued by Spiderman…

  • kanontang

    When the isHooked is false

  • mmook

    Hi There – sorry, I’m a bit confused (and a newbie!). I can get the debug draw to work in Flash, but not in starling. I am not seeing anything. I can trace out x and y value so know stuff exists. The example Main class you show is for flash display list, not starling. How would I implement this for Starling? Thanks!

  • Heheheh, use this debugDraw function to work in Starling
    Don’t forget type world.SetDebugDraw(customDebug); in the update function

    private function debugDraw():void {
    var worldDebugDraw:b2DebugDraw=new b2DebugDraw();
    var debugSprite:flash.display.Sprite = new flash.display.Sprite();
    Starling.current.nativeOverlay.addChild(debugSprite);
    worldDebugDraw.SetSprite(debugSprite);
    worldDebugDraw.SetDrawScale(worldScale);
    worldDebugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);
    worldDebugDraw.SetFillAlpha(0.99);
    world.SetDebugDraw(worldDebugDraw);
    trace(“debugDraw”);
    }

  • **** Don’t forget type world.DrawDebugData();; in the update function