Working with Debug Mode in Starling with Box2D – AS3

I recently started work on a Box2D game project using Starling, and one of my concerns was getting the debug mode to display correctly.

Box2D is a very popular physics engine. It has a debug mode which draws shape outlines, defines center of mass and shows joint connectivity, all very useful while debugging shapes behavior in a physics world. Debug mode is also very useful during prototyping when artistic graphics are not ready. Box2D has its own API but still uses native Flash objects and events.

Starling on the other hand is a game framework developed on top of the Stage3D APIs which helps write fast GPU accelerated games without having to access the Stage3D APIs. The Starling API is very similar to native Flash AS3.

Once a Starling stage instance is created, all display objects subsequently become part of this core Starling instance.
Since Box2D uses native Flash Sprite, the best way to work with Starling is to add a native Flash sprite on top of the Starling stage instance. I’ve given a quick example of how this will work in the example below –

The PlayGame Class is where the Starling framework is initialized. Within the PlayGame class, the Box2D debug sprite instance is defined. The Box2D debug Sprite instance is a native Flash and not a Starling class.

The Box2D class

About Mariam Dholkawala 188 Articles
Part geeky part quirky, I love writing games, travelling the world, trying new food and learning new languages. I am sometimes the designer, programmer and artist for some of my own games.

4 Comments Posted

  1. Thanks a heap for this tip. I’m kind of bummed that I have to create assets if I want to see all-starling power, but this will definitely make dev faster for me

  2. Hey

    For some reason I keep getting an error on the line:
    private function debugDraw(debugSprite:flash.display.Sprite):void{

    It says sprite cannot be found =S
    Any ideas?


    • Jamie,

      Are you creating and adding the sprite to the flash display list in the main parent class?

      private function onContextCreated(e:Event):void{
      //debug mode
      debugSprite=new Sprite();

      Also make sure that the sprite is a static variable.

  3. Hi there, thanks for the tip. Btw we can just overlay the Box2D’s native flash debug sprite on top of Starling using..


1 Trackbacks & Pingbacks

  1. Working with Debug Mode in Starling with Box2D – AS3 | Mariam Dholkawala Mobile Blog | eaflash

Leave a Reply

Your email address will not be published.


%d bloggers like this: