[Godot Engine] 09 - 배경과 타일 맵

본 게시글은 'HeartBeast'의 Make an Action RPG 파트의 내용을 다룹니다.
본 강의는 연계 강의이기 때문에 꼭 이전 편들을 보면서 진행하셔야 내용을 이해하시는데 어려움이 없습니다.

아홉 번째 파트인 배경과 타일 맵입니다.

저번 시간에 캐릭터 애니메이션에 대해서 여러 가지 해보고 배워보는 시간을 가졌습니다.

이번 시간에는 당연히 애니메이션은 아니고 지형을 만들기 위해서 배경과 타일 맵을 만드는 방법에 대해서

배워보는 시간을 갖도록 할 것입니다.

 

우선은 최상위 노드인 World의 노드 유형을 원래대로 돌리도록 하겠습니다.

World노드를 우클릭해서 Change Type를 선택합니다.

 

원래 유형이었던 Node2D로 변경하도록 하겠습니다. 선택하고 Change를 눌러 변경합니다.

 

그다음 + 버튼을 눌러서 노드를 생성하도록 합시다.

 

'ysort'라고 검색하고 Ysort노드를 새로 생성합니다.

 

Ysort를 제외한 바로 위에 있는 노드를 선택합시다. 이미지에서는 Bush9를 선택합니다.

여러분은 다를 수 있으니 잘 확인하시길 바랍니다.

 

선택을 하셨으면 그 상태로 Shift를 누르고 최상위 노드 World 아래에 있는 Player 노드를 선택합니다.

그러면 묶음 선택이 됩니다. 이 기능은 여러 노드를 선택할 때 자주 쓰이니 꼭 익혀 둡시다.

 

그 상태로 Ysort안으로 드래그&드롭하여 집어넣도록 합니다.

 

World 노드를 선택해두고 노드를 추가로 생성합니다. 노드 유형은 Sprite로 하겠습니다.

 

생성된 Sprite 노드를 World 노드 바로 밑으로 옮깁니다.

 

GrassBackground.png를 드래그&드롭해서 텍스처(Texture) 항목에 넣습니다.

 

아래에 있는 Offset 메뉴를 펼칩니다. 그다음 Centered 항목을 체크 해제✘합니다.

그러면 위의 이미지처럼 바뀝니다.

 

우리는 이 스프라이트를 배경으로 사용할 것인데, 그럼 끝을 잡고 늘려서 이런 식으로 써야 할까요?

끝을 잡고 늘리는 건 맞지만, 뭔가 이미지가 부적합해 보입니다.

 

그러므로 다른 방법을 사용합시다. 우선 Region 메뉴를 펼칩니다

두 번째로 Enabled를 체크✔합니다.

 

하단에 있는 TextureRegion을 클릭합니다.

 

이미지에 표시된 ⊕버튼을 눌러서 확대를 해봅시다.

 

아마 확대하자마자 바로 안보이실 텐데 창을 끝을 늘려서 좀 더 키우시고 휠버튼을 누른 상태로 드래그하시면 시점이 이동합니다.

너무 확대하셨다면 축소 버튼인 ⊖를 눌러서 축소하시면서 보이도록 맞추시면 됩니다.

 

안에 있는 이미지에서 왼쪽 모서리를 누른 상태로 드래그&드롭을 하시면 크기를 늘렸다 줄였다 할 수 있습니다.

 

한번 자유롭게 늘렸다 줄였다 해보세요.

 

스냅 모드(Snap Mode)도 한 번 건드려봅시다. 스냅 모드라고 적혀있는 부분 옆에 None˅를 눌러봅시다.

그리고 Pixel Snap을 선택합니다.

 

Pixel Snap이 설정되어 있는 상태에서는 이렇게 이미지의 픽셀을 인식해서

늘린 것을 다시 줄이면서 크기를 맞출 수 있습니다.

 

그 밑에 있는 Grid Snap도 선택해봅시다. 이 경우는 Step부분을 다음 값을 16px, 16px으로 수정해주세요.

 

그렇게 하고 나서 늘려보면 해당 한 타일에 맞춰서 크기가 늘어납니다.

왜 16px인지 정확히 아는 이유는 해당 이미지 크기(64x64)가 몇인지 알고

또, 4x4로 봤을 때 한 타일의 크기가 16px인지 알고 있기 때문입니다.

만약에 다른 타일을 하게 된다면 그에 맞는 이미지의 크기를 미리 파악하시는 게 도움이 되겠죠?

 

그리고 여러분이 텍스처 리전에서 늘리고 줄이는 값들은 여기에서 확인할 수 있습니다.

 

자 그럼 늘린 거까지는 좋은데, 뭔가 부자연스럽게 강제로 늘린 느낌이 듭니다.

이 부분을 타일링(Tiling)을 할 수 있도록 변경하여야 하는데요.

 

우선, 아래에 GrassBackground.png가 선택되어 있으시다면, 위에 있는 Import 버튼을 눌러서 전환해주세요.

 

그다음 항목 중에서 Flags - Repeat를 찾아주시고 옆에 있는 버튼을 눌러 Enabled로 변경해주세요.

 

마지막으로 아래에 있는 Reimport를 눌러 적용해주세요.

 

그다음에 크기를 늘려서 화면에 꽉 차도록 해줍시다. 정확한 크기로 설정하고 싶다면 옆에 있는

Region - Rect 항목을 수정하시면 됩니다.

 

텍스처 리전을 늘리면서 제가 설정을 잘못 건드려서 Offset이 늘어나 있습니다.

제가 원하는 방향이 아니었으므로 불 필요한 설정값은 없애고 초깃값을 유지하도록 하겠습니다.

만약에 여러분들은 문제가 없다면 이다음으로 넘어가 주시면 됩니다.

 

지금 보시면 위의 이미지에 앵커(Anchor) 부분이 딴 데가 있는 것을 볼 수 있습니다.

이 부분을 앵커라고 하는 게 고도 엔진에서는 맞는지 모르겠습니다만, 영상과 이미지 쪽에서는

대부분 앵커라고 부릅니다. 앵커에 대해서 간단하게 설명을 드리자면, 이미지의 중심축이라고 보시면 됩니다.

 

만약에 이 중심축이 이미지처럼 저런 식에 있으면 회전했을 때 그 기준으로 돌게 됩니다.

가운데에 있으면 가운데 기준으로 돌게 되겠죠 그래서 이미지의 변화에 가장 큰 연관이 있습니다.

지금 당장은 문제가 안되지만, 스크립트와 연관이 되면 이 부분은 확실히 문제가 될 수 있습니다.

바로 수정하도록 하겠습니다.

 

Offset 옆의 ↶아이콘을 눌러 주세요.

 

스프라이트가 이상한 데로 가실 텐데요 신경 쓰지 않고

아래에 Transform - Position 옆에 있는 ↶아이콘을 눌러줍시다.

 

원래 위치로 돌아오게 됩니다.

 

이전에 Centered를 해제✘하여 가운데로 앵커가 옮겨지지 않도록 변경했습니다.

만약에 가운데 앵커가 있는 게 편하시다면 다시 Centered를 체크✔ 해주시거나

옆에 잇는 ↶아이콘을 누르셔 됩니다.

여기서는 앵커를 가운데로 옮겨서 진행하기 때문에 체크✔하도록 하겠습니다.

 

 

그다음에 다시 Transform으로 넘어갑시다. 이제 Position을 수정해주셔야 하는데요

앵커가 어느 위치해야 하는지 확인해봅시다. 앵커는 화면 정중앙에 위치해야 합니다. 그래야 화면이 꽉 차겠죠?

그리고 우리 화면의 크기는 예전 파트에서 320x180(가로 320, 세로 180)으로 정하기로 했습니다.

따라서 앵커는 화면의 크기에서 1/2를 하면 중앙에 위치하게 할 수 있습니다. 바로 하도록 하죠.

 

Position의 x값을 320/2, y값을 180/2 해봅시다. 그러면 자동으로

계산돼서 160, 90으로 들어가는 것을 확인할 수 있습니다.

 

한 가지 더 남았죠? 바로 이 부분을 수정하겠습니다. 

 

그 위에 있는 Rect의 값을 다음과 같이 수정해줍시다.

 

Scene 탭으로 전환합니다.

 

배경으로 사용한 스프라이트의 이름을 'Background'로 바꿉니다.

더블클릭하거나 우클릭 후 Rename을 누르시면 바꾸실 수 있습니다.

 

이미 배경을 만들긴 했지만 또 다른 방법으로 배경을 만드는 것을 시도해보도록 합시다.

검색 창에서 'texture'를 검색하고 나오는 TextureRect를 선택합니다.

 

드래그&드롭으로 Background 스프라이트의 위에 놓습니다.

 

기존 Background 스프라이트의 눈(View)을 꺼줍니다.

이러면 삭제는 아니지만, 화면 상에서 안 보이게 됩니다.

 

배경을 하려면 이미지를 넣어야겠죠? 이전처럼 같은 이미지를 드래그&드롭으로 넣도록 합니다.

 

이 상태로 바로 늘려버리기를 해도 늘어나지 않으므로 오른쪽 항목 중 Stretch Mode에

Scale On Expand (Compat)˅라고 적힌 버튼을 눌러서 Tile로 바꿉니다.

 

그다음에 한 번 늘려봅시다.

 

크기를 딱 맞추기 위해 Rect - Size에서 수치를 수정할 수 있습니다.

 

자 이렇게서 두 가지 방법을 알아봤습니다.

그럼 어떤 게 가장 배경에 적합할까요? 뭐, 정해진 것은 없습니다.

하지만 두 가지에는 분명한 차이가 있습니다.

말이 길어질 텐데 조금 집중해서 봐주시길 바랍니다.

 

우선 첫 번째로 Sprite(2D Node)와 TextureRect(Control Node)의 차이입니다.

괄호에 넣은 부분이 중요한데요 이는 해당 노드의 유형을 적어놓은 것입니다.

 

둘 다 정해진 사용법이 있기는 합니다. 바로

주로 UI로 사용할 것이냐 아니면 스프라이트로 사용할 것이냐에 따라 차이점이 있습니다.

Control Node는 고도 엔진에서 주로 UI 구성하는 데 사용하게 됩니다.

둘 다 UI, 스프라이트 활용이 가능 하지만 주목적은 본래 자주 사용되는 곳이 있다는 것이죠
굳이 문제가 발생한다면 혼합 사용에 문제가 있을 수 있습니다 

 

예를 들자면, Control Node - 2D Node - Control Node라는 구조나
아니면, 2D Node - Control Node - 2D Node 같은 구조가 문제가 될 수 있습니다.
이런 경우 각 노드의 위치정보가 문제가 될 수 있습니다. 물론 코드로 고칠 수 있겠지만
이러면 작업을 하나 더 거치게 되므로 효율적인 작업에 문제가 되겠죠.

 

그러나 하나의 2D 노드 안에 여러 개 의 컨트롤 노드가 들어가는 건 문제가 되지 않습니다.
다음과 같은 예시를 한번 살펴봅시다:
2D Node - Control Node 1 - Control Node 2

*2D Node 
ㄴControl Node 1
   ㄴControl Node 1-1
ㄴControl Node 2

*는 최상위 노드를 의미

위의 두 가지 경우는 전혀 문제가 없음을 뜻합니다. 
본 예시에서 2D 노드와 컨트롤 노드의 유형 완전히 뒤바꿔도 보통은 문제가 없습니다.

 

따라서 이런 경우가 아니라면 TextureRect(Control Node)를 배경으로 활용해도 큰 문제는 없습니다.
그리고 가능하면 컨트롤 노드는 컨트롤 노드끼리, 2D 노드는 2D 노드끼리 엮는 게 가장 좋겠죠.

 

이해가 잘 안 되시면 이거 하나만 기억하시면 됩니다.

컨트롤 노드는 UI에! 2D 노드는 오브젝트나 스프라이트(이미지) 등으로 활용!

 

아무튼 본 강의에서는 TextureRect를 지우고 다시 Background 스프라이트의 눈을 켜도록 하겠습니다.

TextureRect를 선택하고 DELETE키나 우클릭 후 Delete Node(s)를 선택해 지우시면 됩니다.

그다음 Background 스프라이트의 감은 눈을 다시 눌러주세요.

 

게임을 실행해서 한 번 살펴보도록 합시다. 괜찮습니다 나쁘지 않네요.

 

이제 대망의 타일 맵(TileMap)을 써볼 시간입니다.

그런데 굳이, 타일 맵을 써야 하는 이유는 뭘까요? 스프라이트로 그냥 하나씩 붙일 수도 있는데 말이죠
타일 맵을 쓰는 이유는 바로 작업 속도라고 할 수 있겠네요
실제로 스프라이트를 하나씩 배치하는 것보다 타일 맵으로 페인트 칠 하듯이
빠르게 지형을 만들어 나갈 수 있습니다. 배경과 같은 한 이미지로 구성되는 건
스프라이트로 퉁칠 수 있지만, 지형은 다양해야 돼서 배치하게 된다면 손이 많이 가죠
그래서 타일 맵을 적극 활용할 수밖에 없습니다. 바로 타일 맵을 생성 하러 가봅시다.

 

씬(Scene)탭 밑에 있는 +버튼을 눌러서 노드를 생성합니다. 검색창에 'tile'이라고 검색하고 나온 결과에서

아래에 있는 TileMap을 선택한 다음 생성합니다.

 

생성된 TileMap을 Background 스프라이트 아래에 위치시킵니다.

 

오른쪽 창으로 넘어갑시다. Cell부분을 펼치시고 Size의 x와 y값을 다음과 같이 16, 16으로 변경합니다.

 

위에 있는 Tile Set 항목에서 [empty]˅를 클릭 후 나오는 New TileSet를 선택합니다.

 

TileSet을 클릭합니다.

 

텍스트 리전 때와 마찬 가지로 아래 TileSet창을 좀 키우도록 합시다.

 

하단의 ⊞버튼을 눌러서 타일 셋을 추가합니다.

 

타일 셋 추가 창에서 World폴더 안에 있는 DirtTileset.png 선택합니다.

 

확대 ⊕버튼을 눌러 창에 적당히 꽉 차도록 확대합니다.

 

이 정도면 충분할 것 같습니다.

 

진행하기 전에 타일 맵의 유형에 대해 알아봅시다.

타일 맵은 세 가지 유형이 존재하는데요.
싱글 타일(Single Tile): 한 타일 또는 묶음 타일을 하나의 구조로 구성할 때 사용합니다 

2x2 의자나 4x4 커다란 나무 같은 것을 배치할 때 사용하죠

오토 타일(Autotile): 주로 지형에 많이 쓰입니다.
아틀라스(Altas): 1x1로 이루어진 여러 가지 구조물에 적합합니다. 
여러 가지 색상의 꽃이라던가 작은 돌 타일 맵을 한데 묶어서 포함하면 필요에 따라 골라가면서 배치할 수 있습니다.

아니면 길 형태지만 하나의 타일로 이루어져 있고 골라서 선택할 때도 쓰셔도 됩니다.

 

고도 엔진 레퍼런스 타일맵 참조

고도 엔진 레퍼런스 타일맵 참조

다음 사진들은 아틀라스를 써서 배치한 모습입니다. 이렇게 길 형태를 구성하는 데 사용할 수 있습니다.

 

우리는 여기서 오토 타일을 사용할 것입니다.
오토 타일은 주로 쯔꾸르 게임 (탑뷰RPG) 방식에 많이 쓰이는 걸 보실 수 있습니다.
우리 게임도 탑뷰 방식이니 적당합니다.

 

New Autotile를 선택합니다.

 

오토 타일을 선택하고 나면 영역(Region)에 대해 지정해야 합니다.

우선 스냅(Snap) 옵션을 켭니다.

 

그다음 영역 안에 타일이 들어가도록 드래그&드롭으로 지정합니다.

 

하지만 빈 공간이 있는데요 이 부분은 인스펙터(Inspector) 뷰에서 Step 항목을 16, 16으로 지정합니다.

 

다시 영역을 지정합니다. 그다음 저장(Ctrl+S) 한번 해주시고

 

다시 씬 탭에서 TileMap노드를 선택합니다.

 

클릭하면 이런 식으로 타일을 배치할 수 있습니다.

 

하지만 크기도 크고 아직 오토 타일링이 되지 않았기 때문에 부자연스럽습니다.

되돌리기(Ctrl+Z)로 되돌린 후 다시 TileSet을 선택하도록 합시다.

 

기존에 추가한 타일 셋을 클릭합니다.

 

안쪽 영역 아무 곳이나 클릭합니다.

 

Selected Tile를 펼치시고 SubTile Size 항목에서 x와 y를 각각 16, 16으로 수정합니다.

 

그다음으로 비트 마스크(Bitmask)를 설정해봅시다. 오토 타일링에서 가장 중요한 것인데요.

비트 마스크는 고도 엔진에게 어떤 타일과 연결할지 미리 주문을 넣어놓는 거라고 생각하시면 됩니다.

우선 비트 마스크를 선택합니다.

 

그리고 비트 마스크 모드에 대해서 알아야 하는데요 모드 같은 경우

Auto Tile Bitmask mode에서 선택할 수 있습니다. 여기서도 선택할 수 있는 게

여러 가지 있는데 2x2와 3x3 (minimal) 그리고 3x3이 존재합니다.

 

우선 2x2와 3x3의 차이는 한 타일을 얼마로 쪼개는 지의 차이입니다.

 

그다음으로 타일 셋의 형태에 따라 골라야 하는 모드가 다릅니다.

각 모드에 요구하는 타일 개수가 다르기 때문에 타일 개수가 몇 개 인지 알아야 합니다.
2x2같은 경우 15개의 타일을 사용합니다.
3x3 (minimal)같은 경우 47개의 타일을 사용합니다.
3x3 같은 경우 총 256개의 타일을 사용하게 됩니다.

따라서 주어진 타일 셋에 따라서 선택하시면 됩니다. 

이러한 타일 셋을 만드는 것은 타일 새터(TileSetter)[유료]라는 프로그램을 이용해서 
만드는데 이건 나중에 기회가 되면 다루도록 하겠습니다. 관련 영상(영문)은 이걸 보시면 됩니다.
프리웨어인 타일 셋을 만드는 프로그램이 있는지는 모르겠는데

혹시 아시는 분이 있으면 댓글에 남겨주시면 감사하겠습니다.

 

우리는 47개의 타일을 가지고 있는 타일 셋이니 3x3 (minimal)로 진행하도록 하겠습니다.

Auto Tile Bitmask mode 항목에서 ˅버튼을 누르고 다음과 같이 선택합니다.

 

영역 안에서 클릭하면 비트 마스크를 설정할 수 있습니다. 클릭하면 빨간색 영역이 되는데

이게 켜진 거고 반대로 없으면 꺼진 것을 의미합니다.

참고로 클릭한 상태로 쭉 이동하면 이동 한 만큼 해당 영역이 선택됩니다.

 

지금부터 이해하시는데 어려움을 겪을 수 있으니 집중해서 봐주시길 바랍니다.

현재 타일의 주변에 8개의 타일이 있고 총 3x3, 즉 9개의 타일이 있죠?

현재 타일에서 연결된 구조를 띠려면, 현재 타일의 비트 마스크 9칸을 모두 선택해야 합니다.

 

이게 무슨 말이냐 하면 타일이 자연스럽게 배치가 되려면 타일끼리 서로 연결된 것처럼 보여야 하는데

그 부분을 지금 선택하시는 영역으로 통해 기준을 잡습니다.

 

타일 하나를 놓고 봅시다. 이것을 1번이라고 가정하겠습니다.

이건 앞으로 현재 타일, 즉 기준으로 잡는 타일을 의미합니다.

 

추가로 3개의 타일을 더 배치해 2x2 구조로 만들었습니다. 각각 2, 3, 4번이라고 하겠습니다.

이러한 형태가 되려면 비트 마스크를 다음과 같이 하여야 합니다.

 

1번 타일에서 왼쪽 아래(↙) 모서리 부분을 선택합니다.

이러면 4번 타일과 연결을 한다는 의미입니다.

 

2x2 형태를 띠려면 왼쪽 부분(←)과 아래 부분(↓)도 해줘야 2번, 3번을 연결하는 구조를 띄겠죠?

따라서 추가로 선택해주도록 합니다.

 

그리고 중앙 부분도 선택합니다. 중앙 부분을 선택하면

해당 타일 모양을 쓴다는 의미입니다.

 

이와 비슷한 맥락으로 이 부분은 싱글 론 타일(Single lone Tile)이라고 하는데

아무것도 연결이 안 되는 타일이라도 중앙을 선택하기 때문입니다.

선택하지 않으면 해당 타일은 안 쓰는 거라고 고도 엔진에서 인식합니다.

 

아까 예시를 보신 것처럼 이런 식으로

타일 하나만 배치하게 되면, 이 타일이 배치됩니다.

 

아까 싱글 론 타일이라고 말씀드린 부분의 타일도 중앙 부분을 선택해주시고

이제 왼쪽과 아래, 왼쪽 아래 타일에 대해서 설정해봅시다.

 

아까 제가 넘버링한 2x2 구조 타일을 다시 보도록 합시다.

2번 (이전의 1번)에 대한 건 방금 전에 끝났으니 왼쪽 타일을 1번으로 새로 기준을 삼고

다시 비트 마스크를 순서대로 설정해보겠습니다.

 

1번도 2번과 마찬가지로 서로 연결되어야 합니다.

따라서 1번과 연결하기 위해 오른쪽 부분(→)을 선택합니다.

1번과 4번을 연결하기 위해 오른쪽 아래 부분(↘)을 선택합니다.

1번과 3번을 연결하기 위해 아래 부분(↓)을 선택합니다.

마지막으로 1번 타일의 중앙 부분도 선택합니다.

 

그러면 다음과 같이 됩니다.

 

다시 넘버링한 2x2 타일을 봅시다. 이번에는 1번과 4번의 위치를 바꿨습니다. 

이제 1번 기준으로 비트 마스크를 순서대로 설정하도록 하겠습니다.

 

1번에서 2번과 연결하기 위해 위쪽 부분(↑)을 선택합니다.

1번에서 4번과 연결하기 위해 왼쪽 위 부분(↖)을 선택합니다.

1번에서 3번과 연결하기 위해 왼쪽 부분 (←)을 선택합니다.

마지막으로 1번 타일의 중앙 부분을 선택합니다.

 

그러면 다음과 같이 됩니다. 이쯤 되면 어느 정도 감이 잡히시죠?

 

슬슬 지겹지만, 한번 더 넘버링된 2x2 타일을 보도록 합시다.

새로이 1번 기준으로 비트 마스크를 순서대로 설정하도록 하겠습니다.

 

1번과 2번을 연결하기 위해 위쪽 부분(↑)을 선택

1번과 4번을 연결하기 위해 오른쪽 위 부분(↗)을 선택

1번과 3번을 연결하기 위해 오른쪽 부분(→)을 선택

마지막으로 1번 타일의 중앙 부분을 선택합니다.

 

그러면 다음과 같이 됩니다.

이러면 2x2 구조의 타일이 완성된 걸까요?

 

글쎄요, 이대로 배치하면 이렇게 돼버립니다. 왜 그러냐면 이 이미지와 방금까지 작업하신 것을 비교하면

한쪽 면만 그동안 한쪽 면만 비트 마스크를 설정했다는 것을 알 수 있습니다. 보시면 형태가 일치하죠?

따라서 우리가 방금까지 한 규칙을 기준으로 다른 면들도 동일하게 비트 마스크를 연결해주시면 됩니다.

 

헷갈릴 수도 있으니 하나만 더 짚고 갑시다.

1번과 3번은 이미 연결되었기 때문에 더 이상 건들 필요 없습니다.

여기서 1번에서 2번과 4번을 연결하고 그다음

3번에서는 2번과 4번을 연결합니다.

2번은 셋 다 연결하고요 4번 또한 같습니다.

 

그렇게 하면 다음과 같습니다.

지금 보시면 6개의 타일에 비트 마스크를 설정했는데요

위의 3개의 타일에도 동일하게 하시면 됩니다.

 

그러면 이렇게 됩니다.

그럼 이제 3x3 중심 타일은 다 선택하는데 외곽 타일에서 코너 부분은

선택하지 않는 것인지 의문이 드실 텐데요.

 

고도 엔진에게 반복될 부분이나 연결될 부분을 알려주고

코너가 어딘지 지정해주는 것이기 때문입니다. 만약에 코너 부분을 선택하게 되면 추가로 연결되는 부분이 있는지

엔진에서 판단하기 때문에 정확한 타일이 나오지 않고 이상하게 나오게 됩니다.

따라서 코너 부분은 선택하지 않습니다.

 

그다음으로 아래와 옆에 있는 가로 3타일, 세로 3 타일은 다음과 같이 됩니다.

코너 부분은 선택하지 않고 인접한 부분만 선택합니다.

 

이제 이 부분이 헷갈리실 수 있습니다. 하지만 우리는 하나만 기억하면 됩니다.

코너 부분은 선택하지 않는다는 사실이죠. 여기는 4x4 타일로 이루어져 있어서

그러면 안쪽만 다선 택하면 되는 것이 아닌가?

 

생각하실 수 있겠지만 자세히 보시면 갈색 점 픽셀이 하나 있을 것입니다.

이것 또한 코너를 의미하는 타일입니다.

 

이 부분을 제외하고 선택하면 이러한 형태가 됩니다.

 

나머지 타일도 마찬가지입니다. 갈색 점 픽셀이 잘 안 보인다면 더 확대하셔서 작업하시면 됩니다.

 

자 이렇게 선택하면 끝입니다. 이 상태로 씬 탭에 있는 TileMap을 선택하고요

 

한번 타일을 배치해보도록 하겠습니다.

 

Shift키를 누른 상태에서 드래그&드롭을 하면 이렇게 직선으로 타일을 배치할 수 있고

 

Shift키와 Ctrl키를 동시에 누른 상태에서 드래그&드롭하면 사각형 형태로 타일을 배치할 수 있습니다.

 

여러분의 입맛대로 타일을 배치하시면 됩니다.

 

아 그리고 이 아이콘도 변경할 수 있는데요.

 

비트 마스크 설정하던 이전 메뉴로 돌아가서 Icon버튼을 선택하고

 

원하는 타일을 클릭하시고 다시 TileMap을 누르게 되면 아이콘이 변경되어 보입니다.

 

이렇게 아이콘을 변경할 수도 있습니다.

 

그러면 게임을 실행해서 한번 보도록 하겠습니다.

 

이제 타일의 비트 마스크 설정은 방금과 같은 타일 셋 형태라면 동일하게 비트 마스크를 설정해도

무난하게 작동을 할 것입니다. 저 형태를 외우고 그냥 적용해도 상관은 없다는 말이죠

그러나 이번 글에서는 비트 마스크가 어떻게 작동되고 어떤 식으로 활용할 수 있는지에 대해서

배워봤기 때문에 글이 길어지더라도 그 부분을 다뤘던 것입니다.

 

따라서 여러분들은 그런 게 있구나 하고 넘어가시고

다음에 이러한 타일 셋에 비트 마스크를 적용하게 된다면,

이 형태를 기억하고 있다가 고대로 적용하시면 됩니다.

 

다음 파트는 동일하게 비슷한 타일 셋을 진행할 것이기 때문에 바로 이 형태를 써먹으시면 됩니다

또한 타일에 충돌을 설정하여 절벽 같은 형태를 구현하도록 하겠습니다.

그럼 다음 파트에서 뵙도록 하겠습니다.

 

+) 05/10 1~3부 게시글 통합