Click here to Skip to main content
13,406,787 members (53,372 online)
Click here to Skip to main content
Add your own
alternative version


9 bookmarked
Posted 1 Oct 2012

Box 2D vehicles - Part 2 (box2d polygon shape)

, 30 Oct 2012
Rate this:
Please Sign up or sign in to vote.
In the previous part (Box 2d vehicles - part 1), I showed you how to create a basic box2d car using Moscrif SDK. The following article is going to show some advanced techniques and upgrades the game.


The latest, most basic version had some deficiencies. One of the largest deficiencies was that the car’s physical body didn’t have the same shape as the bitmap drawn onto it. The car’s chassis was created as a rectangle body, but the chassis is not a rectangle in real. This article is going to show how to adapt the car’s shape onto its real shape.

Image: Car’s physical shape vs. car bitmap.

Polygon body 

Except a circle and rectangle body, box2d offers also polygon body, which allows creating all shapes of bodies. In native box2d, polygon shapes are created by some complicated structures, but Moscrif simplifies this procedure. In Moscrif, a polygon body is created by the addPolygonBody method. The addPolygonBody method is used to create a polygon body as well as a rectangle body. The difference is in the last two parameters. If the last two (sixth and seventh) parameters are integers, box2d creates a rectangle body (width is sixth parameter, height is seventh). Otherwise, if seventh parameter is not specified the method creates a polygon body. All vertex is set in an array by its x and y position. The position is calculated from the centre of the shape in pixels. Vertex must be ordered counter clock wise.

Example: Create a triangle

var triangle = [
    {x : 0, y : 50},
    {x : -50, y : -50},
    {x : 50, y : -50},
triangle = scene.addPolygonBody(this._images.wheel, #dynamic, 1.2, 1.0, 0.0, triangle);

Adding a polygon body allows creating convex polygons. A convex polygon is every polygon whose all internal angles are less than or equal to 180 degrees and every line segment between two vertices remains inside or on the boundary of the polygon. Of course, there is also a simple way to create non-convex shapes. The simplest convex shape is a triangle. The triangles are used to construct concave shapes. Constructing concave (non convex) shapes from triangles is often used also in other frameworks or SDKs including Direct3d. All concave bodies can be created by two or more triangles.

Image: A concave pentagon can be created by two convex triangles as it in the next picture.

The following code shows how to make it in Moscrif. The pentagon consists of two triangles which are connected together by a weld joint.

Example: create pentagon body

// create first triangle
var partA = [
    {x : -50, y : 50},
    {x : -50, y : -50},
    {x : 50, y : -50},
var bodyA = scene.addPolygonBody(null, #dynamic, 1.2, 1.0, 0.0, partA);
bodyA.setPosition(System.width / 2, System.height / 2);
// create second triangle
var partB = [
    {x : 50, y : 50},
    {x : 0, y : 0},
    {x : 50, y : -50},
var bodyB = scene.addPolygonBody(null, #dynamic, 1.2, 1.0, 0.0, partB);
bodyB.setPosition(System.width / 2, System.height / 2);
// connect triangles together
this._weldJoint = scene.createWeldJoint(bodyA, bodyB, System.width / 2, System.height / 2, false);

Now it is clear how to create a polygon body. So let’s change the car’s shape onto its real shape. To simplify this sample the chassis is created from a convex body:

Image: Car shape

The car’s chassis shape is defined in an array with eight vertex.

var shape = [
    {x :150,y:-21}
this._body = scene.addPolygonBody(this._images.body, #dynamic, 0.1, 0.0, 
   0.0, shape);//this._images.body.width, this._images.body.height);
this._body.z = 2;
this._body.scale = this._scale;
this._body.setPosition(x, y);

The minimum number of vertices in the body is three and the maximum is the value of the b2_maxPolygonVertices constant. The value of b2_maxPolygonVertices is usually 8 (its limitation in box2d).


This article showed how to create a polygon body in Moscrif, but also offered many useful information for all box2d developers.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Slovakia Slovakia
Author develops in various programming languages included: C++, Javascript, and PHP. Last year he creates mobile cross platform applications in Moscrif SDK.

You may also be interested in...

Comments and Discussions

QuestionGood! Pin
WuRunZhe30-Jul-14 1:06
memberWuRunZhe30-Jul-14 1:06 
GeneralMy vote of 5 Pin
Dr.Luiji4-Oct-12 6:50
memberDr.Luiji4-Oct-12 6:50 
GeneralRe: My vote of 5 Pin
PavolSatala8-Oct-12 5:55
memberPavolSatala8-Oct-12 5:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01-2016 | 2.8.180212.1 | Last Updated 30 Oct 2012
Article Copyright 2012 by PavolSatala
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid