게임에서 플레이어들에게 보여지는 것들은 플레이 캐릭터, npc, 적, UI 그리고 게임 세계인 배경이다. 2D 게임의 탑뷰 방식에서는 어떻게 배경을 보여주는 것이 좋을지 알아보겠습니다. 탑뷰 방식은 고전 게임이나 예전 2D RPG 장르에서 많이 사용하는 방식입니다. 따라서 배경의 그림이 화려하지 않으며 깔끔하면서도 반복적인 지형을 보여 줍니다. 예를 들어 초원의 풀이 있는 곳, 나무 형태, 절벽, 집들이 똑같고 패턴화되어서 배경을 이룹니다. 다양하고 화려한 방법으로도 표현을 할 수 있지만 넓은 게임 세계를 표현하기 위해서 단순한 그림 위주로 패턴을 만들어 게임월드를 만듭니다. 방법은 지형을 정사각형으로 타일화해서 지형을 그려주듯이 생성하는 것입니다.
주로 타일 한 개의 크기를 32x32 픽셀로 하기 때문에 9조각으로 그리는 타일맵은 96x96 이미지를 갖습니다. 이 크기의 캔버스로 그림툴에서 그림을 그린 후에 유니티로 가져와서 슬라이스를 합니다. 좀 더 방대한 세계에서 다양한 부분을 보여주고 싶다면 타일맵 스프라이트 아틀라스의 크기를 늘리고 더 많은 그림을 그려 넣으면 됩니다.
타일맵으로 세계를 그려 나가기 전에 타일맵(Tilemap)에 대해 알아보겠습니다.
타일맵은 Grid 컴포넌트를 갖고 있는 부모 오브젝트와 타일맵위치와 이미지를 랜더링 하는 Tilemap과 Tilemap Renderer 컴포넌트를 갖는 자식 오브젝트로 구성되어 있습니다. 자식 오브젝트는 여러 개의 그룹으로 구성해서 관리할 수 있으며 Tilemap Renderer에 있는 order in layer를 통해서 플레이어에게 먼저 보여지는 것을 정할 수 있습니다. 예를 들어서 나무, 바위, 울타리 등의 그림이 그려진 타일이 초원, 돌바닥, 흙바닥 타일보다 위에 보여지려면 order in layer를 설정해 주면 원하는 결과물을 볼 수 있습니다.
타일맵은 타일이라는 물감을 이용하여 브러쉬로 붓질하듯이 칠하는 개념이라고 보면 이해하기 쉽습니다. 이러한 타일맵으로 게임 세계를 만들려면 두 가지는 필요합니다. 첫번째는 Canvas 준비이고 두번째는 Paint와 Brush이다. 비유를 한 것인데 Canvas는 Grid의 자식으로 있는 Tilemap Renderer 오브젝트라고 보면 되며, Paint와 Brush는 Tile와 Palette라고 이해하면 됩니다. 따라서 타일맵을 붓질하듯이 칠하기 위해서는 몇 가지 세팅이 필요합니다.
1. Unity Tilemap Editor --> 유니티 패키지 매니저를 통해 다운로드 및 설치
2. 2D Extras --> Rule Tile에서 바로 설명
Rule Tile이란?
먼저 Rule Tile의 개념부터 알아야 합니다. Rule Tile은 타일 간에 어떤 조건을 만들어서 경계면에 타일이 그려질지 안 그려질지를 정하는 것으로 브러쉬에 이 룰이 적용되면서 맵이 그려지도록 하는 기능으로써 월드맵을 그릴 때 빠르고 직관적으로 작업을 할 수 있도록 합니다. 이 기능을 사용하기 위해서는 먼저 2D Extras라는 패키지를 다운로드 해야 하는데 이는 package manager에서 다운받을 수 있습니다. Package 화면 우측 상단에서 Unity Registry를 선택하고 2D를 클릭하면 몇 개의 목록이 있는데 이 중 2D Extras 클릭해서 다운로드 하면 됩니다.
Rule Tile 생성을 위해서는 project뷰 우클릭 creat-2D-Tiles-Rule Tile을 클릭해서 생성합니다. 생성한 Rule Tile은 inspector뷰에서 tiling Rules에 배치에 맞게 규칙을 추가해 줍니다.
위 그림 inspector에서 보이는 것이 타일링 룰(tiling rules)이라고 합니다. 몇 가지 규칙이 있습니다. 우선 이미지를 가장 우측칸에 드래그 드롭해서 지정해 줍니다. Collider는 sprite이고 output은 single입니다. 다만 경계선 타일이 아닌 경우 output을 random으로 지정해서 할당한 타일 개수를 무작위로 그리도록 할 수 있습니다.
옆에 9칸에 각각 표시된 그림들이 있는데 각 칸을 누르면 화살표 또는 X 표시로 변경됩니다. 이를 통해 타일을 그릴 때 각 타일의 룰을 지정해 줄 수 있습니다.
룰 설명
1. 가운데 회색 동그라미는 현재의 타일입니다.
2. 초록색 화살표는 해당 방향으로 타일을 연계해서 그려나갈 수 있다는 표시입니다.
3. 빨간색 엑스(X)는 해당 방향으로 타일을 연계해서 그릴 수 없다는 표시입니다.
룰 설정 후에는 타일 팔레트를 만듭니다. 유니티 상단 Window-2D-Tile Palette 클릭하면 팔레트 창이 열립니다. 창에서 Create New Palette를 클릭해서 팔레트를 만들고 팔레트 타일맵 스프라이트를 그래그 드롭합니다. 이제 타일맵을 타일에 그릴 수 있는 Paint 재료를 Brush할 수 있는 Palette 세팅이 되었습니다.
다음은 타일 브러쉬를 그릴 수 있는 일종의 Canvas를 만들 차례입니다. Hierarchy뷰에서 마우스 우클릭 create-Empty를 클릭해서 빈 오브젝트를 생성해 줍니다. 이름을 Grid로 변경하고 Grid 컴포넌트를 검색해서 추가해 넣습니다. cell layout은 Rectangle로 설정해 줍니다. cell swizzle은 XYZ로 기본값 그대로 둡니다. Grid 오브젝트를 클릭한 상태로 마우스 우클릭 2D Object-TileMap-Rectangular를 선택하고 이름을 TilemapFloor로 변경해 줍니다. 다시 Grid 오브젝트를 클릭한 상태로 같은 방법으로 한 개 더 생성해 주고 이름을 TilemapWall로 변경해 줍니다. TilemapFloor로 돌아와서 바닥으로 괜찮은 타일을 선택해서 칠해 줍니다. 팔레트에서 B를 누르고 Grid에서 마우스를 클릭한 상태로 드래그 하면 페인트 처럼 타일이 그려지고 연계되는 부분은 Tiling Rules에 의해 규칙대로 그려집니다. 적당히 바닥을 칠한 후에 TilemapWall을 선택하고 벽을 칠해 줍니다. 여기서 TilemapWall에 있는 Tilemap Renderer 컴포넌트에서 order in Layer를 TilemapFloor의 order in Layer 숫자보다 더 큰 수로 지정해 줍니다. 단 이 숫자가 플레이어보다는 낮아야 캐릭터가 보입니다.
- TilemapFloor order in Layer 0
- TilemapWall order in Layer 1~2
- Play Charater order in Layer 1
타입맵 브러쉬를 통해 어느 정도 게임 월드가 그려졌다면 마지막으로 TilemapWall을 선택한 상태에서 Tilemap Collider2D를 검색해서 추가해 주고 해당 오브젝트의 태그를 Wall로 지정해 줍니다.
게임을 실행해 보기 전에 타일맵 사용법을 간략 요약하면 다음과 같습니다.
1. 타일 에셋 다운로드 또는 직접 작업한 그림을 유니티에 드래그 앤 드롭
2. 유니티 Hierarchy뷰 공간에 우클릭 2D Object - Tilemap - Rectangular 선택하면 자동으로 Grid와 tilemap(자식) 생성
3. tilemap자식 오브젝트 선택 후 Ctrl + D 복사해서 각각 이름 변경 및 order in layer 수치 설정
4. 유니티 상단 Window - 2D - Tile Palette 선택 팔레트 창 나옴
5. 팔레트창에서 create new palette 눌러서 팔레트 이름 및 폴더 선택
6. 팔레트 빈 공간에 Project뷰에 있는 타일 스프라이드 드래그 앤 드롭
7. 팔레트에서 타일 클릭 후 맵 제작
위 그림에서 선택된 Active Tilemap은 TilemapFloor 입니다. 선택은 Hierarchy뷰에서 Grid의 자식 오브젝트를 클릭해도 되며, 타일 팔레트 Active Tilemap을 선택하면 작업하고자 하는 자식 오브젝트를 선택할 수 있습니다.
조심할 점은 Active Tilemap을 변경하고 타일을 칠할 때 잘 구분해서 칠해야 합니다. 바닥(floor)을 칠하는데 TilemapWall로 해놓고 칠하면 나중에 다 바꿔줘야 하는 번거로움이 있습니다. 예를 들어서 캐릭터 일러스트를 그릴 때는 캐릭터와 배경을 나누어 그립니다. 왜냐하면 캐릭터에만 효과를 주거나 할 때 레이어를 구분해 사용하면 매우 편하기 때문인데 이와 같은 이치라고 보면 됩니다. 저는 벽 타일에는 콜라이더에 충돌 태그를 붙여서 캐릭터가 벽에 충돌 시 게임오버 처리를 하려고 하는데 실수로 벽 타일을 선택한 상태에서 TilemapFloor에 벽을 그려 넣으면 이 타일은 제가 의도하는 Wall tag가 없는 무늬만 벽인 타일이 되는 겁니다. 플레이하면 캐릭터가 이 벽에 충돌하지 않고 뚫고 지나가는 현상이 발생하는 것입니다. 따라서 타일맵 작업 시에는 그려 넣고자 하는 tile과 적용시키려는 tilemap이 맞는지 꼭 확인해야 합니다.
게임을 실행하면 픽셀 아트 타일과 벽으로 형성된 월드에서 벡터 그림 스타일 캐릭터를 조작해서 이동할 수 있습니다.
여기저기 캐릭터를 이동도 시켜보고 벽에 충돌해서 충돌 애니메이션이 나오는지 확인해 봅니다. 조금씩 게임처럼 보이기는 하지만 지금은 게임 월드에서 캐릭터의 움직임과 충돌만 발생할 뿐 게임의 목표와 실패(Game Over) 조건과 판정이 없습니다. 다음에는 게임 스테이지의 성공 조건, 트리거 이벤트와 함께 관련 정보를 플레이어에게 보여주는 UI 발생 이벤트에 대해서 다루겠습니다.