Archive for the 'editors' Category

VertexHelper: A physics body editor

Published by jfahrenkrug on March 23, 2010 in box2d, chipmunk, cocos2d and editors. 13 Comments Tags: , , .

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.

Editors #2

Published by riq on February 10, 2010 in cocos2d and editors. 3 Comments

To read Editors #1, please go here: Editors

cocos2d for iPhone supports different formats for the sprites, tiles and fonts. The following is a list of the editors supported by cocos2d:

Tiles

The popular tile editor called Tiled can be used to generate tile maps for cocos2d. With it, you can create orthogonal, isometric and hexagonal maps.

Tiled has 2 versions:

  • Native (QT) version: This version is constantly being updated. It is much easier to use, and has a nicer GUI. The only missing feature, as of today, is support for hexagonal maps.
  • Java version: It’s the old version, it supports hexagonal, isometric and orthogonal maps, but with an uglier GUI.

Tiled QT v.0.4.0 in action

For further information regarding how to use Tiled and cocos2d, please read: Programming guide: How to use tile maps

Download: http://mapeditor.org

Sprites

Robert Payne updated the old Texture Atlas Creator. The new version is now called  Zwoptex, and this is the new homepage: Zwoptex homepage

New features:

  • Has more arranging options
  • canvas size adjustment
  • Minimum spacing for arranging
  • A centralized way to load frames (similar to Flash)

Recently Robert also released the source code of the editor: http://www.cocos2d-iphone.org/forum/topic/4300


Zwoptex in action

For further information regarding how to use Zwoptex in cocos2d, please read: How to use Zwoptex and CCSpriteFrameCache

The guys from GameDoctors, also created an utility called mkatlas.pl to generate a compacted texture atlas from different image files. This utility is included in  the cocos2d distribution and can be found in the /tools directory.

Fonts

cocos2d has 3 ways to render fonts:

  • CCLabel: Which renders fonts using both system and custom .TTF files (introduced in v0.1)
  • CCLabelAtlas: Which renders fixed-width fonts from an image file (introduced in v0.5)
  • CCBitmapFontAtlas: Which renders variable-width fonts from an image file (introduced in v0.8)

To create images for CCLabelAtlas and CCBitmapFontAtlas you can use the following editors:

CCBitmapFontAtlas:

Hiero Font Tool editor in action

CCLabelAtlas:

Recently, the guys from Indeeo created a new editor for an improved LabelAtlas, called ALLabelAtlas.

This editor supports some effects like shadow, and it also adds support for kerning.

Download: http://www.cocos2d-iphone.org/forum/topic/4357

LabelAtlas editor

Update: tilluigi told us about a Photoshop plugin to generate SpriteSheets: http://forums.tigsource.com/index.php?topic=10578.0

If you know any other editor, please, let us know! Thanks.

Editors

Published by riq on April 4, 2009 in cocos2d and editors. 16 Comments

Are you looking for a texture atlas editor ? or for a new TileMapAtlas editor ?
Here are some projects done by the cocos2d community:

Texture Atlas Creator (http://robertjpayne.com/textureatlascreator/)
Features:

  • A simple Texture Atlas editor. Useful if you are going to use AtlasSprites!
  • It lets you import individual images
  • You can place these images withing the atlas
  • You can save the texture atlas image
  • It export the coordinates into an .xml file
  • It’s a web application

Tiled + .tga plugin, a cocos2d TileMapEditor (http://kwigbo.com/wp/2009/03/15/cocos2d-alternative-map-editor/)
Features:

  • It is a plugin of Tiled, a popular tile editor.
  • The plugin supports 3 layers: tile, code and bkgr
  • The plugin supports 2 tilesets: tiles and code
  • It lets you export the map to a .tga file (the format supported by TileMapAtlas)
  • A very good alternative to the PGU level editor

Social Widgets powered by AB-WebLog.com.