[Cocos Creator] Tiled Map 정복하기 (3) - Object Layer 추가하기

Object Layer

Object Layer 를 통해서 주인공이나 적들이 등장할 위치를 지정할수도 있다. 맵에 미리 위치를 지정하는 방식이다.

Tiled 에디터를 실행시켜 기존에 만들었던 맵파일을 열자. 오른쪽에보면 레이어 박스가 있을것이다.

레이어 박스에 오른쪽버튼을 클릭하고 새로운 레이어 -> 오브젝트 레이어를 추가하자.

클릭하면 오브젝트 레이어 1 이라는 새로운 레이어가 추가될것이다. 이름도 알맞게 변경해보자. 필자는 Objects로 변경했다. 간단하게 오브젝트 레이어를 만들었다. 그럼 설정이 끝났으니 레이어 안에 들어갈 오브젝트를 만들어보자. 

Object 생성

오브젝트는 위쪽 툴바에 있는 파란색 아이콘들을 사용한다.

아이콘은 오브젝트 선택과 오브젝트 추가가 있다. 선택은 분홍색 모양 아이콘이며 나머지는 추가 아이콘이다. 먼저 오브젝트 추가를 해보자. 맵이 타일형식이다보니 필자는 사각형 오브젝트를 좋아한다. 사각형 아이콘을 클릭하여 원하는 타일에 추가하자. 오브젝트를 추가할 때 control (mac 은 command) 을 누른 상태로 드래그하면 타일크기에 맞게 생성된다. 

필자는 좌표로 (5, 13) 위치에 사각형 오브젝트를 생성했다. 다음으로 사각형 오브젝트의 속성을 변경해보자. 오브젝트에 마우스 오른쪽 버튼을 클릭해서 오브젝트 속성 버튼을 클릭한다. 그럼 왼쪽 속성창에 속성값들이 나올것이다. Cocos Creator 에서 오브젝트를 가져오기위해 이름을 지정해주자.

필자는 이름을  SpawnPoint로 지정했다. 설정을 완료했으면 저장을 하고 Cocos Creator Editor 로 넘어가자.

스크립트 작성

파일을 저장을 하면 Cocos Creator 노드트리에 Objects 노드가 추가될것이다.

그럼 예시로 Sprite 노드의 위치를 Tiled 에서 만들었던 사각형 오브젝트의 위치로 이동시켜보자. 이제 코딩을 할차례다. 스크립트를 하나 생성하고 아래와 같이 작성하자.

cc.Class({

extends: cc.Component,

properties: {

target: cc.Node

},

onLoad: function () {

this.tiledMap = this.node.getComponent(cc.TiledMap);

this.objects = this.tiledMap.getObjectGroup("Objects");

this.mainLayer = this.tiledMap.getLayer("Background");

this.spawnPoint = this.objects.getObject("SpawnPoint");

this.target.setPosition(this.spawnPoint.offset);

}

});

먼저 TileMap 컴포넌트를 가져온다. TileMap 컴포넌트는 레이어와 오브젝트 등, Tiled 에디터에서 만든 레이어들을 가져올 수 있다. 오브젝트 레이어는 getObjectGroup, 기타 레이어는 getLayer 로 가져온다. 들어가는 파라미터는 레이어의 이름이다. 

우리는 앞서 레이어의 이름을 Background, Objects 로 변경했으니 해당이름으로 레이어를 얻을 수 있다.

다음 오브젝트 레이어에 있는 오브젝트를 가져와야한다. 오브젝트는 getObject 로 가져올 수 있다. 우리는 SpawnPoint 이름으로 지정을 했기 때문에 파라미터 값으로  SpawnPoint 을 넣어준다.

이제 Sprite 노드의 포지션을 spawnPoint 의 포지션으로 변경하면 된다. 저장을 하고 실행해보자. 실행하면 실종된 외계인을 볼수있을것이다.

왜그런걸까? 실제로 this.spawnPoint.offset 을 콘솔에 출력해보면 (160, 416) 값이 나올것이다. 우리가 원하는 값은 이게 아닌데말이다.

이유는 Tiled 에디터와 cocos2d 의 포지션 차이다. Tiled 은 포지션 기준이 왼쪽 상단이 (0,0) 이고 cocos2d 는 왼쪽 하단이 (0,0) 이다. 그러므로 우리는 Tiled 에디터의 포지션을 cocos2d 의 포지션으로 변환을 해주어야한다.

그러기 위해서는 타일의 좌표가 필요하다. 타일은 왼쪽위에서 부터 (0, 0) 지점이고 가로 x 축, 세로 y 축인 2차원 타일 좌표다. 필자는 (5, 13) 지점에 오브젝트를 생성했으니 (5, 13) 을 얻어오면 된다. 좌표를 얻어오기 위한 getTilePos 메서드를 생성하자.

getTilePos: function (posInPixel) {

var tileSize = this.tiledMap.getTileSize();

var x = Math.floor(posInPixel.x / tileSize.width);

var y = Math.floor(posInPixel.y / tileSize.height);

return cc.v2(x, y);

}

먼저 파라미터인 posInPixel은 Tiled 에디터 기준의 포지션이다. 해당 포지션을 통해 우리는 타일의 포지션을 알 수 있다. tileSize 는 타일 1개의 너비 높이 값이다. 타일의 너비와 높이는 32로 지정을 했기 때문에 tileSize 값은 {width: 32, height: 32} 가 나올것이다. 

다음 x,y 좌표를 구한다. 현재좌표를 타일사이즈로 나누면 쉽게구할수 있다. 예로들어 (31, 31) 지점에 오브젝트를 생성했다고 가정하면 x, y 값은 floor(31 / 32, 31 / 32) = (0, 0) 이 나오게 된다. 이제 onLoad 에서 getTilePos 메서드를 호출하면 타일의 좌표를 얻을 수 있다.

cc.Class({

extends: cc.Component,

properties: {

target: cc.Node

},

onLoad: function () {

this.tiledMap = this.node.getComponent(cc.TiledMap);

this.objects = this.tiledMap.getObjectGroup("Objects");

this.mainLayer = this.tiledMap.getLayer("Background");

this.spawnPoint = this.objects.getObject("SpawnPoint");

var tilePos = this.getTilePos(this.spawnPoint.offset);

this.target.setPosition(this.spawnPoint.offset);

},

getTilePos: function (posInPixel) {

var tileSize = this.tiledMap.getTileSize();

var x = Math.floor(posInPixel.x / tileSize.width);

var y = Math.floor(posInPixel.y / tileSize.height);

return cc.v2(x, y);

}

});

하지만 아직은 Sprite의 포지선을 찾지 못했다. 이제 사용안한 프로퍼티인 mainLayer 를 사용할 차례다. 앞서 말했듯이 getLayer 는 해당 레이어를 얻어온다. 그럼 mainLayer 는 타일 레이어인 Background 의 정보가 저장되어있다. 타일 레이어는 getPositionAt 이라는 메서드를 가지는데 이 메서드는 해당 타일의 좌표의 위치를 cocos2d 픽셀단위로 돌려준다. 왼쪽 하단 기준으로 0,0 을 보내준다. 그럼 이 기능을 통해서 최종적으로 Sprite 의 포지션을 변경할 수 있다.

cc.Class({

extends: cc.Component,

properties: {

target: cc.Node

},

onLoad: function () {

this.tiledMap = this.node.getComponent(cc.TiledMap);

this.objects = this.tiledMap.getObjectGroup("Objects");

this.mainLayer = this.tiledMap.getLayer("Background");

this.spawnPoint = this.objects.getObject("SpawnPoint");

var tilePos = this.getTilePos(this.spawnPoint.offset);

var pos = this.mainLayer.getPositionAt(tilePos);

this.target.setPosition(pos.x - 480, pos.y - 320);

},

getTilePos: function (posInPixel) {

var tileSize = this.tiledMap.getTileSize();

var x = Math.floor(posInPixel.x / tileSize.width);

var y = Math.floor(posInPixel.y / tileSize.height);

return cc.v2(x, y);

}

});

포지션 x,y 에 특정값을 빼는 이유는 Cocos Creator 캔버스 자식 기준으로 중간지점이 (0, 0) 이기 때문에 너비와 높이의 반을 빼줘야한다.

이제 스크립팅은 완료됬다. 남은것은 Sprite의 속성을 변경해주자. 스크립트를 저장을 하고 Cocos Creator 에디터로 가서 Sprite 노드를 클릭하자. 

변경할 속성은 Anchor Point 와 Size 다. Anchor 는 타일이 왼쪽 아래 지점에 맞춰져있기 때문에 (0, 0) 으로 변경을 해야하고, Size 는 타일의 크기에 맞게 선택적으로 변경해준다.

이제 저장을 하고 실행하면 흰색 박스에 Sprite 가 들어가 있는 모습을 볼 수 있을것이다. 흰색 박스를 없애고 싶으면 Tiled 에디터에서 오브젝트 속성에 있는 "표시됨" 체크박스를 해제 하면 된다.

---

참고

• https://www.raywenderlich.com/29458/how-to-make-a-tile-based-game-with-cocos2d-2-x

Tiled Map 정복 시리즈

• Tiled Map 정복하기 (1) - Tiled Map Editor 설치하기
• Tiled Map 정복하기 (2) - Tiled Map Editor 사용하기
• Tiled Map 정복하기 (3) - Object Layer 추가하기
• Tiled Map 정복하기 (4) - Object 이동하기
• Tiled Map 정복하기 (5) - 충돌체 구현
• Tiled Map 정복하기 (6) - Tile Map 제거