Basic Box2D editor using Flash movieclips

When you are about to design a level or whatever else in Box2D, you have to face some design issues due to different unit measurements (Flash works with pixels while Box2D uses meters) and the common problems in level design: the need to have a WYSIWYG interface.

Some frameworks such as Citrus Engine, have a built in editor, but what if you are making a Box2D project on your own?

I am making a little Box2D editor to be used in a couple of games I am making, and it’s based on… Flash movieclips.

It’s the easiest solution if you don’t need a lot of features. The best solution for simple games such as Totem Destroyer.

It works this way: first, we need a movieclip with a box, centered in its origin:

Then using this movieclip, we start building the level in another movieclip just adding and transforming the original box movieclip:

Finally, we need to tell the movieclip which boxes are static and which ones are dynamic: I am giving a d instance name for dynamic boxes and a s instance name for static boxes.

Then it’s just actionscript:

And this is the result:

As you can see I perfectly recreated the Box2D environment I made in the editor movieclip.

Obviously it’s far from being complete, but you can add more features just playing with instance name, adding attributes such as density, restitution and so on. If I receive a good feedback, I can improve the editor or share the one I am making for my games.

Download the source code

  • Alexandre Colella

    Well my friend! Let’s do it! :)
    Please, improve or share it!
    I will love it!

    Great!

  • Hey Emmanuele! I love your tutorials, im trying to get a better grasp on the whole box2d engine, and I would love if you would make more box2d tutorials, and/or I would also love to see the engine you mention in the ending.

  • MC

    as you said,.. it’s great and useful for creating levels… it does not work if you’re planning to let users create their own levels, but it works for creating the main levels. i’d like to see some improvements. Suggestions: the actionscript should export the level code (box2d_Object parameters: x, y, angle, etc),… allow to click on objects and modify parameters as: movieclip, density, restitution, etc… Good work and good luck!

  • Pepe

    Hey thats awesome dude! Following your site for long time and this tends to become a awesome feature on your blog.
    Great!

  • JS

    I’m just going to leave this here:

    http://www.sideroller.com/wck/

    Not to dissuade anyone from building their own framework, but after working on this for a couple years maybe at least some inspiration can be found ;)

  • Emanuele Feronato

    hey it looks gerat, I’ll definitvely take a look at it

    Emanuele

  • I use a similar method, but I use a .JSFL to compile the thing down to a string. Much more flexibillity over code :)

  • Really nice tutorial..i was looking for this !

    Can you tell me why you are using this code please ?

    rotation*0.0174532925

    what is the point of multiplying by “0.0174532925” ?

    And how can I make it rotating ? now it have fixed rotation ?

  • Pingback: Create Box2D levels in a quick with Bison Kick - Emanuele Feronato()

  • Hi, Emanuele! Thanks for all the tutorials/examples. I’m such a big fans of this site. By the way, is there any way that I can separate the function into different class? Such as put all the create body/bodydef into a child class, so that it’s more readable and organized.

    Love you works!

  • Hi, Emanuele your tutorials are great! I have a question about this. I have tried to attach a box movie clip on the boxes. They move like the physics debug draw but the middle one is not rotated. Also if i trace the rotation of the middle box it is also 0. Why is this happening?

    Thank you.

  • This took me forever to figure out but box2d’s registration points are centered. You will need to center your mc’s otherwise the positioning won’t be the same.