Understanding custom polygons in Box2D

Last week I explained The magic of compound objects with Box2D, now it’s time to understanding custom polygons.

First, let me tell you the difference between a compound object and a custom polygon.

A compound object is an object made by two or more primitive objects (like the maze I created in this tutorial).

A custom polygon is a primitive object which is different from the standard box and circle we usually find on Box2D, such as a triangle, a pentagon or any other regular or irregular polygon you can imagine.

There is only a limit: the polygon must be convex. Box2D won’t handle collisions properly with concave polygons.

From Wikipedia: « A convex polygon is a simple polygon whose interior is a convex set.
The following properties of a simple polygon are all equivalent to convexity:
Every internal angle is less than 180 degrees or equal to 180 degrees.
Every line segment between two vertices of the polygon does not go exterior to the polygon (i.e., it remains inside or on the boundary of the polygon).

A polygon that is not convex is called concave or reentrant. A concave polygon will always have an interior angle with a measure that is strictly greater than 180 degrees.

It is possible to cut a concave polygon into a set of convex polygons. »

Ok… now we are ready to write some code…

and see what happens…

Let’s look at the polygons from left to right: we have a square, a triangle, an irregular convex polygon and an irregular concave polygon.

As you can see, the concave one is not working… that’s why you cannot use concave polygons.

Try to drag objects next to the concave polygon to see how much it’s wrecked.

Now, let’s see how to create the polygon: I am going to show you how I created the triangle.

Line 70: Setting the vertexCount of the polyDef variable (declared at line 54 as b2PolygonDef).

Line 71: Declaring the first vertex, at (0,-1). This is the core of the script. From the center of the yet-to-be-created polygon, I am placing the vertex one unit (a meter, in this case, refer to Understanding pixels and meters with Box2D and how to select an object with mouse – part 2 for more information) above it. The 0 represents the horizontal distance from the center (positive: to the right; negative: to the left) and the -1 represents the vertical distance (positive: to the bottom; negative: to the top).

Lines 72-73: Placing the other vertices in the same way

The remaining lines are the same for every object creation.

Download the source code.

  • Nice work. Box2D is really powerful and useful, and I am glad you are learning it. I am probably going to teach this in my Flash class next semester and these tutorials are good starting points. Thanks!

  • anlik

    up,up,up. I come here everyday for Box2D.Thanks

  • Yes but I keep getting an error on line 134 when I export, why is this?

  • Nice, next game i’ll be using Box2D for sure.
    Thanks Emanuele!

  • Please help, with all the code I download and copy/paste (test) I get error 1046, I’m obviously not doing something? can you put me in the right direction?


  • vitaLee

    great series of tutorials on the box2d subject.
    i find them very helpful and interesting.

  • is possible auto get edge points array when you get a bitmapdata? ha ,if it can be ,great!

  • One really important thing I’ve found: you MUST set the points in a clockwise direction, or Box2D will think the shape is inside-out, with some really bizarre results.

  • fabio

    why is there an error on line 134 when exporting from the example? Can anyone help??


  • Hello,

    I’m just picking up the new version of box2d, and I can’t seem to find any information about custom shapes in the new rewritten engine. Would you be so kind as to point me in the right direction?

    Thanks for your time & cheers!


  • joe

    It dosn’t work…It pokes through the bottom and you can’t drag it with your mouse :( sorry, It was a nice idea but yeah! Anyways, thanks for trying! I love the stuff on your website!

  • Pingback: Processing meets Box2D and blob detection | der hess()

  • Pingback: Physics Environment using WebSockets and JavaScript | Heidis blog()

  • great series of tutorials on the box2d subject.