VertexHelper is a nifty little tool I (jfahrenkrug) have put together while developing a cocos2d iPhone app that used a lot of different sprites. All those sprites needed a counterpart for the physics engine, namely vertices. After defining the vertices of the 2nd sprite by hand, I knew that I’d go nuts if I had to define all 40 sprite vertices like that. So I wrote a tool: VertexHelper.
It lets you graphically define vertices of sprites for Box2D and Chipmunk bodies/shapes. You can find it on github or you can download a tarball of the source.
It is really easy to use VertexHelper:
- First, you need an evenly spaced sprite sheet (every sprite in the image file has to be of the same size). For example, if your sprite sheet image is 250 x 120 pixels and every sprite is 50 x 60 pixels, then you’d have 10 sprites on your sheet (2 rows and 5 columns). Perfect.
- Simply drag the sprite sheet image onto VertexHelper and enter the number of rows and columns. You’ll see a grid appear.
- Now check the “Edit Mode” checkbox and click “around” each sprite to define it’s vertices. It’s that easy.
- VertexHelper will generate the code for either Chipmunk or Box2D that you can simply cut and paste into your project.
A word of caution: You have to make sure not to define concave polygons, since both Chipmunk and Box2D don’t support them. VertexHelper won’t warn you if you do. Also, you have to make sure that you define your coordinates in the correct order: For Box2D, they have to be counter-clockwise and clockwise for Chipmunk.
But enough of the talking, this video gives you a much better impression of what VertexHelper does and how it works:
I hope it’s useful for you and please feel free to fork it on github and make it better for everyone!
For further updates, follow me on Twitter or keep an eye on my blog.


Recent Comments