Home > Lab > Box2Dwrapper – Box2DFlashAS3 made simple!

Box2Dwrapper – Box2DFlashAS3 made simple!

February 28th, 2009

Hi guys:

So, about a week ago, a friend of mine asked me if I could give him a quick explanation as to how to use/setup Box2DFlashAS3. Honestly, I didn’t have the time as I was swamped with work, so I directed him over to Emanuele’s site which is chock full on Box2DFlashAS3 tutorials. After going through his posts for a couple days, my buddy said that he was able to figure it out but that the syntax was ridiculous! I don’t blame him either; the syntax is very unorthodox for a developer that has only develops in AS3.

That got me to thinking and I decided to create a wrapper class to try and make it simpler to use. Now, keep in mind that I really never dug into this particular physics engine. I quickly saw that a simple wrapper class was not going to be enough, but I started anyway and ended up with the Box2Dwrapper library.

The Box2Dwrapper library is modeled after Papervision3D’s BasicView and is extremely easy to use. Please keep in mind that the library is still under development and probably will be for some time since I will be busy with JigLibFlash refactoring and other work, never the less, I will update it often so keep tuned.

Enough gibberish, on to the code! Remember, it’s still in its infant stage and undocumented, but I’m still gonna let you guys check it out.

This is how simple it is to use:

package
{
    import com.box2dwrapper.object.Box;
    import com.box2dwrapper.object.Circle;
    import com.box2dwrapper.view.Box2DView;

    public class Box2Dwrapper_Test extends Box2DView
    {
        public function Box2Dwrapper_Test()
        {
            super(2000, 2000, 0, 9.8, true);
            showDebug = true;
            allowDragging = true;
            initialize();
        }
       
        private function initialize():void
        {
            createFloor();
            createFace();
            startPhysicsRender();
        }
       
        private function createFloor():void
        {
            var floor:Box = new Box();
            floor.position(stage.stageWidth * 0.5, stage.stageHeight);
            floor.scale(stage.stageWidth * 0.5, 10);
            floor.type = "static";
            addBody(floor);
        }
       
        private function createFace():void
        {
            var face:Circle = new Circle();
            face.radius = 20;
            face.position(stage.stageWidth * 0.5, 25);
            face.type = "dynamic";
            face.restitution = 0.5;
            addBody(face);
        }
       
    }
}

IN THE CONSTRUCTOR

- The Box2DView class accepts 4 parameters passed in via the “super” method. They are:

  • world width
  • world height
  • horizontal force
  • vertical force
  • allow sleep


- showDebug (internal) allows you to see the debug drawn physics objects.

- allowDragging (internal) makes the objects automatically draggable.

IN THE INITIALIZE METHOD

- startPhysicsRender() (internal) starts the render ticker.

IN THE createFloor and createFace METHODS

Here you can see how easy it is to create a box/circle with physics properties. Definitely a syntax we can relate to. Here are their properties and methods:

  • radius (circle only) sets the radius
  • density sets the mass
  • restitution sets the elasticity
  • friction sets the friction
  • type can be either “static” or “dynamic”
  • skin sets a display object from the library as a material, for example circle.skin = new Face();



  • scale(width, height) sets the width and height
  • position(x, y) sets the position


There are other properties and methods that are in the process of integration and that will be available in a future release. In the meantime, you guys can take the library as is, add, edit, remove stuff, dissect it as you wish. Just don’t claim it as yours ;)

You can grab the code from the Google repository here :
http://box2dwrapper.googlecode.com/svn/trunk/

Lab

  1. March 1st, 2009 at 02:35 | #1

    So what exactly can your wrapper do? Put circles and boxes on the stage? ;) Come on, this is 10% of what Box2DFlashAS3 can do. What about other shapes, joints, contact managment?

  2. admin
    March 1st, 2009 at 05:50 | #2

    @szataniol Hey man, your totally right, But like I said in the post ,

    Please keep in mind that the library is still under development and probably will be for some time

    and

    Remember, it’s still in its infant stage and undocumented, but I’m still gonna let you guys check it out.

    What that means, exactly, is that the library is far from complete but that I still wanted you guys to check it out and see what’s in the pipeline. maybe I should have specified that ;)

  3. March 1st, 2009 at 07:17 | #3

    I thought about developing such wrapper by myself (ya, Box2D api sux) but after few attempts I dropped this idea. The point is that Box2D works as a Controller. You can view it’s output in BitmapData, Stage or even 3D engine such as Papervision3D. Writing a wrapper not only slows down the engine but is also limiting it’s view capabilities. Imo it’s a lot better to write a good tutorial than something like this.

  4. admin
    March 1st, 2009 at 08:32 | #4

    You’re definitely entitled to your opinion. Never the less, wrapping the classes does not slow down the engine in my opinion. Any way, to each his own, right?

    You can still access the engine data even through the wrapper though. You still have access to all the definitions and original class via the specified object class, for example, myBox.body, myBody.bodyDef and myBox.polyDef are just a few examples.

    I can tell you this much, wrapping the original engine is not as bold as refactoring the whole thing ;)

  5. gORDEE
    March 1st, 2009 at 12:32 | #5

    Awesome work! This is really handy, the Box2D syntax is really longwinded. Thanks :)

  6. March 31st, 2009 at 17:55 | #6

    interesting, however i think box2dflash syntax is great the way it is. Also, I would rather learn the terminology of the code I am using, so when I ask questions its clear. Perhaps you will save people some learning though.

  7. March 31st, 2009 at 19:15 | #7

    @sketchbookgames I totally agree with you. Box2Dwrapper is meant to be used by developers who already code with Box2DFlash, yet feel more comfortable with a more familiar syntax. Box2Dwrapper is in no way meant to substitute Box2DFlash, just make it easier to use in a syntax that we as Flash developers are used to.

  8. April 1st, 2009 at 09:29 | #8

    it looks as if you are merging data from Shape Body and custom effects into one data object and hopefully allowing the variables to be changed at run time. which does require a bit of coding. it may be helpful to also address the creation and destruction of objects during physics calculations, automatically delaying them until the beginning of the next frame if m_world’s lock is true when the creation and destruction attempts are made.

    also to make everything changeable at run time, you will need to be familiar with the worlds reFilter methods.

    You could potentially save quite a few people some time and headache’s with this. However I find the shape/body distinctions very helpful in my own projects.

    good luck.

  1. No trackbacks yet.
Comments are closed.