Tuesday, December 9, 2008

How to use the TileMap editor for cocos2d

Since v0.5 cocos2d for iPhone supports TileMaps. Instead of using the original cocos2d tilemap format (cocos2d for PC) it is using a new format based on the PGU tilemap editor.

This editor lets you edit tiles, tile maps and tile codes.

How do you install the PGU tilemap editor ?
To run the PGU level editor do:
home:~ $ cd src/pgu_level_editor
home:~/src/pgu_level_editor $ python leveledit.py level.tga

The left panel is the map.
The upper-right panel are the tiles.
The bottom-right panel are the codes.

The map is loaded from the file: level.tga
The tiles are loaded from the file: tiles.tga
The codes are loaded from the file: codes.tga

For more info see the leveledit.ini file. eg: you can change the tiles' size.

Features and limitations:
  • cocos2d v0.6.1 (an earlier) doesn't support codes, so ignore this feature for the moment.
  • PGU tile editor uses the TGA RGB channels to identify the codes, tiles' positions and (mmm... what else? I'm not sure). So, you can only have 256 different tiles per TileMap.
IMPORTANT: You need to convert the tiles.tga file to PNG (eg: tiles.png). To convert a TGA file to PNG you can use the GIMP editor.

How to use these files from cocos2d for iPhone:
  • Include the tiles.png and level.tga to your XCode project
  • See the AtlasDemo example: TestAtlas.m. In particular see the Atlas3 demo.

-(id) init
{
if( ![super init] )
return nil;

TileMapAtlas *tilemap = [TileMapAtlas tileMapAtlasWithTileFile:@"tiles.png" mapFile:@"level.tga" tileWidth:16 tileHeight:16];
[self add:tilemap];


return self;
}

Update: Added missing pyobjc-1.4 package

14 comments:

Unknown said...

Hi, I'm using Leopard, and went through the special install instructions for that, but am getting this error:

Traceback (most recent call last):
File "leveledit.py", line 71, in module
import pygame
ImportError: No module named pygame

any ideas?

Unknown said...

Hi, I'm using Leopard, and went through the special install instructions for that, but am getting this error:

Traceback (most recent call last):
File "leveledit.py", line 71, in module
import pygame
ImportError: No module named pygame

any ideas?

riq said...

It seems that pygame was not installed.

Favo Yang 杨仲伟 said...

Mike, you are using another python, try this

$ /usr/local/bin/python leveledit.py level.tga

or find all pythons on your mac, and try them one by one.

$ where python

just.danne said...

sorry for a stupid question where and how exactly am i supposed to type this?
:

home:~ $ cd src/pgu_level_editor
home:~/src/pgu_level_editor $ python leveledit.py level.tga

Calibra said...

where can i find tutorials on using the editor?

thanks for the tutorial, worked great!!!

Zeeeler said...

hii nice tutorial i m having problem using tiled map in my cocos2d application. i am using a palette and a map which has been included in the project but it is not being shown on the screen and their isnt any error as well.

riq said...

@zeeler: could you describe the steps that your are doing ?
Please, post it here:
http://groups.google.com/group/cocos2d-iphone-discuss

Zeeeler said...

i created a map using tiled-0.7.2 from where i save the map as .tga file and then i import the .tga file into my cocos2d project and the palette.png which i use for map creation. Then i create TileMapAtlas using the two files....
Is this the right way???

Nate said...

How do you specify the png file for codes, or is a separate code file not allowed/supported?

Anonymous said...

hello im sorry to ask this stupid question, but when it says how to run the editor, and lists code, where do i enter the commands?

Anonymous said...

dont use GPU. use java based instead

Andy said...

Zeeeler,

The layers in your tilemap must have specific names:

tile
code
bkgr

Make sure the tile one is the one with the visuals, otherwise it won't be recognized. I had the same problem, and renaming the layer fixed it.

Guido said...

hello, i've created the map and can load it on screen, the problem is i see it on screen as each tile drawing 4 little tiles from the map, and sizes are correct, 16x16 everywhere. any idea? thanks