타일맵

cocos2d에서 타일맵을 생성하는 두가지 방법이 있습니다.

• TMX 타일맵 포멧 이용(신규, 유연함, 권장됨)
• PGU 타일맵 포멧 이용(이전, 사양세)

v0.8.1 이후, 게임에 Tiled를 사용하여 타일맵을 생성할 수 있습니다.

Tiled는 OS/X, 윈도우즈, 리눅스에서 돌아가는 자바 어플리케이션입니다. Tiled를 사용하여 맵을 생성하는 방법이 여기에 설명되에 었습니다.

• Tiled로 맵 생성하기

cocos2d는 TMX 맵을 다음과 같이 지원합니다. :

• 방위:
  • 정사각맵
  • 마름모맵(사각측면뷰)
  • 육각맵 (왼쪽-오른쪽 수직선. 위-아래 수평선은 지원하지 않음. Tiled에서 지원하지 않을 것으로 보임)
• 타일:
  • 임베디드 타일은 지원하지 않습니다.(내장 이미지를 사용하는 타일셋)
  • embedded 타일셋만 지원됩니다.(타일셋은 내장되나 이미지는 안되는)
  • cocos2d v0.8.1는 모든 레이어에 한 개의 타일셋만 지원합니다.
  • cocos2d v0.8.2는 한 레이어당 많아야 하나의 타일셋만 지원합니다.
• 레이어:
  • 레이어 수 무제한
  • 각 레이어는 내부적으로 TMXLayer(AtlasSpriteManager의 서브클래스)에 의해 표현됩니다.
  • 각 타일은 AtlasSprite(TMXLayer의 상위)으로 표현됩니다.

cocos2d는 타일셋의 내장 이미지를 지원하지 않습니다.(그러나 맵 파일에 내장된 타일셋은 지원합니다.) 대신 sprite sheet 이미지(텍스쳐 아틀라스의 별칭)를 직접 생성하야여 합니다.

내장 이미지를 타일셋에 정장하지 않도록 tiled를 사용하기

$ cd bin/tiled-0.7.2/
$ java -jar tiled

Tiled에서 다음을 따라하세요. :

• Edit → Preferences → Saving
• Layer Options:
  • Use binary encoding: ON (“텍스트” 인코딩은 cocos2d에서 지원되지 않습니다.)
  • Compress layer data: ON (비압축 데이터 또한 지원됩니다.)
• Tilset Options:
  • Embed images (PNG): OFF (내장 이미지는 지원되지 않습니다.)

새로운 맵을 생성할 때 주의점으로 Map Size는 수직/수평 타일들의 숫자와 관계가 있으며 맵의 픽셀수와는 관계가 없습니다. 이는 iPhone이 지원할 맵 사이즈에 제한을 받는다는 것입니다.(user comment : 44×44 픽셀 작업으로 100×100 픽셀을 본 적이 있으나 400×200은 동작하지 않았습니다.(타일들이 검정색이 되어 버렸습니다.))

맵에 사용할 타일셋은 반드시 맵 파일로 임베디드되어야 합니다. Tiled에서 이는 “Tileset Manager”에서 조정합니다.(Tilesets → Tileset Manager) 여러분은 컬럼에서 타일셋 리스트의 타일셋 이름 오른쪽에 ”(Embeded)” 라는 컬럼을 확인하는 것이 좋습니다. The tilesets for your map must be embedded into the map file. In Tiled this is controlled in the “Tileset Manager” (accessed via: Tilesets → Tileset Manager ). You should see ”(Embedded)” in the column to the right of the tileset name in the list of tilesets. 패스스트링을 확인하면, 여러분은 리스트에서 row를 선택하고, 내장 타일셋으로 변환할 오른쪽 Embed icon을 선택하면 됩니다.

만약 여러분이 다른 툴을 사용하고 있거나 파일을 열어서 확인하고 싶다면 *.xml 파일을 텍스트 또는 XML 에디터로 열어서 <tileset> 노드를 확인하세요. 파일 이름과 source 속성이 포함되어 있으면 여러분은 cocos2d-iphone에서 동작하지 않을 외부 타일셋을 쓰고 있는 것입니다.

유용한 이미지팩이 있습니다. :

• mkatlas.pl a command line texture atlas creator (perl)
• zwoptex a visual texture atlas creator (flash)
• Packer a visual texture atlas creator (java)

이 툴들을 사용하면 개별 이미지에서 sprite sheets를 생성할 수 있습니다.

스프라이트 시트의 제한 :

• 최대 사이즈: 1024×1024 (iPhone 3G가 지원하는 최대 사이즈)
• 각 타일은 모두 같은 사이즈이어야 합니다.

옵션:

• margin: the space in pixels in the margins
• spacing: the space in pixels between the tiles

margin은 2, spaceing은 2를 사용할 것을 권장합니다.

spritesheet-artifact-fixer는 스프라이트시트를 수정할 수 있는 cocos2d의 소형툴입니다.

이는 타일의 외곽선을 복사하고 간격/여백 픽셀을 조정합니다. 이론적으로 간격/여백 픽셀은 렌더링되지 않지만 가끔 예제에서는(특히 안티알리아스 텍스쳐와 3D 투영을 사용하면) 렌더링 됩니다.

툴 사용법 :

$ cd cocos2d/tools
$ python spritesheet-artifact-fixer.py -f spritesheet.png -x 32 -y 32 -m 2 -s 2

Tiled에 사용된 64×32 맵의 좌표는 :

• (0,0): 좌상단
• (63,31): 우하단

A tile's GID is the tile's Global IDentifier. It is an unsigned int that goes from 1 until the quantity of tiles.

If you have 5 different tiles then:

• Tile 0 will have GID 1
• Tile 1 will have GID 2
• Tile 2 will have GID 3
• and so on.

The GID 0 is used to represent to empty tile.

TMXTiledMap *map = [TMXTiledMap tiledMapWithTMXFile:@"hexa-test.tmx"];
[self addChild:map];

디폴트에서 모든 타일은 알리아스됩니다. 안티알리아스 타일을 생성하려면 다음을 따라야합니다. :

 
// create a TMX map
TMXTiledMap *map = [TMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];
[self addChild:map];
 
// iterate over all the "layers" (atlas sprite managers)
// and set them as 'antialias' 
for( TMXLayer* child in [map children] ) {
    [[child texture] setAntiAliasTexParameters];
}

Full example:

• tests/TileMapTest.m

TMXTiledMap *map = [TMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];		
TMXLayer *layer = [map layerNamed:@"Layer 0"];
 
AtlasSprite *tile = [layer tileAt:ccp(0,63)];
tile.anchorPoint = ccp(0.5f, 0.5f);

TMXTiledMap *map = [TMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];		
TMXLayer *layer = [map layerNamed:@"Layer 0"];
 
unsigned int gid = [layer tileGIDAt:ccp(0,63)];

TMXTiledMap *map = [TMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];		
TMXLayer *layer = [map layerNamed:@"Layer 0"];
 
[layer setTileGID:gid2 at:ccp(3,y)];

TMXTiledMap *map = [TMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];		
TMXLayer *layer = [map layerNamed:@"Layer 0"];
 
[layer removeTileAt:ccp(15,15)];

TMXTiledMap *map = [TMXTiledMap tiledMapWithTMXFile:@"orthogonal-test2.tmx"];		
TMXLayer *layer = [map layerNamed:@"Layer 0"];
 
CGSize s = [layer layerSize];
for( int x=0; x<s.width;x++) {
	for( int y=0; y< s.height; y++ ) {
		unsigned int tmpgid = [layer tileGIDAt:ccp(x,y)];
		[layer setTileGID:tmpgid+1 at:ccp(x,y)];
	}
}

Since cocos2d v0.5.0, you can use the PGU Tile maps.

Since the format is not very flexible (is has limitations with it's sizes) and the editor seems to has some bugs, this format is deprecated since v0.8.1. You will be able to continue using it with your old game, but it's usage is not recommended.

Instead, use the recommened TMX Tile Map.

Some articles about this format:

• read/write in TileMapAtlas
• How to use the PGU tile editor
• Plugin to generate PGU maps with the Tiled editor