고도 엔진에서 TileMapLayer을 통한 타일 셋 및 타일 맵 사용

타일맵 및 타일셋 지정 방법

고도 엔진에서 타일맵 및 셋을 지정하고 2D 맵 구성하기

타일 셋의 이미지 형태

기본적으로 타일 셋은 한 이미지 파일에 각 종류의 타입을 담은 그림 파일이다.

위 이미지 파일은 각 4*3 으로 표현된 이미지 파일 타일셋을 나타낸 것이다.

즉 일정한 영역으로 나누어 하나의 타일을 바닥 붙이듯 작업할 수 있는 것이다.

이러한 방법은 고도 엔진에서 TileMapLayer 을 통해 작업을 수행할 수 있다.

타일 맵 적용 방법

엔진에서 타일 맵 레이어를 노드로 추가한 뒤, 해당 타일 맵 레이어에 사용할 타일 셋을 등록해야 한다. 즉 상기 TileMapLayer 는 타일 맵을 설치하기 위한 가상의 공간 영역이며, 이 공간 영역에 어떤 텍스처를 사용할지를 나타내는 것이 타일 셋이다. 타일 셋에는 각 땅 영역과 반복 패턴 등을 지정할 수 있다.

TileMapLayer에 TileSet을 추가한 뒤, 아래 작업 영역을 보면 TileSet 탭과 TileMap 탭이 존재하는 것을 확인할 수 있다. TileSet 에서 원하는 타일 셋의 패턴 작업을 한 뒤 TileMap을 통해 원하는 타일 맵을 바로 맵에 드로잉 할 수 있다.

사용하려는 타일 맵을 타일 셋 공간으로 드래그한다. 그러면 새 타일이 추가되는데, 아니요를 눌러 자동으로 타일을 지정하지 않도록 한다. 타일 범위를 우리가 직접 수동으로 지정하기 위함이다.

기본 설정에 따르면, 텍스처 영역은 16px 로 지정되어 있는데, 이 이미지는 4*3 이다. 지금 16px 로 조각을 내면 수십개의 행렬이 생겨버리는데, 이미지 크기에 맞게끔 텍스처 영역을 늘려줘야 한다.

텍스처 영역을 적당히 늘리고, 지금 여기서는 각 패턴들을 하나의 타일로 볼 것이기 때문에, CTRL 키를 누름과 동시에 드래그 해 준다. 이제 지형 정보를 생성해야 한다. 이 텍스처를 사용해서 어떤 지형을 그릴 수 있는지에 대한 정보이다. 예를 들어 땅 지형은 테두리가 존재할수도 있고, 지형 상황에 따라 랜덤으로 자갈이 생성될 수도, 모양에 따라 다른 타일이 나와야할 수도 있다. 그러한 정보들을 담은 집합체가 지형 정보이다.

TileMapLayer 의 인스펙터 창에서 Terrain Sets 영역에 새 테란을 추가한다. 이 생성한 테란은 테란 집합임에 유의한다. 이 테란 집합안에 이제 실제 테란 종류 하나를 또 추가할 수 있다.

요소 추가 버튼이 두 개가 있는데, Terrains Sets 을 추가하는 것이 아니라, 이미 생성한 Terrain 집합 내에 요소를 추가해야 한다는 것에 유의해야 한다.

이 부분에서 많이 헷갈렸는데, 그나마 이해 할 방법이 있다. 다른 것에 비유하자면, 맵에는 겨울 지형이 있을 수도 있고, 여름 지형이 있을 수도 있다. 겨울 지형에는 눈에 덮인 땅 지형, 눈에 뒤덮인 집과 같은 지형이 있고, 여름 지형에는 바다, 수영장과 같은 지형이 있을 수 있다. 즉 테란 집합은 겨울, 여름과 같은 큰 대 주제의 집합체를 말하고 각 집합 안에 어떤 지형 정보를 세팅할 것인지에 대해서 내부 테란에 정의할 수 있다.

즉 상기 사진에서, 전체 테란 집합 하나를 생성했고, 그 집합 안에 4개의 지형을 생성한다.

위 타일에서, 땅 타일, 하트 타일, 별 타일, 번개 타일 이렇게 4가지가 존재하기 때문에 실제 테란은 4개만 생성했고, 이 모두 하나의 주제인 타일 집합 속에 존재한다. 이 때 땅 타일은 패턴을 적용하여 테두리가 자동으로 생성되게끔 해야 한다. 즉 땅 타일을 직접 하나씩 구성해도 상관은 없지만, 오토 타일링 기능을 사용하기 위해서 하나의 땅으로 보고 패턴을 적용할 수 있다.

다시 타일 셋 탭에 잘 보면 칠하기 모드가 있다. 칠하기 모드를 들어가고, 속성은 지형 모드로 변경한다. 그리고 지형을 Terrain Set 0 으로 지정한다. 이 0이 방금 생성한 테란 집합 1번째* 눈 지형* 를 의미한다. 그리고, Terrain 항목이 생기는 것을 확인할 수 있다.

각 생성한 테란이 표시되는데, 보기 편하도록 오른쪽 인스펙터에서 이름을 바꿀 수 있다. 나의 경우는 땅, 하트 땅, 별 땅, 번개 땅으로 하겠다.

여기서 칠하기는, 실제 눈에 보이는 타일의 색상을 칠하는 것이 아니라 타일의 패턴 정보를 색상으로 나타내는 것이다. 즉 영역 표시이다. 별 테란을 지정한 뒤 별의 정 중앙에 색칠 해 준다.

스크롤을 해서 화면을 축소 및 확대 할 수 있다. 정 중앙에 저렇게 색칠을 해 주면, 별로 지형을 칠할 때 별만 출력한다는 의미이다. 이게 무슨 말인지는 후술하겠다. 나머지 하트, 번개도 진행 해 준다.

잠시 여기까지만 하고, 타일 맵 모드로 와 본다. 타일 셋의 설정을 마무리 짓고, 실제 맵에 타일을 그려볼 시간이다.

오른쪽 인스펙터의 모드를 다시 아무거나 다른 것으로 바꿨다가 제일 상위걸로 바꾸면, 타일 맵의 지형 부분에 지형 세트 0, 그리고 우리가 생성한 각 지형들이 표시됨을 확인할 수 있다.

원하는 타일 지형을 선택한 뒤 맵에 클릭하면 설치되는 것을 확인할 수 있다. 우클릭으로 제거할 수 있다. 그런데 문제는 드래그하면 겹쳐서 설치되는 것을 확인할 수 있다.

이는 오른쪽 TileMapLayer 에서 각 타일 사이즈를 조절 해 줘야 한다. 타일 셋에서 타일을 4*3으로 조절한 것 처럼 타일 맵 레이어에서도 타일 셋의 타일 사이즈를 4*3이 되도록 똑같은 px 사이즈로 조절해야 한다. 필자의 경우 위에서 88px, 88px로 지정했기 때문에 하나의 타일은 88*88px을 가진다. 따라서 간격도 88px로 되어야 하기 때문에, 여기서도 88px, 88px 로 지정 해 준다.

그러면 격자에 맞게끔 잘 설치되는 것을 확인할 수 있다. 이번에는 일반 땅을 지정할 차례인데, 다시 타일 셋에 돌아가고, 칠하기 모드를 일반 땅으로 지정하고 칠해야 한다. 이 때 유의해야 할 것은 땅 지형은 단순히 하나의 타일로만 구성되는 것이 아니라 테두리 타일도 포함한 형태이기 때문에 유기적으로 묶어서 칠해야 한다. 우선 정 중앙 빈 땅 타일은 기본적으로 어떤 땅을 클릭하든 설치되면 되기 때문에 정 중앙을 칠해준다.

(참고로 타일 셋의 사이즈를 조절했기 때문인지 칠해지는 정사각형의 크기가 조금 더 커진 것을 확인할 수 있다.) 이 상태에서 타일 맵으로 돌아가 땅 지형을 선택하고 그리면 땅 지형만 설치되는 것을 확인할 수 있다.

그런데 문제는 지금부터다. 땅을 설치할 때 왼쪽 방향으로 설치한다면 왼쪽에 비어있는 경계선은 자동으로 경계선 타일이 설치되게끔 해야 한다.

왼쪽 경계선의 타일에는 우측 방향에 한 번만 색칠해본다. 그러면 타일을 설치하다가, 우측 방향에 타일과 엮어서 해당 타일을 설치한다는 의미이다.

이 타일 패턴의 의미는, 마우스를 클릭하는 타일의 우측 방향에 해당 테란의 다른 타일이 있는 경우에 이 타일이 출력되게끔 한다는 것을 의미한다. 즉 위 상태에서 타일 맵으로 돌아와서 그려보면,

위와 같은 타일이 있을 때, 왼쪽 부분에 설치하면, 해당 타일의 우측 방향에 이미 테란의 다른 타일이 있기 때문에 왼쪽 경계선 타일이 자동으로 선정되어 설치된다.

한편 일반 땅 영역을 설치할 때도, 경계선 왼쪽이 자동으로 설치되게끔 유기적으로 엮어주기 위해서 중앙 타일도 왼쪽편에 칠해준다.

그러면 칠할 때 자동으로 왼쪽 편에만 경계가 생긴는 것을 확인할 수 있다.

즉 위와 같이 칠해주어 각 타일이 유기적으로 엮여있음을 나타낼 수 있다.

지형 정보 없이 타일 설치

지형 정보 없이 타일을 설치할 수도 있는데, 지형 탭이 아닌 타일 탭에서 타일 단위로 선택해서 설치할 수 있다. 이 때는 지형 패턴 정보에 종속되지 아니한다.