버전이 업되어도 Tiled 의 사용방법은 달라지지 않지만, 2.x버전때와는 tmx 를 다루는 cocos2d-x 의 함수나 방법이 달라졌다.

앞서 다른 포스팅이 있지만, 간단히 다시 정리한다.



tiled 로 tmx 파일은 잘 만들었다고 가정하고,


TMXTiledMap *tileMap;


tileMap = TMXTiledMap::create("map.tmx");

this->addChild(tileMap, Z_MAP, TAG_MAP);

Size stageMapSize = tileMap->getContentSize();

log("Content size: %f, %f", stageMapSize.width, stageMapSize.height);


tmx 파일명을 이용해서 오브젝트를 만들고 레이어에 붙이면 된다.


tileMap->getContentSize() 는 픽셀 혹은 포인트로 가로 세로 크기를 리턴한다.

tileMap->getMapSize() 는 가로 세로 타일 수를 리턴한다.


적다보니 괜히 적었다. 예전 포스팅으로 충분할 거 같다.


http://zzaps.tistory.com/162


cocos2d-x 3.0 beta2 에서는 object layer 를 다루는 부분에서 변화가 있어서 추가로 작성한다.



TMXObjectGroup* objects = tileMap->getObjectGroup("Object Layer 1");

// 오브젝트 레이어어에서 Spawn01라고 지정한 속성값 읽어 오기

ValueMap objectSpawn01 = objects->getObject("spawn01");

float x = objectSpawn01["x"].asFloat();

float y = objectSpawn01["y"].asFloat();

    

log("spwan01 : (%f, %f)", x, y);



Tiled 에서 타일맵을 만들면서 오브젝트 레이어를 추가하고 spawn01 이라는 오브젝트를 넣었다면, 위 코드로 spawn01 오브젝트의 좌표를 가져올 수 있다.



오브젝트에 아래처럼 추가로 propertyName 이라는 변수를 만들고 값을 지정해 줬다면....



아래처럼 그 값을 가져올 수 있다.


// new property 에 추가한 값을 가져오는 방법

std::string propertyValue = objectSpawn01["propertyName"].asString();

log("new property : %s", propertyValue.c_str());









Posted by 똑똑한 영장류

첫 레티나 작품, 아이폰 4의 경우 해상도가 640x960 이다.


허나, cocos2d-x 를 이용해서 작업할 경우, 윈도우 사이즈를 320x480 으로 설정하고 작업을 할 수 있다.

포인트와 픽셀...어쩌구 하는 이야기들이 있다.

640x480은 픽셀이고 320x480은 포인트다.


그러나, 레티나에서의 깔끔한 화면을 위해서 포인트가 아니라 픽셀에 맞춰서 포인트의 경우보다 더 큰, 가로세로 두배가 되는 크기의 이미지를 사용해야한다.


설명이 어설프지만, 이건 기본적인 해상도 문제의 이야기니까 넘어가고...


tiled 를 이용해서 타일맵을 만들 때는 어떻게 해야할까?


결론은 타일맵의 크기도 아이폰 4 풀화면의 경우, 640x960 으로 해야한다는 것이다.


320x480으로 하면 어떻게 될까?


Map size 가 320x480 이 되도록 설정을 하고, 

타일셋을 불러와서 그렸다.



그랬더니, 아래와 같이 나왔다.


제대로 풀화면이 되려면 아래처럼 해야한다는 거다.

타일맵을 한 화면 가득한 크기로만 해야한다는 법은 없고..


결론은...

map size 는 레티나를 위한 이미지 사이즈를 다루는 것과 같다...는 것이다.


당연한 거??







Posted by 똑똑한 영장류



오브젝트 레이어 사용하기


Tiled 를 이용해서 맵을 구성할 때, 두 가지 레이어를 이용할 수 있다.

타일레이어와 오브젝트 레이어다.


타일 레이어를 이용하면 그저 배경을 만들 수 있다고 한다면,

오브젝트 레이어를 이용하면 맵 위에 나타날 오브젝트들의 속성을 설정함으로써 좀 더 프로그래밍적으로 접근할 수 있다.


일단, 

tiled 를 이용해서 타일맵을 만들고, 타일셋 이미지를 불러와서 타일 레이어에 맵을 그려준다.












다음, 오브젝트 레이어를 만들어보자.


오브젝트 레이어 추가 방법은... 쉽다...

빨간 화살표를 클릭하고 파란 화살표가 가리키는 아이콘을 클릭한다.





Object Layer 1 이라고 새로운 오브젝트 레이어가 생겼다.
이름 부분을 더블클릭하면 이름을 바꿀 수 있다. Objects 라고 바꿔보자..






오브젝트 추가 방법도... 쉽다.


빨간색 화살표가 가리키고 있는 아이콘들은 오브젝트를 만들어 주기 위한 툴이다. 파란색 화살표가 가리키는 아이콘은 만들어진 오브젝트를 선택할 때 사용하는 아이콘이다.





그 중 나는 파란 사각형을 선택한 후, 적당한 곳에 object를 하나 만들었다.


맵 상에 클릭하면 오브젝트가 하나 생기는데, 오른쪽에 Objects 레이어 아래에 이름도 없는 체크 박스가 하나 생긴다.






만들어준 오브젝트에 속성을 설정해 줘야겠다.




이름없는 체크 박스가 있는 부분을 클릭하고, 아래에 화살표가 가리키는 'object properties' 아이콘을 클릭하자.


아래처럼 속성 창이 나타나면, 이름을 정해주고, Position도 원하는대로 수정을 하자.





Position에 들어가는 값은, 픽셀값이 아니라 전체 맵의 가로세로 칸수에 따른 값이다.
참고로, 타일맵은 좌상단이 (0, 0) 이며 x 는 오른쪽으로, y 는 아래로 증가한다.
지금 예에서는 가로 20 타일, 세로 30타일이니, 가운데 아랫부분쯤되는 위치가 되겠다.





여기까지하고 저장한 후, tmx 파일과 타일셋 이미지 파일을 작업중인 프로젝트에 추가해서 테스트!


아래는 TMX 타일맵을 사용하기 위한 기본코드이다.

타일맵 읽어와서 화면에 붙여주는거다.


TMXTileMap* stageMap = TMXTiledMap::create("test.tmx");

    

this->addChild(stageMapZ_MAPTAG_MAP);

Size stageMapSize = stageMap->getContentSize();

log("Content size: %f, %f", stageMapSize.width, stageMapSize.height);



stageMap->getContentSize() 는 픽셀 혹은 포인트로 가로 세로 크기를 리턴한다.

stageMap->getMapSize() 는 가로 세로 타일 수를 리턴한다.


그럼, 오브젝트 레이어에 만들어준 오브젝트는 어떻게 사용하나?


사용방법..루틴하다..




TMXObjectGroup* objects = stageMap->getObjectGroup("Objects"); // 오브젝트 레이어의 이름

Dictionary* spawnPosition = objects->getObject("SpawnPosition"); // 오브젝트 중 이름이 'SpawnPosition' 인 녀석

    

int x = ((String*)spawnPosition->objectForKey("x"))->intValue();

int y = ((String*)spawnPosition->objectForKey("y"))->intValue(); // 오브젝트가 기본적으로 가지게 되는 좌표값 가져오기

log("position : ( %d %d )", x, y);


log 로 찍고 있는 값은 어떻게 될까?


오브젝트 속성에서 x = 9, y=22 를 입력했으니, 그 값이 그대로 나올까?


실제 실행시켜보니, 288, 255 가 출력되었다.


저장한 tmx 파일을 편집기로 열어보니 아래처럼 x, y 값이 저장되어있었다.





저 값들은 어떻게 나온걸까?


288 은 속성에서 입력해준 x 값 9 에다가 타일의 가로폭 32 를 곱한 값이다. 타일인덱스? 값이 픽셀값으로 바뀐 거다.

704도 입력한 y 값 22에다가 32를 곱한 값이다.


근데, 실행시켜서 나온 값, 288과 255는 어찌 나온건가?

288 은 같은 값이 나왔으니 그대로 이해하면 되겠다. 그럼, 255는??


타일은 좌상단이 (0,0) 을 가진다고 했다. cocos2d-x 는 좌하단이 (0,0)이다.

현재 타일맵의 세로 크기는 960이다.

상단에서부터 704가 내려온 지점은 하단에서부터는 255가 된다.


좌표계를 알아서 변환한 후, 좌하단 기준 좌표점을 되돌려주는 것으로 보인다.


근데, 또 이상한 점이 있다.


현재 오브젝트의 x 위치는 캡쳐한 이미지를 보면 알 수 있듯이, 전체 맵의 가운데 부근으로 설정했다.

게임에 사용할 화면 사이즈는 320x480 이다.

가운데는 160 부근이 되어야한다. 그 좌표에 찍어야 화면 가운데쯤에 찍히는거다.


근데, 오브젝트를 통해서 가져온 값은 288이다. 320x480 에 찍으면 오른쪽 끝부근이 된다. 가운데가 아닌거다.


(288, 255)는 640x960 맵 사이즈에서의 값인거다.


게임 화면을 320x480 으로 설정했으니, 이 값을 2로 나누어서 사용해야겠다.


레티나, HD 라는것이 여러모로 불편하게 한다.



암튼...

타일맵을 만들 때, 오브젝트 레이어에서 게임 화면에 나타날 캐릭터나 아이템들의 기본 위치를 작성해두고 코드에서는 위처럼 값을 가져와서 스프라이트를 갖다 붙이면 되겠다.





Posted by 똑똑한 영장류