Box2D mouse drawing, now with ear clipping

In my previous post I presented an example of drawing arbitrary shapes for Box2d using the mouse. It was done using triangulation to deal with concave shapes. However, triangulation does produce a lot of vertices (as seen when holding down T), which isn’t really necessary and hogs the physics engine a lot. Since we can have up to 8 vertices per shape in a Box2d body, the number of shapes can be reduced by generating a collection of <8 vertex shapes instead of 3 vertex ones.

After som digging I found this post at Touch My Pixel’s blog, featuring a few awsome AS3 classes for doing this trick. After converting to haXe and making a minor alteration to limit the numer of vertices per shape to <8 I replaced the trianglutaion by this and it works great! It also got rid of most of the strange lines sometimes shooting out of the Box2d  shapes (probably due to lots of very small angles produced by the previous triangulation method).

Also, I figured I should try out the new haxe port of Box2d recently put on googlecode by Heinz Hoelzer. So this swf is haxe all the way! :)

I also changed the style of debugDraw and added the mouse dragging feature from the box2d tests this time.

You can grab the source code for this version here if you wish.

Update: I have now made the source code compatible with hxcpp and neash, so it will compile for the C++ target. Box2D performance is about twice as fast as for the flash target. Nice!

Get Adobe Flash player

Instructions:

* Draw bodies using your mouse.

* Hold shift while drawing to make static bodies (ground).

Tags: , , , ,

9 Responses to “Box2D mouse drawing, now with ear clipping”

  1. [...] some clever triangulation code from Splashdust.net, there’s a simple method for creating any custom shape from an array of Point objects.  With [...]

  2. [...] other projects has been the name of the game – namely the ear clipping optimisation code from Splashdust.net, combined with some of my own cobbled-together more optimised code for tracing curved [...]

  3. alex says:

    I love this example, but I personally use Flash Builder, so could you give me an idea on how to convert this to normal as3?

    –alex

    • Splashdust says:

      You could use the haXe compiler to generate AS3 code from the haXe sources by adding this at the end of compile-swf.hxml:
      –next
      -main B2DMouseDraw
      -as3 as3outputdir

      But that produces some junk files from the haxe libraries, and the generated code isn’t exactly elegant… So it might be better to manually convert the functions that you need, and use the original as3 version of the ear clipping algorithm from touch my pixel (link is above in the post). Converting from haxe to AS3 and vice versa is fairly simple since the syntax is nearly identical. Just paste the haxe code in a AS3 document and fix compiler errors until they are all resolved :)

  4. PReP says:

    I haven’t delved into the code or tech behind this thing yet.
    But i have to say, the execution/result is kinda awesome
    - and sparks interest to say the least :)
    Kudos. /PReP

  5. mike says:

    Hi,

    I’m trying to convert the haxe source to CPP for use in an Iphone Objective-C++ project.

    I’m new to haxe and the command:

    haxe.exe -main B2DMouseDraw -cpp cpp –remap flash:neash –remap neko:cpp -lib nme -lib neash

    returns Class not found nme.Manager…

    I’m using neash 1.0.3, nme 2.0.1, and hxcpp 2.0.6… I think these flags were for some older versions of the haxe libraries mentioned.

    Do you have any suggestions on how to generate the proper cpp’s?

    Thanks,

    Michael

  6. [...] Random bits of geeky stuff « AS3 vs haXe performance Box2D mouse drawing, now with ear clipping [...]

  7. All people deserve good life time and business loans or financial loan would make it better. Just because people’s freedom is based on money.

Leave a Reply