준비물.
1. cocos2d-x :: http://cocos2d-x.org
2. tiled :: http://www.mapeditor.org/
3. tile sets :: 구글이나 제작
(이하 내용중 용어는 tiled와 cocos를 기준으로 한다.)
타일맵은 두 가지 형태가 있다.
1. Orthogonal
2. Isometric
이해하기 쉽게 보면 정면에서 보느냐 대각선에서 보느냐의 차이로 보면 된다. ( 퀄리티의 차이가 아님 )
시각적인 면에서는 크게 차이나지 않지만, 개발자 입장에선 리소스의 형태에 차이가 있으니 꼭 제대로 알고 결정에 신중해야 할 것이다.
프로젝트 중간에 타일맵 형태를 변경하는 것은 좌표체계나 생산해놓은 리소스의 변경에 큰 영향을 미칠 수 있다.
이 글은 Isometric 타일맵을 cocos에 적용시키는 것을 목표로 한다.
먼저 리소스를 제작해 보았다.
본인은 가로 64픽셀, 세로 32픽셀 크기로 한개의 타일 크기로 잡았다.
후에 레이어를 이용해서 오브젝트나 이미지를 사용하기 위해서도 기준이 되는 크기를 정해놓고 작업하는 것이 수월할 것이다.
1.준비물 2번인 Tiled를 설치하고 실행한뒤에 새로운 타일맵을 하나 생성한다.
예제로 사용할 타일 이미지의 크기가 64*32 픽셀이였기 때문에 맵을 생성할때 타일의 크기를 동일하게 지정한다.
2. 준배해놓은 리소스를 타일셋(Tilesets)에 등록한다.
이때 타일 한개의 크기를 제대로 지정해주어야 한다. 여기서 지정한 크기대로 이미지를 자르기 때문에 크기설정에 오류가 있다면
타일이 제대로 배치되지 않는다.
3. 타일이 제대로 적용 되는지 삐져나가거나 다른 타일에 간섭하진 않는지 확인해봐야 한다.
바닥과 동일하게 벽면을 표시하기 위한 테스트 타일셋을 추가해서 그려 보았다.
벽을 추가하면서 바닥과 벽이 같은 타일에 표시되어야 하기 때문에 레이어를 구분했다.
바닥은 Background로 벽은 Wall로 레이어를 생성하고 타일을 그려넣었다.
이제 cocos2d-x 에서 타일맵을 불러올 차례다.
먼저 타일맵 저장은 프로젝트 폴더 안에 "Resources" 에 넣는다. 해당폴더 안에 tilemap이라는 폴더를 만들어서 넣어도 되고,
그냥 넣어도 되지만, 차후에 쉬운 경로관리를 위해 이미지파일과 타일맵 파일을 잘 구분해서 넣어준다.
헤더 내용 추가
private 속성으로 포인터 변수 2개를 추가한다.
private:
cocos2d::TMXTiledMap *_tileMap;
cocos2d::TMXLayer *_background;
Cpp파일 내부의 init 함수에 내용 추가
std::string file = "TileMap.tmx"; // 저장한 타일맵의 파일명 (하위폴더 포함 ex; "tiled\Tilemap.tmx")
auto str = String::createWithContentsOfFile(FileUtils::getInstance()->fullPathForFilename(file.c_str()).c_str());
_tileMap = TMXTiledMap::createWithXML(str->getCString(), "");
_background = _tileMap->layerNamed("Background");
addChild(_tileMap, -1);
위의 소스를 추가하고 실행해보면 아래와 같이 결과를 확인할 수 있다.
참고
