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.

package{

    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;

    import starling.core.Starling;

    public class PlayGame extends Sprite{

        private var myStarling:Starling;
        public static var debugSprite:Sprite;

        public function PlayGame(){
            super();

            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            Starling.multitouchEnabled = true;
            myStarling = new Starling(MainGame, stage);
            myStarling.antiAliasing = 1;
            myStarling.start();

            stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onContextCreated);
        }

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

The Box2D class

package{
    import starling.display.Sprite;
    import starling.events.Event;

    import Box2D.Dynamics.b2DebugDraw;
    import Box2D.Common.Math.b2Vec2;
    import Box2D.Dynamics.b2World;

    public class BoxWorld extends Sprite{
        private var world:b2World;
        private var worldScale:int = 30;

        public function BoxWorld() {
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }

        private function onAddedToStage (e:Event):void {

             this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
             //create Box2d world
             world = new b2World(new b2Vec2(0, 10), false);

             //set debug mode
            debugDraw(PlayGame.debugSprite);
        }

        private function debugDraw(debugSprite:flash.display.Sprite):void{
            var debugDraw:b2DebugDraw = new b2DebugDraw();
            debugDraw.SetSprite(debugSprite);
            debugDraw.SetDrawScale(worldScale);
            debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
            debugDraw.SetFillAlpha(0.5);
            world.SetDebugDraw(debugDraw);
        }
    }
}

About the Author

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.

Related Posts

Discussion 5 Comments

  1. [...] on mariamdholkawala.com Share this:TwitterFacebookLike this:LikeBe the first to like [...]

  2. Tom says:

    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

  3. Jamie says:

    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

    • Mariam Dholkawala says:

      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();
      addChild(debugSprite);
      }

      Also make sure that the sprite is a static variable.

  4. Gayan says:

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

    Starling.current.nativeOverlay.addChild(shape)

Leave a Reply


Adobe Community Champions
Nokia Developer Champion
My Nokia Developer Blog
My Nokia Developer Personal Introduction Page
View Mariam Dholkawala's profile on LinkedIn

Add me to Skype
%d bloggers like this: