{"id":995,"date":"2010-10-27T09:36:55","date_gmt":"2010-10-27T14:36:55","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=995"},"modified":"2015-07-31T18:25:51","modified_gmt":"2015-07-31T23:25:51","slug":"box2d-flash-2-1-hello-world-falling-boxes","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2010\/10\/27\/box2d-flash-2-1-hello-world-falling-boxes\/","title":{"rendered":"Box2D 2.1 Flash Hello World Falling Boxes"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"http:\/\/lh3.ggpht.com\/_e5pwU0LJbN8\/TMgyuqnot4I\/AAAAAAAAFvA\/H7g7BE0SZgs\/s400\/Box2DHelloWorldFallingBoxes01_10-27-2010%2010-07-34%20AM.png\" alt=\"\" width=\"400\" height=\"291\" \/>I decided it was time to try out <a href=\"http:\/\/www.box2dflash.org\/\" target=\"_blank\">Box2DFlash, a free 2D physics engine for Flash<\/a> that works in both Flash and Flex Builder 4.<\/p>\n<p>I found most examples were for version 2.02 and earlier and there is now a version 2.1a (alpha) which it appears everyone is treating as a release. I downloaded the 2.1a version and immediately was struggling to find good starting examples since the developer documentation is not ready for 2.1a save <a href=\"http:\/\/www.box2dflash.org\/docs\/2.1a\/updating\" target=\"_blank\">scant update notes<\/a>.<\/p>\n<p>I started out with a <a href=\"http:\/\/www.kerp.net\/box2d\/\" target=\"_blank\">video tutorial from Todd Kerpelman<\/a> who did a great job for anyone starting cold turkey. His examples are for Box2D version 2.0 and he has a note that he will update for 2.1. I also converted his <a href=\"https:\/\/www.lonhosford.com\/lonblog\/2010\/11\/07\/box2d-flash-puggle-lite-game-version-of-peggle-nights\/\" target=\"_blank\">Puggle version of Peggle Nights<\/a>.<\/p>\n<p><a href=\"http:\/\/www.amazon.com\/gp\/product\/0763784516?ie=UTF8&#038;tag=hosfordusa&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=0763784516\" target = \"_blank\"><img decoding=\"async\" border=\"0\" align=\"right\" src=\"http:\/\/lh4.ggpht.com\/_e5pwU0LJbN8\/TMg4rcI62aI\/AAAAAAAAFvI\/HBJG_mAV_1M\/s800\/51kVfkmZ-WL._SL160_.jpg\"><\/a><\/p>\n<p>Todd may hold out revising videos as I read forum rumors that more major code revisions are possible with Box2D and judging from this update, there is no tolerance for maintaining backwards compatibility other than use the older version. Todd&#8217;s videos are longish and would be served better if he added code to copy for each video. However his explanations of Bxo2d in the videos are extremely helpful. <\/p>\n<p>I found by taking Todd&#8217;s work and a <a href=\"http:\/\/blog.allanbishop.com\/box2d-2-1a-tutorial-part-1\/\" target=\"_blank\">Box2d 2.1a example by Allan Bishop<\/a>, I was able to revise Todd&#8217;s example in 2.1a. Allan&#8217;s example is more basic than is Todd&#8217;s example. I also would like to point out Allan has several more 2.1a version examples that are intriguing that I intend to explore.<\/p>\n<p>You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Box2DFlash 2.1a library. For Flash CS3 and later versions, you need to create a Flash Document in the src folder and set the document class to <code>HelloWorldFallingBoxes01<\/code> and then add a library path to the Box2DFlash 2.1a code or SWC if you created one. For your convenience the Flash CS4 example download is included.<\/p>\n<ul style=\"padding-top: 10px;\">\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/2d\/box2d\/Box2D2.1aHelloWorldFallingBoxes01_AS.zip\" onClick=\"javascript: pageTracker._trackPageview('\/downloads\/Box2D2.1aHelloWorldFallingBoxes01_AS.zip'); \">Flex Builder 4 Actionscript Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/2d\/box2d\/Box2D2.1aHelloWorldFallingBoxes01_Flex.fxp\" onClick=\"javascript: pageTracker._trackPageview('\/downloads\/Box2D2.1aHelloWorldFallingBoxes01_Flex.fxp'); \">Flex Builder 4 Flex Project<\/a><\/li>\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/2d\/box2d\/Box2D2.1aHelloWorldFallingBoxes01_Flash_CS4.zip\" onClick=\"javascript: pageTracker._trackPageview('\/downloads\/Box2D2.1aHelloWorldFallingBoxes01_Flash_CS4.zip'); \">Flash CS4<\/a><\/li>\n<\/ul>\n<p>You can <a href=\"http:\/\/www.box2dflash.org\/download\" target=\"_blank\">download Box2dFlash<\/a> to work with the source, get the API documentation and more examples. I included a SWC library for version 2.1a in the example downloads so you will know they work despite what happens at <a href=\"http:\/\/www.box2dflash.org\" target=\"_blank\">Box2dFlash.org<\/a>.<\/p>\n<p>This article shows the code for the Flex project.<\/p>\n<p><strong>Application Class &#8211; HelloWorldFallingBoxes01<\/strong><br \/>\nAll the code is contained in this class except for the Box2d library. The applicationCompleteHandler creates the Box2D world. The world contains a floor and left and right walls. It also will contain a bunch of falling rectangles that I am calling falling boxes. It sets a debug feature so we can visualize the physic data computed and starts an ENTER_FRAME event to make updates.<\/p>\n<p>All the measurements are in meters so there is ratio PIXELS_TO_METERS constant on line 60 to handle that conversion when you want to think in pixels.<\/p>\n<p>The Box2D world works with &#8220;center&#8221; registration points and so the measurements for the container, in this case the Flash movie, are provided as constants on line 44 and 48 to create the offsets.<\/p>\n<p>The MAX_WORLD_BODIES constant on line 68 is used as an upper limit in adding the falling boxes. The walls, floor and falling boxes are referred to as bodies in Box2D. The MAX_WORLD_BODIES constant along with the NEXT_BOX_IN_INTERVAL constant on line 56 will control the addition of falling boxes.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n&lt;!--\r\n\/**\r\n* Demonstration of Box2D 2.01a dropping boxes into container.\r\n* *\/\r\n--&gt;&lt;s:Application \r\n   \t\txmlns:fx=&quot;http:\/\/ns.adobe.com\/mxml\/2009&quot; \r\n\t\txmlns:s=&quot;library:\/\/ns.adobe.com\/flex\/spark&quot; \r\n\t\txmlns:mx=&quot;library:\/\/ns.adobe.com\/flex\/mx&quot; \r\n\t\tapplicationComplete=&quot;applicationCompleteHandler(event)&quot;\r\n\t\twidth = &quot;550&quot;\r\n\t\theight = &quot;400&quot;\r\n\t\t&gt;\r\n\t&lt;fx:Declarations&gt;\r\n\t\t&lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;\r\n\t&lt;\/fx:Declarations&gt;\r\n\t&lt;fx:Script&gt;\r\n\t\t&lt;!&#x5B;CDATA&#x5B;\r\n\t\t\timport Box2D.Collision.Shapes.b2PolygonShape;\r\n\t\t\timport Box2D.Collision.b2AABB;\r\n\t\t\timport Box2D.Common.Math.b2Vec2;\r\n\t\t\timport Box2D.Dynamics.b2Body;\r\n\t\t\timport Box2D.Dynamics.b2BodyDef;\r\n\t\t\timport Box2D.Dynamics.b2DebugDraw;\r\n\t\t\timport Box2D.Dynamics.b2FixtureDef;\r\n\t\t\timport Box2D.Dynamics.b2World;\r\n\t\t\timport mx.events.FlexEvent;\r\n\t\t\t\/**\r\n\t\t\t * Properties for background\r\n\t\t\t * @see background_bc\r\n\t\t\t *\/\r\n\t\t\tprivate static const backgroundColor:Number = 0x333333;\r\n\t\t\t\/**\r\n\t\t\t * The Box2D world\r\n\t\t\t *\/\r\n\t\t\tprivate var _world:b2World;\r\n\t\t\t\/**\r\n\t\t\t * Frames per second. \r\n\t\t\t *\/\r\n\t\t\tprivate const FPS:uint = 30;\r\n\t\t\t\/**\r\n\t\t\t * Movie width \r\n\t\t\t *\/\r\n\t\t\tprivate const SWF_WIDTH:int = 550;\r\n\t\t\t\/**\r\n\t\t\t * Movie height\r\n\t\t\t *\/\r\n\t\t\tprivate const SWF_HEIGHT:int = 400;\r\n\t\t\t\/**\r\n\t\t\t * Wall thickness\r\n\t\t\t *\/\r\n\t\t\tprivate const WALL_THICKNESS:int = 5;\r\n\t\t\t\/**\r\n\t\t\t * Interval, in frames, between adding boxes to fall.\r\n\t\t\t *\/\r\n\t\t\tprivate const NEXT_BOX_IN_INTERVAL:int = 5;\r\n\t\t\t\/**\r\n\t\t\t * Ratio of pixels to meters. 30 is a defacto standard.\r\n\t\t\t *\/\r\n\t\t\tprivate static const PIXELS_TO_METER:Number = 40;\r\n\t\t\t\/**\r\n\t\t\t * Number of frames until next box is added.\r\n\t\t\t * *\/\r\n\t\t\tprivate var _nextBoxIn:int = 0;\r\n\t\t\t\/**\r\n\t\t\t * Maximum bodies including boxes, floor and walls.\r\n\t\t\t * *\/\r\n\t\t\tprivate const MAX_WORLD_BODIES:int = 80;\r\n\t\t\t\/**\r\n\t\t\t * Handler for applicationComplete event. Setup world and begin animation.\r\n\t\t\t * *\/\r\n\t\t\tprotected function applicationCompleteHandler(event:FlexEvent):void\r\n\t\t\t{\r\n\t\t\t\ttrace(&quot;applicationCompleteHandler(...)&quot;);\r\n\t\t\t\t\/\/ Setup the world\r\n\t\t\t\tsetupWorld();\r\n\t\t\t\t\/\/ Create walls and floor\r\n\t\t\t\tcreateWallsAndFloor();\r\n\t\t\t\t\/\/ Visualize with debugDraw\r\n\t\t\t\tsetupDebugDraw();\r\n\t\t\t\t\/\/ Listen to ENTER_FRAME event.\r\n\t\t\t\taddEventListener(Event.ENTER_FRAME, enterFrameHandler);\r\n\t\t\t}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\nThis section updates the world. The world updates with the Step method shown on line 89. <\/p>\n<p>There is also logic on line 111 &#8211; 118 to add falling boxes at the top of the animation using randomized sizes and positions we will see in the addBox() method later. Here the coding is simply trying to time the frame intervals when a new falling box is added and to deal with some of the new requirements in Box2D 2.1a for updating the world.<\/p>\n<pre class=\"brush: as3; first-line: 84; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t\t\t\/**\r\n\t\t\t * Handler for ENTER_FRAME event.\r\n\t\t\t * *\/\r\n\t\t\tprivate function enterFrameHandler(e:Event):void\r\n\t\t\t{\r\n\t\t\t\tupdateWorld();\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Update world. Add additional boxes.\r\n\t\t\t * *\/\r\n\t\t\tprivate function updateWorld():void\r\n\t\t\t{\r\n\t\t\t\t\/\/trace(&quot;Main.updateWorld(...)&quot;);\r\n\t\t\t\t\/\/ Box2D manual recommends 1\/60 seconds \r\n\t\t\t\t\/\/ set it to the SWF framerate\r\n\t\t\t\tvar timeStep:Number = 1 \/ FPS;\r\n\t\t\t\t\/\/ velocityIterations and positionIteration with 10 being the \r\n\t\t\t\t\/\/ suggested count for each. \r\n\t\t\t\t\/\/ Fewer iterations boosts performances \r\n\t\t\t\t\/\/ but comes at the cost of accuracy.\r\n\t\t\t\tvar velocityIterations:int = 6;\r\n\t\t\t\tvar positionIterations:int = 2;\r\n\t\t\t\t\/\/ Update the world\r\n\t\t\t\t_world.Step(timeStep, velocityIterations, positionIterations);\r\n\t\t\t\t\/\/ As of version 2.1 we must clear the forces.\r\n\t\t\t\t_world.ClearForces();\r\n\t\t\t\t\/\/ Reduce frame delay for adding box\r\n\t\t\t\t_nextBoxIn--;\r\n\t\t\t\t\/\/ Time to add another box\r\n\t\t\t\tif ( _nextBoxIn &lt;= 0 &amp;&amp; _world.GetBodyCount() &lt; MAX_WORLD_BODIES)\r\n\t\t\t\t{\r\n\t\t\t\t\taddBox();\r\n\t\t\t\t\t\/\/ Reset the box frame delay\r\n\t\t\t\t\t_nextBoxIn = NEXT_BOX_IN_INTERVAL;\r\n\t\t\t\t}\r\n\t\t\t\t\/\/ Draw the debug data.\r\n\t\t\t\t_world.DrawDebugData();\r\n\t\t\t}\r\n<\/pre>\n<p>This function creates the world. The 2.1a b2Word constructor no longer requires a universe size. The constructor arguments are now down to two. <\/p>\n<pre class=\"brush: as3; first-line: 122; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t\t\t\/**\r\n\t\t\t * Setup the world.\r\n\t\t\t * *\/\r\n\t\t\tprivate function setupWorld():void\r\n\t\t\t{\r\n\t\t\t\ttrace(&quot;Main.setupWorld()&quot;);\r\n\t\t\t\t\/\/ Define gravity. Y = 9.8 meters per second.\r\n\t\t\t\tvar gravity:b2Vec2 = new b2Vec2( 0, 9.8);\r\n\t\t\t\t\/\/ Ignore sleeping babies\r\n\t\t\t\tvar ignoreSleeping:Boolean = true;\r\n\t\t\t\t_world = new b2World( gravity, ignoreSleeping );\r\n\t\t\t}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\nIn the createFloor() method, the groundBody b2Body is created and represent the floor. Version 2.1a uses b2FixtureDef. You create fixture definition for material properties. You provide the shape to the fixture, and call b2Body.CreateFixture.<\/p>\n<pre class=\"brush: as3; first-line: 132; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t\t\t\/**\r\n\t\t\t * Create the walls and floor.\r\n\t\t\t * *\/\r\n\t\t\tprivate function createWallsAndFloor():void\r\n\t\t\t{\r\n\t\t\t\ttrace(&quot;Main.createWallsAndFloor()&quot;);\r\n\t\t\t\tcreateFloor();\r\n\t\t\t\tcreateWalls();\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Create the floor.\r\n\t\t\t * *\/\r\n\t\t\tprivate function createFloor():void\r\n\t\t\t{\r\n\t\t\t\ttrace(&quot;Main.createFloor()&quot;);\r\n\t\t\t\t\/\/ Define the ground body.\r\n\t\t\t\tvar groundBodyDef:b2BodyDef= new b2BodyDef();\r\n\t\t\t\t\/\/ Set position\r\n\t\t\t\tgroundBodyDef.position.Set(\t(SWF_WIDTH \/ 2) \/ PIXELS_TO_METER, \r\n\t\t\t\t\t(SWF_HEIGHT - WALL_THICKNESS) \/ PIXELS_TO_METER );\r\n\t\t\t\t\/\/ Factory design pattern to create the body.\r\n\t\t\t\tvar groundBody:b2Body = _world.CreateBody(groundBodyDef);\r\n\t\t\t\t\/\/ Create our shape.\r\n\t\t\t\tvar groundBox:b2PolygonShape = new b2PolygonShape();\r\n\t\t\t\t\/\/ Set the box dimensions. \r\n\t\t\t\t\/\/ Width 1\/2 of MovieClip less offset for left and right wall thicknesses \r\n\t\t\t\t\/\/ Height = wall thickness.\r\n\t\t\t\tgroundBox.SetAsBox( \r\n\t\t\t\t\t( (SWF_WIDTH ) \/ 2) \/ PIXELS_TO_METER - ( WALL_THICKNESS * 2) \/ PIXELS_TO_METER, \r\n\t\t\t\t\tWALL_THICKNESS \/ PIXELS_TO_METER);\r\n\t\t\t\t\/\/ Create a fixture definition for body\r\n\t\t\t\tvar groundFixtureDef:b2FixtureDef = new b2FixtureDef();\r\n\t\t\t\t\/\/ Set shape\r\n\t\t\t\tgroundFixtureDef.shape = groundBox;\r\n\t\t\t\t\/\/ Set density\r\n\t\t\t\tgroundFixtureDef.density = 1;\r\n\t\t\t\t\/\/ Set friction 100%\r\n\t\t\t\tgroundFixtureDef.friction = 1;\r\n\t\t\t\t\/\/ Create fixture\r\n\t\t\t\tgroundBody.CreateFixture(groundFixtureDef);\r\n\t\t\t}\r\n<\/pre>\n<p>Creating the walls mirrors the code for creating the floor. The b2BodyDef is reused for both wall b2Body bodies because the word CreateBody method copies and does not provide a pointer to a b2BodyDef. There are computations for position and box sizes stand next to the floor.<\/p>\n<pre class=\"brush: as3; first-line: 173; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t\t\t\/**\r\n\t\t\t * Create the walls.\r\n\t\t\t * *\/\r\n\t\t\tprivate function createWalls():void\r\n\t\t\t{\r\n\t\t\t\ttrace(&quot;Main.createWalls() - left wall&quot;);\r\n\t\t\t\t\/\/ Define the wall body.\r\n\t\t\t\tvar wallBodyDef:b2BodyDef= new b2BodyDef();\r\n\t\t\t\t\r\n\t\t\t\twallBodyDef.position.Set( WALL_THICKNESS \/ PIXELS_TO_METER, ( SWF_WIDTH - WALL_THICKNESS ) \/ PIXELS_TO_METER );\r\n\t\t\t\t\/\/ Factory design pattern to create the body.\r\n\t\t\t\tvar leftWallBody:b2Body = _world.CreateBody(wallBodyDef);\r\n\t\t\t\t\/\/ Create shape.\r\n\t\t\t\tvar leftWallBox:b2PolygonShape = new b2PolygonShape();\r\n\t\t\t\t\/\/ Set as a box.\r\n\t\t\t\tleftWallBox.SetAsBox(WALL_THICKNESS \/ PIXELS_TO_METER, ( SWF_WIDTH - WALL_THICKNESS )  \/ PIXELS_TO_METER);\r\n\t\t\t\t\/\/ Create a fixture definition for left and right wall bodies\r\n\t\t\t\tvar wallFixtureDef:b2FixtureDef = new b2FixtureDef();\r\n\t\t\t\t\/\/ Set shape \r\n\t\t\t\twallFixtureDef.shape = leftWallBox;\r\n\t\t\t\t\/\/ Set density\r\n\t\t\t\twallFixtureDef.density = 0;\r\n\t\t\t\t\/\/ Set friction 50%\r\n\t\t\t\twallFixtureDef.friction = 0.5;\r\n\t\t\t\t\/\/ Set restitution to 30%\r\n\t\t\t\twallFixtureDef.restitution = 0.3;\r\n\t\t\t\t\/\/ Create fixture\r\n\t\t\t\tleftWallBody.CreateFixture(wallFixtureDef);\r\n\t\t\t\ttrace(&quot;Main.createWalls() - right wall&quot;);\r\n\t\t\t\twallBodyDef.position.Set(\r\n\t\t\t\t\t545 \/ PIXELS_TO_METER, \r\n\t\t\t\t\t( SWF_WIDTH - WALL_THICKNESS ) \/ PIXELS_TO_METER );\r\n\t\t\t\t\/\/ Factory design pattern to create the body.\r\n\t\t\t\tvar rightWallBody:b2Body = _world.CreateBody(wallBodyDef);\r\n\t\t\t\t\/\/ Create our shape.\r\n\t\t\t\tvar rightWallBox:b2PolygonShape = new b2PolygonShape();\r\n\t\t\t\t\/\/ Redefine shape\r\n\t\t\t\twallFixtureDef.shape = rightWallBox;\r\n\t\t\t\t\/\/ Set as a box.\r\n\t\t\t\trightWallBox.SetAsBox(\r\n\t\t\t\t\tWALL_THICKNESS \/ PIXELS_TO_METER, \r\n\t\t\t\t\t( SWF_WIDTH - WALL_THICKNESS ) \/ PIXELS_TO_METER);\r\n\t\t\t\t\/\/ Create fixture\r\n\t\t\t\trightWallBody.CreateFixture(wallFixtureDef);\r\n\t\t\t}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\nThe addBox method creates a new falling box. It follows the same code steps as the floor. Differences include that the boxBodyDef type is dynamic to allow for movement, the use of SetAsOrientedBox on line 238 instead of SetAsBox used for floor and walls. The SetAsOrientedBox allows for rotation. To get to the angle argument you need to provide a b2Vec2 center point.<\/p>\n<p>Randomizing the box sizes and starting positions is included for some variety.<\/p>\n<pre class=\"brush: as3; first-line: 218; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t\t\t\/**\r\n\t\t\t * Add a falling box.\r\n\t\t\t * *\/\r\n\t\t\tprivate function addBox():void\r\n\t\t\t{\r\n\t\t\t\ttrace(&quot;Main.addBox()&quot;);\r\n\t\t\t\tvar boxBodyDef:b2BodyDef= new b2BodyDef();\r\n\t\t\t\tboxBodyDef.position.Set( \r\n\t\t\t\t\trandomInt(15, 530) \/ PIXELS_TO_METER, \r\n\t\t\t\t\trandomInt(-100, -50) \/ PIXELS_TO_METER );\r\n\t\t\t\t\/\/ Crates move.\r\n\t\t\t\tboxBodyDef.type = b2Body.b2_dynamicBody;\r\n\t\t\t\t\/\/ Here we can see the factory design pattern being used to create the body.\r\n\t\t\t\tvar boxBody:b2Body = _world.CreateBody(boxBodyDef);\r\n\t\t\t\t\/\/ Create our shape.\r\n\t\t\t\tvar boxShape:b2PolygonShape = new b2PolygonShape();\r\n\t\t\t\t\/\/ Randomize the crate size and convert to meters.\r\n\t\t\t\tvar hx:Number = randomInt(5, 40) \/ PIXELS_TO_METER;\r\n\t\t\t\tvar hy:Number = randomInt(5, 40) \/ PIXELS_TO_METER;\r\n\t\t\t\t\/\/ Set as an oriented box\r\n\t\t\t\tboxShape.SetAsOrientedBox(\r\n\t\t\t\t\thx, \r\n\t\t\t\t\thy,\r\n\t\t\t\t\tnew b2Vec2(hx \/ 2, hy \/ 2), \t\t     \/\/ Center\r\n\t\t\t\t\t(Math.random() * 360) * (Math.PI \/ 180)\t\/\/ Rotation random degrees converted to radians\r\n\t\t\t\t);\t\r\n\t\t\t\t\r\n\t\t\t\t\/\/ Create a fixture definition for crate\r\n\t\t\t\tvar boxFixtureDef:b2FixtureDef = new b2FixtureDef();\r\n\t\t\t\t\/\/ Set shape\r\n\t\t\t\tboxFixtureDef.shape = boxShape;\r\n\t\t\t\t\/\/ Set density\r\n\t\t\t\tboxFixtureDef.density = 0.7;\r\n\t\t\t\t\/\/ Set friction 80%\r\n\t\t\t\tboxFixtureDef.friction = 0.8;\r\n\t\t\t\t\/\/ Set restitution to 30%\r\n\t\t\t\tboxFixtureDef.restitution = 0.3;\r\n\t\t\t\t\/\/ Create fixture\r\n\t\t\t\tboxBody.CreateFixture(boxFixtureDef);\r\n\t\t\t}\r\n<\/pre>\n<p>Here we have some utilities. First is the b2DebugDraw to make the physics data visual and a method to compute a random number from a range.<\/p>\n<p>The b2DebugDraw is added to the SpriteVisualElement box2DContainer on line 265. <\/p>\n<pre class=\"brush: as3; first-line: 258; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t\t\t\/**\r\n\t\t\t * Setup the b2DebugDraw\r\n\t\t\t * *\/\r\n\t\t\tprivate function setupDebugDraw():void\r\n\t\t\t{\r\n\t\t\t\ttrace(&quot;Main.setupDebugDraw()&quot;);\r\n\t\t\t\tvar spriteToDrawOn:Sprite = new Sprite();\r\n\t\t\t\tbox2DContainer.addChild(spriteToDrawOn);\r\n\t\t\t\tvar debugDraw:b2DebugDraw = new b2DebugDraw();\r\n\t\t\t\tdebugDraw.SetSprite(spriteToDrawOn);\r\n\t\t\t\tdebugDraw.SetDrawScale(PIXELS_TO_METER);\r\n\t\t\t\tdebugDraw.SetFlags(b2DebugDraw.e_shapeBit);\r\n\t\t\t\tdebugDraw.SetLineThickness(2.0);\r\n\t\t\t\tdebugDraw.SetFillAlpha(0.6);\r\n\t\t\t\t_world.SetDebugDraw(debugDraw);\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Return a random int from a range.\r\n\t\t\t * @param lowVal  Start of the range.\r\n\t\t\t * @param highVal  End of the range.\r\n\t\t\t * @return Random int from lowVal to highVal\r\n\t\t\t * *\/\r\n\t\t\tprivate function randomInt(lowVal:int, highVal:int):int\r\n\t\t\t{\r\n\t\t\t\tif ( lowVal &lt;= highVal)\r\n\t\t\t\t{\r\n\t\t\t\t\treturn (lowVal + Math.floor(Math.random() * ( highVal - lowVal + 1)));\r\n\t\t\t\t}\r\n\t\t\t\telse\r\n\t\t\t\t{\r\n\t\t\t\t\tthrow (new Error(&quot;Main.randomInt(...) lowVal exceeds highVal&quot;));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t]]&gt;\r\n\t&lt;\/fx:Script&gt;\r\n<\/pre>\n<p>These are the Flex visual components. Simply a  background using the BorderContainer and a the Flex 4 SpriteVisualElement to contain the b2DebugDraw. <\/p>\n<pre class=\"brush: as3; first-line: 294; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n\t   &lt;!--\r\n\t   Background for app \r\n\t   --&gt; \r\n\t   &lt;s:BorderContainer id = &quot;background_bc&quot;\r\n\t\t\t\t\t\t  width=&quot;{width}&quot; height = &quot;{height}&quot;\r\n\t\t\t\t\t\t  \r\n\t\t\t\t\t\t  backgroundColor=&quot;{backgroundColor}&quot;&gt;\r\n\t\t   \r\n\t\t   &lt;!--\r\n\t\t   Container for the Box2D world\r\n\t\t   --&gt;\r\n\t\t   &lt;s:SpriteVisualElement id = &quot;box2DContainer&quot; \/&gt;\r\n\t   &lt;\/s:BorderContainer&gt; \r\n&lt;\/s:Application&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I decided it was time to try out Box2DFlash, a free 2D physics engine for Flash that works in both Flash and Flex Builder 4. I found most examples were for version 2.02 and earlier and there is now a version 2.1a (alpha) which it appears everyone is treating as a release. I downloaded the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[19,30,58,3,9,31],"class_list":["post-995","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-animation","tag-box2d","tag-adobe-flash","tag-flex","tag-gaming"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=995"}],"version-history":[{"count":47,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/995\/revisions"}],"predecessor-version":[{"id":3697,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/995\/revisions\/3697"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}