Create non-convex, complex shapes with Box2D

If you are working with Box2D for a while, probably you have already met the problem you can’t create non-convex shapes. This is a problem Box2D faces for years, as you can see from this post, and due to Box2D’s structure itself, we will never be able to create concave shapes.

That’s why some 3rd party libraries like PhysicsEditor allow us to break a concave shape into a set of convex shapes and make possible the creation of complex bodies.

Antoan Angelov, the author of the optimized version of the Box2d slicing engine, strikes back with another great Box2D class called b2Separator.

« The class is called b2Separator, and yes – it is made to work specifically with Box2D! What does it do, you ask? Well, we all hate when we have to make a more complex, non-convex shape for our b2Body – because we have to manually make many b2Fixtures, and make those really confusing and time-wasting calculations to see how each fixture is supposed to fit in with the others. Well, our troubles are now over, because what b2Separator does is separate a non-convex shape into smaller, convex shapes in a very optimized way and add them as b2Fixtures to a b2Body. All you need to do is give it the vertices of the shape you want! »

This is the fully commented class:

And this is what you can do with it:

Download the source code and all required libraries.

  • wow. Amazing. I don’t work with Box2D – But I think I’m gonna try it :). Thanks for helping

  • Scott Mitchell

    Hey Emanuele, Thanks for this tut, was great. I contribute to your web traffic everyday ;0 By checking everyday for new tuts. I was wondering if you were to carry on with the plant vs zombies or tiny wings game? Would be great to know its coming :)

    Many thanks Scott

  • WIN, thx Anton!

  • nice tutorial, thanks, i did created many shapes using Box2D..

  • Andreas Burg

    Nice, now I can stop pushing shapes through PhysicsEditor only for that very purpose. :)

    Many thanks!

  • As always, a great tutorial. I’m not the most comfortable with box2d, it’s always useful to see applications like this :)

  • MC

    I remember that in the WCK (world construcion kit from box2D alchemy port) you can create shapes, even non-convex shapes :s

  • Ari

    Like MC mentioned, the alchemy version of box2d actually has this built in.

    This is in the b2PolygonShape class:

    /// Decompose a concave polygon into a bunch of convex ones. Pass it vector of vertices
    /// in [x1, y1, x2, y2…] format. Returns a vector list of b2PolygonShapes that represent
    /// the decomposition.
    public static function Decompose(v:Vector.):Vector. {…

  • Awesome! I had gotten hung up on this step for a game in the past. Soon as I get more time put aside, need to get back to it :/

  • Olli

    Excellent tool! Now one question. Given a bitmap image what would you suggest I should do to dynamically create a body for it? Is it even feasible?

  • Pingback: Cool Stuff with the Flash Platform - 9/19/2011 | Remote Synthesis()

  • Eric

    Why do you only support CW(Clockwise Winding), according to the Box2D manual you must create polygons using CCW(Counter Clockwise windind).

    See the manual for explenation:
    http://box2d.org/manual.pdf

  • This is a great class – I’ve converted it to C++ (for use with the standard box2d library) and also to C# (for use in Unity). If anyone wants a copy tweet me @physmotone

  • Hello,sir, can you covert the code to c++? if you can, thank you very much!

  • This is a fantastic class! I’ve also converted it to C++ for use with Cocos2D-X. If anyone would like to fork it, be my guest =) http://github.com/delorenj

  • This is an old post but… You have an error in your code. There is a semicolon at the end of line 19 which declares the public class. If you delete that the rest seems to be fine.

  • Tim

    Found a bug: If three consecutive points are lying on a straight line, the algorithm fails.

    In the demo above you can see the bug if you carefully put point 1, 2 and 3 exactly horizontally next to each other.

  • Very impressive Antoan Angelov. I ported your work to javascript:

    https://github.com/isaksky/asteroids/blob/master/source/js/box_2d_separator.js

  • Pingback: From PNG to Box2D – first attempt - Emanuele Feronato()

  • Erick

    @Tim I am also experiencing this limitation when trying to align 3 points together in a linear pattern.

    I did notice this in the function documentation, which might be referring to this issue:

    * No three neighbouring points should lie on the same line segment.

    Any reason why this limitation is in place and a possible way around it?

  • Chad

    Thank you very much for this post. I ported this file to Java.
    https://github.com/cpalsulich/Box2DSeparator/blob/master/B2DSeparator.java

  • Andrew

    Do you have the .fla for demo.swf?

    I’m working on a project similar to your demo.swf where I need to drag vertices around to create an object.

    Please let me know.

    Thanks,
    Andrew

  • Lance

    can this thing work on GAME MAKER?

  • Pingback: Sometimes helter-skelter is a good thing – Extended memory()