Using RUBE (Really Useful Box2D Editor) in your Flash AS3 projects

I always follow with great interest iforce2d‘s tutorials because they are plenty of interesting ideas. I was inspired by one of such tutorials when I wrote Flying arrows simulation with Box2D and Box2D flying arrows engine – first attempt, so when I realized the author released a full featured Box2D editor called RUBE (Really Useful Box2D Editor) I absolutely wanted to try it.

Following my rule “no pointless reviews”, let me say RUBE is awesome, a must have if you are a Box2D developer. Fullstop.

Now, let me show you how to use it to improve our AS3 coding, since it does not export AS3 code, and it includes more features than the ones included in AS3 v2.1a version.

Although the editor is really powerful and fully documented allowing you to do in a few minutes stuff like this:

I’ll start with a simpler project, building the totem of the first level of Totem destroyer. Here is what I did with RUBE:

And once I export the world in JSON, everything is coded inside, from fixtures to world gravity, from body types to velocities, and so on.

This is the JSON I got from my totem:

Now it’s time to import the JSON in our AS3 class, decode it and build the Box2D world out of it. Since this is just an example, I am retrieving only body types, positions and fixtures, but obviously you can build the whole world.

Before you start, download and install Mike Chamber’s as3corelib which offers a great JSON support.

This is the commented script:

And this is the result:

The totem is done in just a few lines of code, but obviously the most interesting thing is I would have been able to build a totem made by 1000 bricks in exactly the same amount of lines.

Download the source code with all required libraries. I am also going to create a RUBE to AS3 class to have the ultimate Box2D editor.

  • Jimmie

    Throws an Error for me:

    Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: http://www.emanueleferonato.com/2012/12/19/using-rube-really-useful-box2d-editor-in-your-flash-as3-projects/totem.json
    at Main()

    Looks like the url for that file doesn’t exist or isn’t loading.

  • Diogo

    The first image of the post is not showing, and the flash is an enpty gray area :(

  • Emanuele Feronato

    fixed! thank you!!

  • payampap

    Thank You
    Usefull

  • Wow, that was fast. Nice job!

  • Pingback: Using RUBE (Really Useful Box2D Editor) in your Flash AS3 projects – Emanuele Feronato « eaflash()

  • cnsoft

    it seems that adobe has provide original json process function. no need use that as3corelib.

  • codeBeast

    1. new json function is for flash player 11 so it’s still a good idea to use the as3corelib as you need to make games available to the widest possible audience.

    2. I am mucking around with the editor an yes it’s amazing. I hope you post a few more tutorials with regards collision testing etc… or does that have to be taken care of like always in Box2d and this is merely a tool for developing the visuals.

    3. Performance: Is the json file translated straight to box2d code and the performance therefore exactly the same as normal Box2d ie: Slow on mobile???

  • Husky

    Pretty cool!

  • Jacques

    Emanuele, this is great. I didn’t know about RUBE until this post. I’m curious to know how you would compare this tool to using the World Construction Kit (http://www.sideroller.com/wck/)? The WCK is my general go-to framework for my Box2D projects, but with a good RUBE to AS3 class, I might make the switch :)

  • hey there just a question

    can i use this editor to get the code and use it in javascript box2dweb???

    do you know any box2dweb editor like this?

    thanks and sorry for my bad english =D

  • Julio
    There are some box2dweb examples on the main page, and in the trial download :)

  • Simon

    Hi Emaneuele, thanks for posting the tutorial it’s been a great help. I’ve run into a problem though after I bought R.U.B.E and am trying to load my own level:

    After parsing the JSON file and creating the box2d world everything is upside down, even with the y-pos check you have when creating each body. Anything I may have missed?

  • Hey Emanuele,

    Thank you for all the post you’ve done, I mean, about everything. This is just very generous.
    Thank to this post, I’ve decided to use RUBE to create my world.

    I’ve adapted your code to work with customs body (multiple fixtures).
    There was only one line in your code that I did’nt get:

    “// look at body y position to prevent it to be upside down”

    As my world was looking good, mostly very similar shapes, I didn’t pay attention that they were upside down…
    But still at the right position…

    Could you explain how to avois that? I mean, if you have few secondes… of course.
    Thank you again anyway.

    Jonathan

  • Hey,

    Awesome stuff, I’m suprised that tool is not really well known.
    I saw you can also have custom properties to your objects. I’ll work on some full starling/box2d integration in my next game project.

    Small question : I didn’t try http://www.sideroller.com/wck/. Is it that faster than as3 box2d lib, because I don’t see much update since a year.

    Nice work, cheers.

  • Hey,

    Awesome stuff, I’m suprised that tool is not really well known.
    I saw you can also have custom properties to your objects. I’ll work on some full starling/box2d integration in my next game project.

    Small question : I didn’t try http://www.sideroller.com/wck/. Is it that faster than as3 box2d lib, because I don’t see much update since a year.

    Nice work, cheers.

  • Sharat

    Hi Emaanuele,

    I have tried your material. It was very useful to integrate JSON into flash. I was wondering. I get an error when i include a circle in the scene. Do i have to define circle as well because the defection is only for polygons. How can i load all the data of the JSON file including density, restitution and friction. I could not get to do that and also do i acess the objects that have been created with the JSON file.
    Thank you very much for the light on this topic.
    Regards,
    Sharat

  • Sharat

    Solved the problem by making different objects before JSONLoaded event. Really awesome. Thanks you so much for the Light towards this topic.

    Regards,
    Sharat

  • Pingback: Kyle Li | R.U.B.E to Processing()

  • See also this loader made by Rob VanCuren, it seems to have all joints implemented (at least those available in Box2D AS3 v2.1a:
    https://bitbucket.org/pixeltoyfactory/rube-loader
    Demo here: http://www.pixeltoyfactory.com/rube/