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.
Last Post By: HannKett
Last Post By: pimms
Last Post By: breskit
Last Post By: Dani
Last Post By: tarabaz
Last Post By: riq
Last Post By: sortris
Last Post By: jcmeyer5
Last Post By: MatudaGames
Nice idea. You can automate this with a few easy computer vision algorithms. Given your subimages (individual sprites) have a transparent background:
For each subimage:
- threshold the subimage
- run an edge detection algorithm to obtain lines (not segments) corresponding to edges
- find the intersections of the lines
- add a vertex at each intersection point
Thanks again for putting this together – a great tool!
Definitely a time saver, great!
Great tool, thanks for the source aswell! I’ll see if I can insert some kind of auto edge detection.
Thanks again.
Great tool! Thanks for sharing it!
What a day-brightener!!!!
Thank you
It’s wasteful to make a physical object for each sprite. An average polygon for all sprites will be enough. Animation or something like that would make it easier to create a polygon. Also you need to save data in the XML file. With such features the tool would really be very useful. However, thank you for this one.
Great work! Thanks for sharing!!
Great! I was just going to start coding something like that. Thanks for sharing!
Another nice feature is the VertexScanner algorithm of VH. Instead of using that tool you can adopt that algorithm and put it into your code. The scanner will scan and provide you nice verticies of your sprites on runtime.
I am impressed how good it works.
andreas
how can I run this if I don’t have mac sdk installed? I only have ios?
Thanks a lottt!
Hi..
Im confuse..theres no undo?? Dude, its hard to define vertex for images o_o
Just one undo will alredy be a billion better, just save last point, and replace it when undo..
<_< or maybe Im too idiot to figure out how to do it..
that’s amazing stuff. i’ll surely use it in my code…