Skip to content
August 9, 2011 / Aurélien Ribon

Application: Box2D Editor 1.0

Hello again !

Another post, this time to present the recent 1.0 release of the Box2D-Editor application.

The Box2D physics engine, like every other physics engine (Chipmunk, Farseer, etc.), can only check collisions between convex polygons, with at most 8 vertices. Therefore, if you need an Eiffel Tower in your game, you need to decompose it into convex polygons and then to enter their coordinates vertex by vertex. Said “tedious task” ?

I was saying that too, that’s why I made this application (I make every app because I need them). The Box2D-Editor provides a simple yet powerful interface to easily define the outlines of your assets. The decomposition into convex polygons is then automatic, using one of the provided decomposition algorithms (Ewjordan’sMark Bayazit’s). Convex polygons with more than 8 vertices are also automatically splitted.

The only things left are to save the result and to load it directly into your games. The output format is simple so you can easily write your own loaders. A loader implementation is provided for the LibGDX Android/Desktop library.

Google code project page:
http://code.google.com/p/box2d-editor/

Demo game (to show off the loader):
http://code.google.com/p/box2d-editor/downloads/detail?name=libgdx-fixtureatlas-demo-1.0.zip

Note: if you create a loader implementation for any other library, whatever the platform (iOS, android, PC, …) and whatever the language (C++, C#, Java, objC, …), I would love to include it in the project, so others could use it too. Thanks in advance.

I really hope you will enjoy it as much as I enjoyed making it. Leave me a comment or a message if it helped you ;-)

Screenshots

The main ui, with “show grid” option enabled:

Using the built-in collision tester: 

Built-in collision tester ??

Yep, you can test your bodies by throwing balls at them, in order to make sure that the collisions looks like what you were expecting. Said pretty cool ?

How do I use it ?

The steps are described directly in the tool, and help can be spawned by clicking on the “?” buttons that lie everywhere.

Basically, you just need to start by setting the output file (top left button). If the file already exists, the editor will ask you if you want to load its content. Then, you can add assets (images) to the editor and start defining their contour. Everything will be handled for you after that. However, remember to save your result ;-)

Advertisements

17 Comments

Leave a Comment
  1. Anonymous / Aug 9 2011 17:11

    Crash launching the demo just after seeing the bottle :(

  2. Aurélien Ribon / Aug 9 2011 17:20

    What is your operating system ? WIndows 7, Ubuntu 11.04… ?
    Can you try to launch the application in a command prompt, using the command “java -jar libgdx-fixtureatlas-demo.jar” ? If it crashes it should give you the error message.

    Thanks.

  3. rsk / Aug 9 2011 19:58

    Very useful app, the demo works well for me :) Do you happen to have a template of libgdx incorporated into an android project? I couldn’t get it to work other than editing an example project which I think loaded native libraries.

  4. Aurélien Ribon / Aug 10 2011 09:12

    Therefore I’ll include a demo project for android too, so you’ll see how easy it is to get libgdx to work :)

  5. rskx / Aug 10 2011 16:28

    Thanks, I reread the readme included, I was mistaken in thinking you had to use the ndk. You should email the libgdx developer about integrating your tool. It’s exactly what I was looking for :) I think adding an explanation of the format for the output file would be good.

  6. Anonymous / Aug 10 2011 16:30

    when I double click box2d-editor.jar,no response,what happened?

  7. Anonymous / Aug 10 2011 16:37

    I find the way to launch it:)but I think it will be better derectly launched on desktop

  8. Aurélien Ribon / Aug 10 2011 21:09

    @rskx: The tool will be integrated in libgdx actually. The output format is detailed in the google code project page (at the bottom). I should include a readme with the tool.

    @anonymous: The jar is auto-executable. If it doesn’t launch, then it may be due to your JVM (OpenJDK have some issues with jars on linux). I can’t help you without more information on your system…

  9. martin / Aug 21 2011 17:25

    great tool, thanks a lot for making it available – in the box2d-editor repository and also in box2d-editor-1.0.zip there seems to be a minor mistake, in the method promptAssetsByFiles of the MainWindow class there is a call of chooser.showSaveDialog(this) instead of chooser.showOpenDialog(this) which i assume is what is meant to be called here.

    sorry if i got things wrong and thanks once more for sharing this great tool

    best and beyond

    martin

  10. martin / Aug 23 2011 12:11

    for people wanting to use this awesome tool on a mac you might want change

    button == Buttons.LEFT

    into

    button == Buttons.RIGHT

    in the class ShapeCreationInputProcessor as ctrl-left click turns into right-click on a mac, at least on mine :)

  11. Aurélien Ribon / Aug 23 2011 12:37

    Thanks!

    I updated the repository with your fix for the asset prompt dialog. Also, I’ll consider changing the input key modifiers to something that is available on every configuration ASAP (thanks Apple for using different layouts….).

  12. martin / Aug 23 2011 12:43

    yes apples think different is in some cases …

  13. vanushvaswani / Aug 27 2011 10:21

    I tried to use it on Mac OS X Snow Leopard and it doesn’t work. Says assets “[NOT FOUND]” when I try to load the test file…

  14. martin / Aug 27 2011 15:01

    vanushvaswani , I had the same problem on OS X Lion, the problem seems to be that the path is saved in windows manner. What I did was just used an empty file as base and then added the assets once more

    hope that helps

    martin

  15. Aurélien Ribon / Aug 29 2011 15:04

    Yep, the names associated to the shapes are the paths of the assets, relatively to the path of the output file. However, I’ll update the tool so it replaces every “\” with a “/” at launch, in order to uniformize things. You should then be able to load the test file on OS X.

    However, I don’t understand why OS X is not happy with “\” path separators. Linux’s OpenJDK handles them nicely. It may be due to the Java implementation running on OS X.

    By the way, the app is now 1.1 since I corrected a serious bug with assets having a width different from the height.

Trackbacks

  1. Box2D-Editor makes development of physics games easier ! | Android Development
  2. Neil Rajah design notes - part 2 - Ziggy's Games

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s