blackcj.com » Box2d http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Box2D on the Nexus One with Adobe AIR http://www.blackcj.com/blog/2010/07/13/box2d-on-the-nexus-one-with-adobe-air/ http://www.blackcj.com/blog/2010/07/13/box2d-on-the-nexus-one-with-adobe-air/#comments Tue, 13 Jul 2010 23:23:58 +0000 Chris Black http://www.blackcj.com/blog/?p=831 This native application uses the accelerometer to determine the direction of gravity for the Box2D physics engine. It performs quite well given the number of computations and could probably be optimized considerably. Check out the video for a demo on the phone!

Porting the code was the easy part. Configuring Adobe Flash and setting up the Android SDK was a bit more work. Check out Lee Brimelow’s awesome tutorial on http://www.gotoandlearn.com/. If you run into problems finding your device with the adb devices command than check out my previous post. We are going to see some pretty exciting stuff around the corner with Adobe AIR for mobile devices!

Full source code can be found here. You’ll need to run through Lee Brimelow’s tutorial to configure Flash before you get started.

]]> http://www.blackcj.com/blog/2010/07/13/box2d-on-the-nexus-one-with-adobe-air/feed/ 8 Box2D Part 3: Anti-Gravity http://www.blackcj.com/blog/2009/08/17/box2d-part-3-anti-gravity/ http://www.blackcj.com/blog/2009/08/17/box2d-part-3-anti-gravity/#comments Tue, 18 Aug 2009 02:04:43 +0000 Chris Black http://www.blackcj.com/blog/?p=501 Can you get the objects to float in space using your mouse? This is the conclusion to the three part series on using the Box2D Physics engine with ActionScript.

Box2D Anti-Gravity Example:

Box2D Anti-Gravity Example

Get Adobe Flash player

(click and hold the mouse down for anti-gravity)

Now that we have a Box2D environment set up and lots of polygons in it, let's make it cool.

Anti-gravity boolean.
Add this boolean and if statement into your shape environment class.

PLAIN TEXT
Actionscript:
  1. public var counterGravity:Boolean = false;
  2.  
  3. override protected function update(e:Event):void
  4. {
  5.     // ...(from part 2)... //
  6.         if (bb.m_userData is Sprite) {
  7.             if(counterGravity){
  8.                 world.SetGravity(new b2Vec2(0,-9.8));
  9.                 bb.WakeUp();
  10.             }else{
  11.                 world.SetGravity(new b2Vec2(0,9.8));
  12.             }
  13.     // ...(from part 2)... //
  14. }

Now add a mouse event handler and the following functions into your main class.

PLAIN TEXT
Actionscript:
  1. private function addCounterGravity(event:MouseEvent):void
  2. {
  3.     _shape2d.counterGravity = true;
  4. }
  5.  
  6. private function removeCounterGravity(event:MouseEvent):void
  7. {
  8.     _shape2d.counterGravity = false;
  9. }

Now you have anti-gravity!

Miss out on the basics? Check out part 1 and part 2 of this series.

Full source code here.

]]> http://www.blackcj.com/blog/2009/08/17/box2d-part-3-anti-gravity/feed/ 0 Box2d Part 2: Shape Factory http://www.blackcj.com/blog/2009/08/17/box2d-part-2-shape-factory/ http://www.blackcj.com/blog/2009/08/17/box2d-part-2-shape-factory/#comments Tue, 18 Aug 2009 01:52:35 +0000 Chris Black http://www.blackcj.com/blog/?p=498 Now that we have created our small world using the Box2D physic engine let's start creating shapes! The shape factory will allow you to define any shapes you would like to add to your world. In this example we will create polygons.

Polygons in this example will be defined as a shape with 3 or more vertices with sides of equal length.

There are three steps in creating the object. Create the sprite, assign it to a body and generate a physics object. Keep in mind the sprite and the physics object to not need to be the same shape but they generally are. You could have a square displayed that acts in the physics world as a circle.

Create your sprite

PLAIN TEXT
Actionscript:
  1. public static function generatePolySprite(polyVO:PolyShapeVO):Sprite
  2. {
  3.     var polyClip:Sprite = new Sprite();
  4.     polyClip.graphics.beginFill(polyVO.color);
  5.     var tempPoints:Array = new Array()
  6.     var ratio:Number = 360/polyVO.numSides;
  7.     for(var i:int = 0;i <= 360;i += ratio)
  8.     {
  9.         var xx:Number=Math.sin(radians(i))*polyVO.radius;
  10.         var yy:Number=(polyVO.radius-Math.cos(radians(i))*polyVO.radius);
  11.         tempPoints.push(new Point(xx,yy));
  12.     }
  13.    
  14.     polyClip.graphics.moveTo(tempPoints[tempPoints.length - 1].x, tempPoints[tempPoints.length - 1].y);
  15.     for(var n:int = 0; n <tempPoints.length; n++){
  16.         polyClip.graphics.lineTo(tempPoints[n].x, tempPoints[n].y);
  17.     }
  18.     return polyClip;
  19. }
  20.  
  21. public static function radians(n:Number):Number
  22. {
  23.     return(Math.PI/180*n);
  24. }

Body definition.
The next function we will want is a body definition which will create an object in the physics world and assign our sprite to that object.

PLAIN TEXT
Actionscript:
  1. public static function generateBodyDef(shapeSprite:Sprite, box_width:int, box_height:int):b2BodyDef
  2. {
  3.     var result:b2BodyDef = new b2BodyDef();
  4.    
  5.     // Randomly place the shape.
  6.     result.position.Set((Math.random() * (box_width - 200) + 100)/Constants.PHYS_SCALE, (Math.random() * (box_height - 200) + 100)/ Constants.PHYS_SCALE);
  7.    
  8.     // Set the userData (object Sprite)
  9.     result.userData = shapeSprite;
  10.    
  11.     return result;
  12. }

And finally create the polygon definition.

PLAIN TEXT
Actionscript:
  1. public static function generatePolyDef(polyVO:PolyShapeVO):b2PolygonDef
  2. {
  3.     var result:b2PolygonDef = new b2PolygonDef();
  4.     result.vertexCount = polyVO.numSides;
  5.    
  6.     var xf1:b2XForm = new b2XForm();
  7.    
  8.     var tempPoints:Array = new Array()
  9.     var ratio:Number = 360/polyVO.numSides;
  10.     for(var i:int = 0;i <= 360;i += ratio)
  11.     {
  12.         var xx:Number=Math.sin(radians(i))*polyVO.radius;
  13.         var yy:Number=(polyVO.radius-Math.cos(radians(i))*polyVO.radius);
  14.         tempPoints.push(new Point(xx,yy));
  15.     }
  16.    
  17.     for(var n:int = 0; n <tempPoints.length; n++){
  18.         result.vertices[n] = b2Math.b2MulX(xf1, new b2Vec2(tempPoints[n].x/Constants.PHYS_SCALE, tempPoints[n].y/Constants.PHYS_SCALE));
  19.     }
  20.                
  21.     result.density = 10;
  22.     result.restitution = Constants.RESTITUTION;
  23.     result.friction = Constants.FRICTION;
  24.    
  25.     return result;
  26. }

Now let's extend our base environment from part 1 to allow for the addition of shapes.

PLAIN TEXT
Actionscript:
  1. public function addPoly(shapeVO:PolyShapeVO):void
  2. {
  3.     var squareClip:Sprite = ShapeFactory.generatePolySprite(shapeVO);
  4.    
  5.     if(debug_mode)
  6.     {squareClip.alpha = 0.5;}
  7.    
  8.     addChild(squareClip);
  9.  
  10.     var bd:b2BodyDef = ShapeFactory.generateBodyDef(squareClip, box_width, box_height);
  11.     var cd:b2PolygonDef = ShapeFactory.generatePolyDef(shapeVO);
  12.    
  13.     addShape(bd, cd);         
  14. }
  15.  
  16. override protected function update(e:Event):void
  17. {
  18.     super.update(e);
  19.  
  20.     for (var bb:b2Body = world.m_bodyList; bb; bb=bb.m_next) {
  21.         if (bb.m_userData is Sprite) {
  22.             bb.m_userData.x = bb.GetPosition().x * Constants.PHYS_SCALE;
  23.             bb.m_userData.y = bb.GetPosition().y * Constants.PHYS_SCALE;
  24.             bb.m_userData.rotation = bb.GetAngle() * 180 / Math.PI;
  25.         }
  26.     } 
  27. }
  28.  
  29. private function addShape(bd:b2BodyDef, cd:b2ShapeDef):void
  30. {
  31.     var x_speed:Number = Math.random() * 10;
  32.    
  33.     body = world.CreateBody(bd);
  34.     body.CreateShape(cd);
  35.     body.SetMassFromShapes();
  36.    
  37.     // Assign a random speed to the shape
  38.     body.m_linearVelocity.x = x_speed;
  39.     body.m_linearVelocity.y = 10 - x_speed;      
  40. }

Finally we will add logic to our main class to create the shapes.

PLAIN TEXT
Actionscript:
  1. private var _colors:Array = new Array(0xFF0000, 0xFFFF00, 0x00FF00, 0x00FFFF, 0x0000FF);
  2. private var _shape2d:ShapeEnvironment;
  3.  
  4. public function Box2DQuickStart()
  5. {
  6.     stage.scaleMode = StageScaleMode.NO_SCALE;
  7.     stage.align = StageAlign.TOP_LEFT;
  8.                
  9.     _shape2d = new ShapeEnvironment(380, 280, true);
  10.     _shape2d.x = 10;
  11.     _shape2d.y = 10;
  12.    
  13.     //Add polygons
  14.     for(var i:int = 1;i <=45; i++){
  15.         var tempShapeVO:PolyShapeVO = new PolyShapeVO();
  16.         tempShapeVO.color = _colors[i % _colors.length];
  17.         tempShapeVO.numSides = 3 + i % 10;
  18.         tempShapeVO.radius = 5 + Math.random()*20;
  19.         _shape2d.addPoly(tempShapeVO);
  20.     }
  21.    
  22.     
  23.     _shape2d.start();
  24.    
  25.     this.addChild(_shape2d);
  26. }

Check out the final product along with some Anti-Gravity in part 3.

]]> http://www.blackcj.com/blog/2009/08/17/box2d-part-2-shape-factory/feed/ 2 Box2D Part 1: It’s a Small World http://www.blackcj.com/blog/2009/08/17/box2d-part-1-its-a-small-world/ http://www.blackcj.com/blog/2009/08/17/box2d-part-1-its-a-small-world/#comments Tue, 18 Aug 2009 01:28:05 +0000 Chris Black http://www.blackcj.com/blog/?p=495 The Box2d Physics Engine for ActionScript from the Ground Up

We'll start with the basic 2d environment (part 1) and work our way into creating dynamic polygons (part 2) with an anti-gravity effect (part 3).

Here's a preview of what we will end up with:

Google Maps Text Event

Get Adobe Flash player

(click and hold the mouse down for anti-gravity)

What is Box2d?
It's a physics engine that was written in C++ and ported over to ActionScript. Learn more about it here.

Now what?
Download the framework here. Start a new ActionScript project and put the Box2D folder into your src directory.

Set up some constants.
Boring! I know, but you'll be happy later :) Luckily they are all commented so you know what effect they will have when we start adding objects. You'll notice the PHYS_SCALE variable. The physics environment is not one to one with the stage in Flash. This scale is used to translate coordinates between the two environments.

PLAIN TEXT
Actionscript:
  1. // Number of pixels in a Meter (Usually between 10 and 30).
  2. // The closer to 1, the more accurate. And more processor intensive.
  3. public static const PHYS_SCALE:Number = 10;
  4.  
  5. // Restitution is used to make objects bounce (usually set to be between 0 and 1).
  6. // 0 means the ball won't bounce. 1 means the ball's velocity will be exactly reflected.
  7. public static const RESTITUTION:Number = 0.7;
  8.  
  9. // Friction is used to make objects slide along each other (usually set to be between 0 and 1).
  10. // 0 turns off friction and a value of one makes the friction strong.
  11. public static const FRICTION:Number = 0.6;
  12.  
  13. // How many physical calculations per timestep.
  14. // Usually 1 / 15 or 1 / 60.
  15. public static const TIMESTEP:Number = 1.0 / 15.0; 
  16.  
  17. // The suggested iteration count is 10.
  18. public static const ITERATIONS:Number = 10.0;

Create a base 2d environment.
Starting simple. We need a world. The upper bound and lower bound are in the physics scale and should be larger than your current stage. Objects will stay alive as long as they are in the bounds of the world. Right now that is 100 * 10 (our physics scale) = 1000 pixels positive and negative.

PLAIN TEXT
Actionscript:
  1. protected var world:b2World;
  2.  
  3. public function Base2dEnvironment()
  4. {
  5.     var gravity:b2Vec2 = new b2Vec2(0,9.8);
  6.     var worldAABB:b2AABB = new b2AABB();
  7.    
  8.     worldAABB.lowerBound.Set(-100,-100);
  9.     worldAABB.upperBound.Set(100,100);
  10.     world = new b2World(worldAABB, gravity, true);
  11. }

We also need a way to kickstart our world.

PLAIN TEXT
Actionscript:
  1. protected var running:Boolean = false;
  2.  
  3. public function start():void
  4. {
  5.     if(!running){
  6.         addEventListener(Event.ENTER_FRAME, update, false, 0, true);
  7.         running = true;
  8.     }
  9. }
  10.  
  11. public function pause():void
  12. {
  13.     if(running){
  14.         removeEventListener(Event.ENTER_FRAME, update);
  15.         running = false;
  16.     }
  17. }
  18.  
  19. protected function update(e:Event):void {
  20.     world.Step(timestep, iterations);
  21. }

Now it's time to add objects right? Well, first we want some boundaries so our objects don't fall out of our display area. And how about a debug mode so we can actually see our invisible boundaries?

PLAIN TEXT
Actionscript:
  1. protected var box_width:int;
  2. protected var box_height:int;
  3. protected var debug_mode:Boolean;
  4. protected var margin:int = 5;
  5.  
  6. public function Base2dEnvironment(boxWidth:int = 800, boxHeight:int = 500, debugMode:Boolean = false)
  7. {      
  8.     // ...(world code from above)... //
  9.  
  10.     box_width = boxWidth;
  11.     box_height = boxHeight;
  12.     debug_mode = debugMode;
  13.  
  14.     //Shows boundries (green transparency) used to see 'Ground'
  15.     if(debugMode){
  16.         drawGroundBoundries();
  17.     }
  18.    
  19.     // Bottom wall
  20.     AddStaticBox((box_width / 2)/Constants.PHYS_SCALE, (box_height + margin)/Constants.PHYS_SCALE, (box_width / 2) / Constants.PHYS_SCALE, margin / Constants.PHYS_SCALE);   
  21.     // Top wall
  22.     AddStaticBox((box_width / 2)/Constants.PHYS_SCALE, -margin / Constants.PHYS_SCALE, (box_width / 2) / Constants.PHYS_SCALE, margin / Constants.PHYS_SCALE);
  23.     // Left wall
  24.     AddStaticBox(-margin / Constants.PHYS_SCALE,(box_height / 2) / Constants.PHYS_SCALE, margin / Constants.PHYS_SCALE,(box_height / 2 ) / Constants.PHYS_SCALE);
  25.     // Right wall
  26.     AddStaticBox((box_width + margin) / Constants.PHYS_SCALE,(box_height / 2)/Constants.PHYS_SCALE, margin / Constants.PHYS_SCALE,((box_height) / 2) / Constants.PHYS_SCALE);
  27. }
  28.  
  29. private function drawGroundBoundries():void
  30. {
  31.     var m_sprite:Sprite;
  32.     m_sprite = new Sprite();
  33.     addChild(m_sprite);
  34.    
  35.     var dbgDraw:b2DebugDraw = new b2DebugDraw();
  36.     var dbgSprite:Sprite = new Sprite();
  37.     m_sprite.addChild(dbgSprite);
  38.     dbgDraw.m_sprite = m_sprite;
  39.     dbgDraw.m_drawScale = Constants.PHYS_SCALE;
  40.     dbgDraw.m_alpha = 1;
  41.     dbgDraw.m_fillAlpha = 0.5;
  42.     dbgDraw.m_lineThickness = 1;
  43.     dbgDraw.m_drawFlags = b2DebugDraw.e_shapeBit;
  44.     world.SetDebugDraw(dbgDraw);
  45. }
  46.  
  47. // Used for drawing the ground
  48. private function AddStaticBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number):void {
  49.     var bodyDef:b2BodyDef = new b2BodyDef();
  50.     bodyDef.position.Set(_x, _y);
  51.     var boxDef:b2PolygonDef = new b2PolygonDef();
  52.     boxDef.SetAsBox(_halfwidth, _halfheight);
  53.     boxDef.density = 0.0;
  54.     var body:b2Body = world.CreateBody(bodyDef);
  55.     body.CreateShape(boxDef);
  56.     body.SetMassFromShapes();
  57. }

Now we have our world! Let's start adding objects. Click here for part 2.

]]> http://www.blackcj.com/blog/2009/08/17/box2d-part-1-its-a-small-world/feed/ 1