{"id":763,"date":"2009-01-12T10:00:45","date_gmt":"2009-01-12T09:00:45","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=763"},"modified":"2010-05-08T19:04:09","modified_gmt":"2010-05-08T18:04:09","slug":"hello-box2d-part-2","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2009\/01\/12\/hello-box2d-part-2\/","title":{"rendered":"Hello box2D – part 2"},"content":{"rendered":"

In my previous post<\/a> I started with a “Hello world” for box2DFlash.
\nYou can find the original here: AS3: Hello Box2D<\/a>.<\/p>\n

When you get it working you will not be satisfied: a black swf, with only a trace in the output panel.<\/p>\n

Today I will make the “Hello world” more visible.<\/p>\n

Debug_Drawing<\/h3>\n

This the preferred method of drawing these physics entities for debugging, rather than accessing the data directly. The reason is that much of the necessary data is internal and subject to change. <\/p><\/blockquote>\n

source: Debug_Drawing<\/a><\/em><\/p>\n

Box2D has a debugDraw<\/code> class that lets you see what you have built, they call it DebugDraw<\/code>.
\nTake the code from yesterday<\/a> and place this code before Simulating_the_World<\/code> code.
\n[as]
\nvar debugDraw:b2DebugDraw = new b2DebugDraw();
\ndebugDraw.m_sprite = new Sprite();<\/p>\n

addChild(debugDraw.m_sprite);<\/p>\n

debugDraw.m_drawScale = 30;
\ndebugDraw.m_fillAlpha = .25;
\ndebugDraw.m_lineThickness = 1;
\ndebugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit ;
\nworld.SetDebugDraw (debugDraw);
\n[\/as]<\/p>\n

Thx Boy Wonder for pointing me to a little mistake in the part of the code: I forgot the last piece of code world.SetDebugDraw (debugDraw);<\/code>. The class at the bottom of the page was correct!<\/div>\n

So all you need to do is CTRL+ENTER.<\/p>\n

Nice effect isn’t it? Almost? Well at least you see something although it’s not impressive…
\nYeah, it’s isn’t much. Lets see how we can improve this.<\/p>\n

Improve Debug_Drawing<\/h3>\n

The problem is that the debug window is created and executed 60 times, but because it is done in a for loop, you only see the end result (after 60 updates).
\nTo see animation (if you follow the trace you see that something is moving) we need to update (visible) the data in dbgDraw<\/code> more and we will use the frame rate to update it (yesterday set to 60 frames).
\nBut for that there needs to be changed more than just a couple of lines<\/p>\n

First we need to add some variables:
\n[as]
\nprivate var world:b2World;
\nprivate var body:b2Body;
\n[\/as]
\nand change some related code:
\n[as]
\n\/\/ Construct a world object
\n\/\/ var world:b2World = new b2World(worldAABB, gravity, doSleep); \/\/ [mck]: old code
\nworld = new b2World(worldAABB, gravity, doSleep);
\n[\/as]
\nand
\n[as]
\n\/\/ var body:b2Body = world.CreateBody(bodyDef); \/\/ [mck]: old code
\nbody = world.CreateBody(bodyDef);
\n[\/as]<\/p>\n

and remove the code add at Simulating_the_World<\/code> with
\n[as]
\naddEventListener(Event.ENTER_FRAME, onUpdateHandler, false, 0, true);
\n[\/as]<\/p>\n

and add
\n[as]
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\/\/ http:\/\/www.box2d.org\/wiki\/index.php?title=Manual\/AS3#Simulating_the_World_.28of_Box2D.29
\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\npublic function onUpdateHandler(e:Event):void{<\/p>\n

\tvar timeStep:Number = 1.0 \/ 60.0;
\n\tvar iterations:Number = 10;<\/p>\n

\tworld.Step(timeStep, iterations);<\/p>\n

\tvar position:b2Vec2 = body.GetPosition();
\n\tvar angle:Number = body.GetAngle();
\n\ttrace(position.x +’,’+ position.y +’,’+ angle);
\n}
\n[\/as]<\/p>\n

End result<\/h3>\n

The document class (HelloWorld.as<\/code>) will look like this:<\/p>\n

[as]
\npackage {<\/p>\n

\timport flash.display.*;
\n\timport flash.events.*;
\n\t\/\/ Box2D Classes used in this "Hello world"
\n\timport Box2D.Dynamics.*;
\n\timport Box2D.Collision.*;
\n\timport Box2D.Collision.Shapes.*;
\n\timport Box2D.Common.Math.*;<\/p>\n

\t\/\/ [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
\n\tpublic class HelloWorld3 extends Sprite {<\/p>\n

\t\tprivate var body:b2Body;
\n\t\tprivate var world:b2World;<\/p>\n

\t\t\/\/ constructor
\n\t\tpublic function HelloWorld() {
\n\t\t\ttrace( "HelloWorld.HelloWorld" );<\/p>\n

\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\t\/\/ http:\/\/www.box2d.org\/wiki\/index.php?title=Manual\/AS3#Creating_a_World
\n\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\t\/\/ Create world AABB
\n\t\t\tvar worldAABB:b2AABB = new b2AABB();
\n\t\t\tworldAABB.lowerBound.Set(-100.0, -100.0);
\n\t\t\tworldAABB.upperBound.Set(100.0, 100.0);<\/p>\n

\t\t\t\/\/ Define the gravity vector
\n\t\t\tvar gravity:b2Vec2 = new b2Vec2 (0.0, -10.0); <\/p>\n

\t\t\t\/\/ Allow bodies to sleep
\n\t\t\tvar doSleep:Boolean = true;<\/p>\n

\t\t\t\/\/ Construct a world object
\n\t\t\t\/\/ var world:b2World = new b2World(worldAABB, gravity, doSleep); \/\/ [mck]: old code
\n\t\t\tworld = new b2World(worldAABB, gravity, doSleep);<\/p>\n

\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\t\/\/ http:\/\/www.box2d.org\/wiki\/index.php?title=Manual\/AS3#Creating_a_Ground_Box
\n\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\tvar groundBodyDef:b2BodyDef = new b2BodyDef();
\n\t\t\tgroundBodyDef.position.Set(0.0, -10.0);<\/p>\n

\t\t\tvar groundBody:b2Body = world.CreateBody(groundBodyDef);<\/p>\n

\t\t\tvar groundShapeDef:b2PolygonDef = new b2PolygonDef();
\n\t\t\tgroundShapeDef.SetAsBox(50.0, 10.0);<\/p>\n

\t\t\tgroundBody.CreateShape(groundShapeDef);<\/p>\n

\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\t\/\/ http:\/\/www.box2d.org\/wiki\/index.php?title=Manual\/AS3#Creating_a_Dynamic_Body
\n\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\tvar bodyDef:b2BodyDef = new b2BodyDef();
\n\t\t\tbodyDef.position.Set(0.0, 4.0);
\n\t\t\t\/\/ var body:b2Body = world.CreateBody(bodyDef); \/\/ [mck]: old code
\n\t\t\tbody = world.CreateBody(bodyDef);<\/p>\n

\t\t\tvar shapeDef:b2PolygonDef = new b2PolygonDef();
\n\t\t\tshapeDef.SetAsBox(1.0, 1.0);
\n\t\t\tshapeDef.density = 1.0;
\n\t\t\tshapeDef.friction = 0.3;
\n\t\t\tbody.CreateShape(shapeDef);
\n\t\t\tbody.SetMassFromShapes();<\/p>\n

\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\t\/\/ http:\/\/www.box2d.org\/wiki\/index.php?title=Manual\/AS3#Debug_Drawing
\n\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\tvar debugDraw:b2DebugDraw = new b2DebugDraw();
\n\t\t\tdebugDraw.m_sprite = new Sprite();<\/p>\n

\t\t\taddChild(debugDraw.m_sprite);<\/p>\n

\t\t\tdebugDraw.m_drawScale = 30;
\n\t\t\tdebugDraw.m_fillAlpha = .25;
\n\t\t\tdebugDraw.m_lineThickness = 1;
\n\t\t\tdebugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit ;
\n\t\t\tworld.SetDebugDraw (debugDraw);<\/p>\n

\t\t\t\/\/
\n\t\t\taddEventListener(Event.ENTER_FRAME, onUpdateHandler, false, 0, true);
\n\t\t}<\/p>\n

\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\/\/ http:\/\/www.box2d.org\/wiki\/index.php?title=Manual\/AS3#Simulating_the_World_.28of_Box2D.29
\n\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\tpublic function onUpdateHandler(e:Event):void{<\/p>\n

\t\t\tvar timeStep:Number = 1.0 \/ 60.0;
\n\t\t\tvar iterations:Number = 10;<\/p>\n

\t\t\tworld.Step(timeStep, iterations);<\/p>\n

\t\t\tvar position:b2Vec2 = body.GetPosition();
\n\t\t\tvar angle:Number = body.GetAngle();
\n\t\t\ttrace(position.x +’,’+ position.y +’,’+ angle);
\n\t\t}<\/p>\n

\t} \/\/ end class<\/p>\n

} \/\/ end package
\n[\/as]<\/p>\n

So all you need to do is CTRL+ENTER.<\/p>\n

Now we see something moving, and we have an endless stream of trace data.<\/p>\n

It’s better, but there is more room for improvement…
\ntomorrow more. <\/p>\n","protected":false},"excerpt":{"rendered":"

In my previous post I started with a “Hello world” for box2DFlash. You can find the original here: AS3: Hello Box2D. When you get it working you will not be satisfied: a black swf, with only a trace in the output panel. Today I will make the “Hello world” more visible. Debug_Drawing This the preferred […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,3],"tags":[408,230,231,398,159],"class_list":["post-763","post","type-post","status-publish","format-standard","hentry","category-as3","category-flash","tag-as3","tag-box2d","tag-box2dflash","tag-flash","tag-flashdevelop"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t