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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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); } } } |
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
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
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.
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)