Application: Box2D Editor 1.0

Aug 9, 2011 by     52 Comments    Posted under: Desktop applications, Physics Body Editor

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 :)

52 Comments + Add Comment

  • Crash launching the demo just after seeing the bottle :(

  • 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.

  • 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.

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

  • 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.

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

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

  • @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…

  • [...] post, this time to present the recent 1.0 release of the Box2D-Editor [...]

  • 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

  • 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 :)

  • 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….).

  • yes apples think different is in some cases …

  • 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…

  • 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

  • [...] Aurelien Ribon is working on some great tools to simplify working with box2d and libgdx. He has an object editor now, which lets you draw objects that are more complex than simple rectangles, and handles the [...]

  • 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.

  • Hi,

    And first of all many thanks for the editor, great job and very helpfull.

    I went through your site and many forums but couldn t find anything related to dimensions… I mean what is the pixel per meter aspect ratio ?

    Could you simply provide it somewhere as a text reminder or better let the user define it in the editor.
    ie : 1 meter is 32 pixels (not tested it yet but I guess it should be that).

    By the way, any hope in providing an xml file instead of a binary one (would be great – especially for converting the position of the points :-) ).

    Dans tous les cas merci encore pour ton travail.

    • Well, actually I just found the way to set the size… the trick is to be stuborn and maybe a bit less speedy ;-)

      so the dimension is set :
      - .FixtureAtlas.createFixtures(Body body, String name, float width, float height)

      So just keep the compliments and …
      thanks again

      • Yep, that’s exactly that: the vertices positions are first normalized before being saved. The resulting positions are comprised in the range [0, 100] for the x-axis, and the y-axis is proportional to that ratio. 0 is the left bound of the image, and 100 is its right bound. Therefore, the PX_PER_METERS ratio depends on the image size, and is never the same.

        This non-fixed ratio is mandatory for the FixtureAtlas, because this way it does not have to know the asset size when loading the vertices positions, it just need to multiply them by 100. Then, you can provide your own PX_PER_METER ratio to the FixtureAtlas using the “width” and “height” parameters (2 params are needed since ratios are not always the same for the x-axis and the y-axis in every games).

        All of this is done to respect the separation of concerns between the models (collision bodies), and the renderers (images).

    • here nice to meet you thanks admin keep it up. its all done in favorable condition.
      spyhunter 4 crack

  • hey, Love the Box2d editor; Looking forward to the level editor. Only thing is I have no idea to make an uploader for C++ :-(. I will gladly donate a Tenner if you made one or point me to someone who has made one already.

    • The editor saves content as follows: each asset contains several shapes and several polygons.
      –> A shape is a list of vertices, defining the outlines that you draw in the editor. You don’t care about them, they are stored only for internal use in the editor.
      –> A polygon is also a list of vertices. Each polygon has at most 8 vertices and is convex. Therefore, each polygon need to be attached to a different Fixture in a box2d body (a body can contain several fixtures, as says the box2d manual).

      I just added (in the latest commit) the support of XML format for saves, so writing a custom loader may be easier than with the binary format.

      I’m no C++ expert but I’ll look into writing a C++ loader, I just need to find how to parse XML in C++. I’ll be on holidays for the next 2 weeks, but I’ll try to find time for that ;)

      • Thats great, thank you, can’t wait, have a nice holiday, have one on me

      • Thanks, I really appreciate this, it motivates me to invest time in upcoming tools.

        I added a JSON export format along to the XML one. I think that a native C++ box2d loader should be easy to write now, especially with JSON. I’ll look into it when I’ll come back. Don’t hesitate to let me know if you came up with something working until then ;)

  • hi, nice work for the Body Editor.
    but I’m stuck with the FixtureAtlas. When I use jbox2d library, it doesn’t work because actual and formal argument lists differ in length, so I use gdx library instead. And it doesn’t give me error in netbeans.

    But when I’m trying to run it, it gives me this error :

    Exception in thread “main” java.lang.UnsatisfiedLinkError: com.badlogic.gdx.physics.box2d.World.newWorld(FFZ)J
    at com.badlogic.gdx.physics.box2d.World.newWorld(Native Method)
    at com.badlogic.gdx.physics.box2d.World.(World.java:102)
    at test_slick_lagi.SimpleGame.(SimpleGame.java:61)
    at test_slick_lagi.Test_slick_lagi.main(Test_slick_lagi.java:9)

    and I have no idea what this error is about
    thx for the help :)

    • LibGDX works with wrappers to native libraries. Therefore, in your project, you need to include:

      - gdx.jar
      - gdx-natives.jar
      - gdx-backend-lwjgl.jar
      - gdx-backend-lwjgl-natives.jar

      Be careful that the libgdx box2d wrapper can’t be used on its own. You need to create a complete libgdx project (ie: use libgdx for your game) since its the only way to safely load the native libraries in memory.

      Why is the FixtureAtlas not working with jbox2d ? I know that jbox2d does not use the latest version of box2d, but the FixtureAtlas code should be portable to it. What do you mean by “actual and formal arg lists differ in length” ?

  • Hello,
    first of all: THANK YOU. really, this is a great tool.
    now to the bad part i’m experiencing, the program won’t save my project. to be exact it:
    - saves the project if i didn’t add any images
    - won’t save the project if there’s an image added
    - if i remove the image, it saves the project but i lost all the fixture made.
    I’m sugin windows 7 x64, jdk 1.7 but this also happens on ubuntu 10.10 (i’ll report java version when I reboot)
    if there’s something I can do to help you out, please let me know.

    • Wow, please excuse me for the late reply, I didn’t see your comment before.
      Do you still encounter the issue? Can you tell me what kind of image you’re trying to use (png, jpeg, etc) as well as its dimension?

      I tried the application in both windows and ubuntu, 32b and 64b, using jdk1.6. I’ll try with the 1.7, but it shouldn’t change its behavior…

  • [...] better, neater software available for building graphics and fixtures for libgdx/box2d games: The Box2D Editor. The same person has created a better texture packer GUI and is working on a physics level editor. [...]

  • I really like the concept of physics based games…they’re really interesting if you’re a physics guy! ..go to this physics games website for more such games!

  • Hi

    thanks for this post,
    I am using box2D on my new project, your app will save me a lot of time,
    but
    google blocked my ip address so I can’t download that from code.google.com
    can you give me a direct link to your app or email it to me?

    Thanks

  • I’ve been exploring for a bit for any high quality articles or
    weblog posts on this sort of house . Exploring in Yahoo I eventually
    stumbled upon this site. Studying this information So i am glad to show that I’ve a very excellent uncanny
    feeling I came upon just what I needed. I most indubitably will make sure to don?t forget this website and give
    it a look on a continuing basis.

  • I’m impressed, I must say. Rarely do I come across a blog that’s
    both educative and amusing, and without a doubt, you have hit the nail on the head.
    The problem is something which not enough folks are speaking intelligently about.
    Now i’m very happy that I came across this in my search for something concerning this.

  • After looking over a handful of the blog articles on your site, I seriously appreciate your way of writing a blog.
    I added it to my bookmark site list and will be checking back soon. Please check out my web site too and
    tell me what you think.

  • Thanks for sharing such a good opinion, paragraph is good, thats why i have read it entirely

  • I’m not that much of a internet reader to be honest but your
    sites really nice, keep it up! I’ll go ahead and bookmark your
    site to come back later on. Many thanks

  • Nice response in return of this question with genuine arguments and telling
    all concerning that.

  • What’s up, always i used to check weblog posts here in the early hours in the morning, as i like to gain knowledge of
    more and more.

  • Everything is very open with a clear explanation of the challenges.
    It was definitely informative. Your site is very useful.
    Thanks for sharing!

    • If you want latest version of spyhunter for android you just have to click ON cracksnew to get it.

  • this is a similar software for box2d editor..
    You might use this as it has 2d and 3d options.

  • amazing explanation of article is presented here. i am really grateful to you admin. keep posting.
    Alien Creeps TD v1.7.2 Cracked Apk Mod Full Unlimited Download

  • All the stuff is great i m very happy to see youer site keep it up

  • Thanks a lot for sharing this with all of us you really realize what you’re speaking about!
    Bookmarked. Kindly additionally consult with my web
    site =). We may have a hyperlink alternate contract between us

  • Thanks admin for the post and for the application box editor.

    • 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. Can you provide details about Avast Secureline as well ;)

  • what a great quality stuff you have published.

  • Hello Admin, First of all Thanks for sharing. It was definitely informative. Your site is very useful.
    corel draw x3 activation code

  • Thanks lot Good Working >>>>:)

  • Wow this is amazing. I appreciate you well done
    ccleaner 5.25 crack

  • It was really great ;)

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>