Archive for the ‘Game dev’ Category

Box2D mouse drawing, now with ear clipping

Saturday, October 24th, 2009

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

Box2D mouse drawing

Tuesday, October 20th, 2009

This post is obsolete, go here instead: http://www.splashdust.net/2009/10/box2d-mouse-drawing-now-with-ear-clipping/

In my physics game making endeavors I eventually came across the problem of getting arbitrary polygons in to physics simulation engines such as Box2D.

The problem is that such engines cannot handle concave polygons. And also a polygon cannot have more than a certain number of vertices (for performance reasons I would assume). So in order to feed your polygon to the engine you need to convert it to a format that the engine will be happy with. If it is a concave polygon with lots of vertices it will have to be split up into a set of less complicated convex polygons.

Since I basicly suck at math I had no clue how to do these kinds of calculations, so I turned to google to see if someone else might have already solved the issues. And indeed someone had.

Regarding the problem of concave polys and vertex limits I found a great AS3 class for polygon triangulation over here: http://actionsnippet.com/?p=1462
That class takes a polygon and spits out a bunch of triangles, which when put together assumes the same hull shape as the original polygon. This solved a lot of my problems. However, triangulation does not work when there are overlapping segments in the polygon, which might easily be the case when one jots a bunch of lines on the screen in no particular order. So I needed something to make order from that kind of mess. What I found was the Graham scan algorithm, neatly converted to AS3 at http://blog.efnx.com/as3-creating-a-convex-polygon-from-unordered-points/

Then, of course, I had to convert these classes to haxe, but that was mostly a matter of find-and-replace.

So now I have the following set up:

* Draw a bunch of line segments while the mouse button is down.

* When mousebutton comes up, feed the segments to a function; makeBody()

* If they consist of less than 8 vertices and make up a convex polygon and are in a clockwise order (checked using algorithms found here), then we reverse the vertices to make them CCW and then feed them straight to Box2D. Otherwise we’ll treat it the same way as 8 < vertices polygons.

* If it is more than 8 vertices, than we need to triangulate before Box2D gets them. And if it turns out that they cannot be triangulated, then we’ll feed them to the Graham scan to straighten them out, and then back to the triangulator to try again. If it manages to triangulate this time, then Box2D will get the result. If not, something went terribly wrong, and the whole thing will probably fall into an endless loop of Graham scanning and triangulating.

And that’s that! The result is below for you to play around with.

And here’s the source code.

Get Adobe Flash player

Instructions:

* Draw bodies using your mouse.

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

* Hold down “T” to see the shapes that make up each body.

Thanks to Zevan Rosser (www.actionsnippet.com), Schell (blog.efnx.com) and Paul Bourke (debian.fmi.uni-sofia.bg/~sergei/cgsr/docs/clockwise.htm) for posting awesome code!