Sunday, 14 August 2011

Add texture to Box2d bodies

In this post I will add texture/skin Box2D bodies in Actionscript 3. Firstly, you will need to open up Flash and import the graphic assets you want to add to the Box2D body. Convert the asset to a movie clip and ensure the 'Export for Actionscript' is selected and an appropriate Class name is used.

For example, in the code below the SWF dimensions are 550 x 400 pixels. I have a floor graphic and crate graphic in my Flash file. Both these graphics are movie clips with the center registration point selected and the 'Export for Actionscript' selected. The class names are: CrateSkin and FloorSkin respectively. Please note I have modified the createBox() function from my last Box2D post: Remove Box2D bodies. The function now includes an addition parameter, Skin, which is used to add the graphic on the stage. I have also stored the Skin as a custom attribute, so it can be linked to the body to be moved and rotated. The update() function has also been updated. The body position and rotation will move the graphic respectively.

The new addition to the code is the addB2Body() function. This function will add a Box2D body on the stage from the mouse's x and y position.

package  {
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import Box2D.Dynamics.*;
 import Box2D.Collision.*;
 import Box2D.Collision.Shapes.*;
 import Box2D.Common.Math.*;
 import flash.display.MovieClip;
 [SWF(width="550", height="400", frameRate="30", backgroundColor="#FFFFFF")]
 public class AddTextureExample extends Sprite {
  private const GRAVITY_X:int = 0;
  private const GRAVITY_Y:int = 10;
  private const PIXEL_TO_METRE:int = 30;
  private var world:b2World;

  public function AddTextureExample() {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   world = new b2World(new b2Vec2(GRAVITY_X, GRAVITY_Y), true);
   createBox(0, 370, 550, 30, 'stay', b2Body.b2_staticBody, new GroundSkin());
   addEventListener(Event.ENTER_FRAME, update);
   stage.addEventListener(MouseEvent.CLICK, addB2Body);
  private function addB2Body(e:MouseEvent):void
   var size:int = 30;
   createBox(mouseX-size/2, mouseY-size/2, size, size, 'box', b2Body.b2_dynamicBody, new CrateSkin());

  private function createBox(px:int, py:int, w:Number, h:Number, s:String, bType:int, skin:MovieClip, d:Number = 1, f:Number = 0.4, r:Number = 0.3):b2Body
   var bodyDef:b2BodyDef = new b2BodyDef();
   bodyDef.position.Set((px + w/2) / PIXEL_TO_METRE, (py + h/2 ) / PIXEL_TO_METRE );
   bodyDef.type = bType;
   bodyDef.userData = new Object(); = s; = skin;
   var polygonShape:b2PolygonShape = new b2PolygonShape();
   polygonShape.SetAsBox(w / 2 / PIXEL_TO_METRE, h / 2 / PIXEL_TO_METRE);
   var fixtureDef:b2FixtureDef = new b2FixtureDef();
   fixtureDef.shape = polygonShape;
   fixtureDef.restitution = r;
   fixtureDef.density = d;
   fixtureDef.friction = f;
   var body:b2Body = world.CreateBody(bodyDef);
   return body;

  private function update(e:Event):void
   world.Step(1/30, 10, 10);
   for(var b:b2Body = world.GetBodyList(); b; b=b.GetNext()){
     b.GetUserData().skin.x = b.GetPosition().x * PIXEL_TO_METRE;
     b.GetUserData().skin.y = b.GetPosition().y * PIXEL_TO_METRE;
     b.GetUserData().skin.rotation = b.GetAngle() * 180/Math.PI;


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP