{"id":749,"date":"2009-01-11T02:26:33","date_gmt":"2009-01-11T01:26:33","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=749"},"modified":"2009-02-14T14:40:43","modified_gmt":"2009-02-14T13:40:43","slug":"hello-box2d-part-1","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2009\/01\/11\/hello-box2d-part-1\/","title":{"rendered":"Hello box2D – part 1"},"content":{"rendered":"

In programming the Hello world<\/a> is probably the first you will ever make in a new language.
\nIn the box2D wiki you can find a “Hello world” in box2DFlash style: AS3: Hello Box2D<\/a>.<\/p>\n

Easy as it should be … or is it?
\nThis is not the “Hello world” I expected, so I’ll post one that helps you more on your way.<\/p>\n

As irongleet<\/a> mentions in the comments, this is not really a tutorial. There is already a tutorial on the page I mention above AS3: Hello Box2D<\/a>. It’s not a bad tutorial, but you need to have some knowledge of AS3 to follow it and<\/strong> I personally don’t like the end result. So this is the first part of a series which will help you make more out of the previously mentioned tutorial. But I’m not going to copy past the tutorial written somewhere else and present it here. That’s why you should read the links to the source for more information. And the next Hello box2d – part 2<\/strong><\/a> will have some more input from me.<\/div>\n

Hello_Box2D<\/h3>\n

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

Lets start with a Flash document width 640px, height 480px, backgroundColor=”#000000″ and a framerate 60.
\nAnd add a document class: HelloWorld<\/code>.
\nSave this .fla (for example HelloWorldBox2d.fla<\/code>).<\/p>\n

Now get your favorite code-editor (I suggest FlashDevelop<\/a>) and create that document class, name it HelloWorld.as<\/code>:
\n[as]
\npackage {<\/p>\n

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

\tpublic class HelloWorld extends Sprite{<\/p>\n

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

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

} \/\/ end package
\n[\/as]
\nand save it next to the HelloWorldBox2d.fla<\/code>.<\/p>\n

You can see that I already add the import needed for Box2D.<\/p>\n

The last thing you need to do is download the box2D classes: http:\/\/sourceforge.net\/projects\/box2dflash<\/a>
\nExtract the zip file and copy the folder box2d<\/code> next to the HelloWorldBox2d.fla<\/code> and the HelloWorld.as<\/code><\/p>\n

And now you are set…<\/p>\n

Creating_a_World<\/h3>\n

Every Box2D program begins with the creation of a world object. This is the physics hub that manages memory, objects, and simulation. <\/p><\/blockquote>\n

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

The next piece of code can be placed in the constructor (public function HelloWorld() )
\n[as]
\n\/\/ Creat world AABB
\nvar worldAABB:b2AABB = new b2AABB();
\nworldAABB.lowerBound.Set(-100.0, -100.0);
\nworldAABB.upperBound.Set(100.0, 100.0);<\/p>\n

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

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

\/\/ Construct a world object
\nvar world:b2World = new b2World(worldAABB, gravity, doSleep);
\n[\/as]<\/p>\n

Creating_a_Ground_Box<\/h3>\n

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

[as]
\nvar groundBodyDef:b2BodyDef = new b2BodyDef();
\ngroundBodyDef.position.Set(0.0, -10.0);<\/p>\n

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

var groundShapeDef:b2PolygonDef = new b2PolygonDef();
\ngroundShapeDef.SetAsBox(50.0, 10.0);<\/p>\n

groundBody.CreateShape(groundShapeDef);
\n[\/as]<\/p>\n

Creating_a_Dynamic_Body<\/h3>\n

We can use the same technique to create a dynamic body. The main difference, besides dimensions, is that we must establish the dynamic body’s mass properties. <\/p><\/blockquote>\n

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

[as]
\nvar bodyDef:b2BodyDef = new b2BodyDef();
\nbodyDef.position.Set(0.0, 4.0);
\nvar body:b2Body = world.CreateBody(bodyDef);<\/p>\n

var shapeDef:b2PolygonDef = new b2PolygonDef();
\nshapeDef.SetAsBox(1.0, 1.0);
\nshapeDef.density = 1.0;
\nshapeDef.friction = 0.3;
\nbody.CreateShape(shapeDef);
\nbody.SetMassFromShapes();
\n[\/as]<\/p>\n

Simulating_the_World<\/h3>\n

So we have initialized the ground box and a dynamic box. Now we are ready to set Newton loose to do his thing. We just have a couple more issues to consider. <\/p><\/blockquote>\n

source: Simulating_the_World<\/a><\/em>
\n[as]
\nvar timeStep:Number \t= 1.0 \/ 60.0;
\nvar iterations:Number \t= 10;<\/p>\n

for (var i:Number = 0; i < 60; ++i) {\n\tworld.Step(timeStep, iterations);\n\tvar position:b2Vec2 = body.GetPosition();\n\tvar angle:Number = body.GetAngle();\n\ttrace(position.x +','+ position.y +','+ angle);\n}\n[\/as]\n\n\n\n\n

End result<\/h3>\n

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

I didn’t wrote the code for this tutorial, so this is collection of code copy\/paste from the original AS3: Hello Box2D<\/a> tutorial. But I did, as many probably did, the original tutorial and I was a little disappointed at the end result… so my addition to the original tutorial can be read in the next part of this series (Hello box2d – part 2<\/strong><\/a>) <\/div>\n

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

\timport flash.display.Sprite;
\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

\tpublic class HelloWorld2 extends Sprite {<\/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\tvar world:b2World = 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\tvar body:b2Body = 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#Simulating_the_World_.28of_Box2D.29
\n\t\t\t\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
\n\t\t\tvar timeStep:Number \t= 1.0 \/ 60.0;
\n\t\t\tvar iterations:Number \t= 10;<\/p>\n

\t\t\tfor (var i:Number = 0; i < 60; ++i) {\n\t\t\t\tworld.Step(timeStep, iterations);\n\t\t\t\tvar position:b2Vec2 = body.GetPosition();\n\t\t\t\tvar angle:Number = body.GetAngle();\n\t\t\t\ttrace(position.x +','+ position.y +','+ angle);\n\t\t\t}\n\t\t}\n\t\t\n\t} \/\/ end class\n\n} \/\/ end package\n[\/as]\n\nSo all you need to do is CTRL+ENTER.\n\nNice effect isn't it? No? Only some numbers in the output panel?\nYeah I know that was not very useful...\n\nSo next post will be a better\/improved version of the Hello world box2D style<\/strong> >> read Hello box2d – part 2<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In programming the Hello world is probably the first you will ever make in a new language. In the box2D wiki you can find a “Hello world” in box2DFlash style: AS3: Hello Box2D. Easy as it should be … or is it? This is not the “Hello world” I expected, so I’ll post one that […]<\/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-749","post","type-post","status-publish","format-standard","hentry","category-as3","category-flash","tag-as3","tag-box2d","tag-box2dflash","tag-flash","tag-flashdevelop"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/comments?post=749"}],"version-history":[{"count":10,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/749\/revisions"}],"predecessor-version":[{"id":764,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/749\/revisions\/764"}],"wp:attachment":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media?parent=749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/categories?post=749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/tags?post=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}