Eventually I managed get a simple structure together, various boxes moving, bouncing and being able to be controlled by a mouse. I will eventually blog about the example I created as I think it will be a useful exercise for people usingBox2DFlash and for people who wish to see just what is possible in Actionscript 3.

However, when I started to get into more involved structures, joints, pulleys, etc – things rapidly wnet from bad to worse.  I just did not have the time to go through the morass of outdated tutorials and incorrect information.

Recently I found the World Construction Kit (WCK) – this a Flash port. It is a component framework for the Box2D Flash Alchemy Port, which allows 2D physics simulations for games / websites to be authored entirely within the Flash IDE.  Whereas, previously I would do everything in Flash Builder, now I can use Flash CS5.

I would also be able to use this in Flash Builder I assume, but I will try that another time. For now I thought I would put together a little example in Flash CS5 and see how easy it is compared to what I did before.

First off a few links…

This is the overview of the World Construction Kit…

http://wiki.github.com/jesses/wck/world-construction-kit

Download all the files from here…

http://github.com/jesses/wck

Step by step guide for setting up a simple example here…

http://wiki.github.com/jesses/wck/step-by-step-wck-quick-start-guide

I basically followed the step-by-step guide, so I will not re-create the whole set of instructions, but what I will do is give you screenshots of what you need to create and what you end up with.

Firstly, this what you end up with when you download your source files…

These are the files you see when you download and uncompress the source files

Next create a project folder, and create a test fla – I am using Flash CS5.  Inside that create a wck-lib folder and copy over the following…

This is the test project folder with all the source files copied over

Once that is done, go back to Flash and look at your fla. You need to create the following…

World Construction Kit setup

Basically you have one MovieClip set up as your world…

World MovieClip setup

Then you create another MovieClip that you will use as your objects within your world. These will be draggable (or not) and can act as walls, etc.

Rectangle1 MovieClip setup

This MovieClip also needs to have its Component Definition set (just RMB click on the item within the Library)…

Rectangle1 component definition

Once this is all done you will have a world created within your fla file, and inside it are your rectangles, one of which will act as your floor. If you were to save and test your file straight away, however, you will notice that both objects fall away – this is because both are set as dynamic objects.  The object acting as your floor (or wall, etc) needs to be set as a static object.  This is done through the Properties panel…

Instance properties

At the bottom are where you set the types…

Instance types

Once set to static, if you then save and test your file you will see one rectangle fall to the floor, the floor stays where it is, and the object can then be moved and thrown with the mouse.

Overall, I found the experience of setting up and working with wck very easy and enjoyable.  I am very impressed with the setup, and the ease with which I could create things. It took maybe half-an-hour of reading and testing to get this simple example working.

The only thing I have noticed is that when I am throwing things around, they sometimes go through other objects, rather than properly colliding – but this I suspect is down to the values of my settings, things like gravity, friction, restitution, etc. These I will play around with in another post.

My next example will be to see how easy it will be to make various joints and pulleys etc.

A few points…

the document class is wck.WCK

you also need to set the following Source and Library paths…

When creating new symbols, make sure that the registration point is in the centre – Box2D uses the centre point of an object for its calculations

The world symbol has a Linkage set to wck.World – all your other objects should exist within an instance of this symbol on the stage

The box symbols (Rectangle1 in this example) have a Linkage set to shapes.Box

The Rectangle1 symbol in the Library also has its Component Definition class set to wck.BodyShape

The great thing about this setup is that I can drag out the requisite symbol as many times as I like and position them how I like and change their properties very easily.  Each symbol can also have its own class for me to add whatever behaviours I wish. Very easy.

Here are the source files for you to play around with- let me know what you think.

wck test files

Try adding some more walls etc and see what you can do just by throwing around your objects!

Here is the first example that I created…

wck test1

…and here is the second version, I have just added some walls and a ceiling and another object …

wck test2

The major differences that I have found so far, are related to how to setup your world and your bodies (bearing in mind that I have only just started with Box2DFlash, and do not know the previous versions).

It took me a while to get my head around the Box2DFlash 2.1 relationship between fixtures, shapes, and bodies.

So here is a simple graphic that I have created, showing the relationship between a b2Body (your body), a b2BodyDef (body definition, holding information like angle, userData, position, etc), a b2FixtureDef (fixture definition holding information about the physics of the object, i.e. friction, restitution, density, and shape, etc), and a b2PolygonShape (if you are using polygons, and this holds information about the actual shape of your body).

This is to be considered a work in progress, and as I continue with Box2DFlash I may change this.

But for now use it as a good approximation and aide memoire.

Box2DFlash body overview

A lot of games use Box2DFlash and so I thought it was about time to play around with it.

Also, i thought it would be a nice idea to blog about my progress. I will be using Flash Builder 4 (beta) to do all my work in, but the files can be used in Flash, or a.n.other development environment.

Firstly you will need to download the files from here…

http://sourceforge.net/projects/box2dflash/develop (svn)

…or from here…

http://box2dflash.boristhebrave.com/download

Check the latter link to see various examples of how you can use this engine.

The download also contains some test files, so if you do download them, have a look at the test files – these will give you an insight in how things work.

I will also be using the latest version, 2.1a, and a word of warning – there is a massive difference between this version and previous versions. As a result, most of the tutorials you will see on the web will not work with 2.1a, so i thought i would use this as an excuse to investigate Box2DFlash 2.1a and see how i can play around with it.

So i will be using Box2DFlash to create various projects in Flash Builder and i will post the code and the results here.

See you soon!