[Unity/유니티] 기초-탑다운 2D RPG: 도트 타일맵으로 쉽게 준비하기[B20]

개요

유니티 입문과 독학을 위해서 아래 링크의 골드메탈님의 영상들을 보며 진행 상황 사진 또는 캡처를 올리고 배웠던 점을 요약해서 적는다.

현재는 영상들을 보고 따라하고 배우는 것에 집중할 것이며, 영상을 모두 보고 따라한 후에는 개인 프로젝트를 설계하고 직접 만드는 것이 목표다.

https://youtube.com/playlist?list=PLO-mt5Iu5TeYI4dbYwWP8JqZMC9iuUIW2 

유니티 강좌 기초 채널 Basic

---

탑다운 2D RPG: 도트 타일맵으로 쉽게 준비하기[B20]

1. 플러그인 설치

새로운 프로젝트 Unity BE3 생성

사용할 에셋을 AssetStore에서 찾았다

스프라이트만 Import한다

사용할 스프라이트들

• 에셋은 영상에서 제공해준 링크를 따라서 유니티 에셋 스토어의 탑다운 2D RPG 에셋 팩을 사용했다.

github 사이트의 tags에서 사용할 유니티 버전을 선택한다

이후 아래의 ZIP 다운로드를 클릭해 다운로드한다

• github에서 유니티 2D Extra를 다운받는다. 아무래도 몇년 전 영상이다보니 github 사이트가 영상과는 달랐고, github도 아직 제대로 써본적이 없어서 유니티를 20.3버전을 다운받아서 적용해보거나 Package Manager를 확인해 보는 등 설치에 많이 헤맸었다. 결과적으로는 영상 설명대로 우측의 Releases를 클릭해서 다운로드 하는 것보다는 위 캡처 방식대로 하는 것이 좋을 것같다.

 

설치가 정상적으로 되고 우클릭 Create 항목에 Tiles와 Brushes가 추가되었다

• Role Tile(규칙을 정할 수 있는 타일, 기본으로 제공하지 않음)을 사용하기위해서 다운 받았던 2D Extra의 Tilemap 파일과 meta 파일을 프로젝트의 Assets 폴더에 넣어 설치해주었다.

---

2. 룰 타일 만들기

새로운 Tile Palette 생성

Tilemap도 생성한다

생성한 Rule Tile의 Inspector창

Gress에 규칙을 정하였다.

Tile Palette에 드래그해서 Rule Tile을 넣었다

정해진 규칙에 따라서 타일이 변한다

• Rule Tile은 이름대로 타일에 규칙을 지정해주는 것이다. 규칙이 정해지면, 해당 규칙에 따라서 타일이 자동으로 채워지게된다.
• 따라서 룰타일을 사용하는 방법은 각 방향 스프라이트를 룰 타일에 지정하고, 규칙을 정해서 해당 타일 기준으로 화살표 방향에 타일이 있는지 없는지 정한 뒤, 타일 팔레트에 드래그해서 넣고 사용하면 된다.

HouseA 룰 타일

Soil 룰 타일

Water 룰 타일

Tree 룰 타일

• 이처럼 여러가지 룰 타일을 만들 수 있다. House A의 경우 2x3의 크기이고, Tree는 1x3이다.
• Tree의 경우에는 스프라이트가 4개다. 나무가 숲처럼 여러개가 겹쳐있을때를 위한 스프라이트가 하나 있는데, 그것을 추가할 경우 1x4가 되어 중간 타일이 2개가 되어버려서 사용이 까다롭다. 따라서 그런 경우는 일반 타일을 사용해야한다. 참고로 룰 타일의 규칙은 룰 타일끼리만 적용되며, 룰 타일 사이에 일반 타일을 끼우면 규칙이 적용되지 않는다.

Focus On 기능

Back Up Tilemap을 Focus On 했을때

Back Down을 Focus On 했을 때

• Scene 화면 우측 하단에 있는 Focus On은 타일맵 두개 이상 작업할때 유용하다. Focus On은 현재 선택한 Tilemap에 그려진 타일만 볼 수 있는 기능이다.

---

3. 애니메이션 타일

룰 타일 Flower A의 규칙창의 Output을 Animation으로 설정

Animation 설정

Flower B도 만들었다

꽃의 머리를 내렸다 올렸다하면서 애니메이션이 잘 작동한다

• Size로 애니메이션 스프라이트 창을 설정할 수 있고, Speed로 애니메이션 속도도 설정할 수 있다.

---

4. 외부 경계 설정

외부 경계로 사용할 Tilemap Borderline

• Tilemap Collider 2D와 Composite Collider 2D를 추가한다. 그리고 Rigidbody의 Body Type을 static으로 설정하고, TileMap Collider는 Used By Composite를 체크한다.

외부에 타일을 둔다

Mask Interaction 설정

설정하니 외부에 깔아둔 타일들이 모두 보이지 않게 되었다

• Tilemap Renderer에서 Mask Interaction을 사용하면 보이지 않게 설정할 수 있다.
• 참고로 Collider 표시가 보이지 않는다 경우, Composite Collider 2D에서 Geometry Type을 Outlines에서 Poligons로 바꾸면 보이게 된다.

Player 스프라이트 생성

//PlayerAction 스크립트 파일

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerAction : MonoBehaviour {
    float h;
    float v;

    Rigidbody2D rigid;

	void Awake () {
        rigid = GetComponent<Rigidbody2D>();
	}
	
	void Update () {
        h = Input.GetAxisRaw("Horizontal");
        v = Input.GetAxisRaw("Vertical");
	}

    void FixedUpdate() {
        rigid.velocity = new Vector2(h * 5, v * 5);
    }
}

 

실행하니 이동이 잘 된다

• Player 스프라이트를 만들고 Rigidbody 2D, Capsule Collider 2D와 스크립트 파일을 추가해준 뒤, 스크립트를 작성해준다. 실행하니 컨트롤에는 문제가 없었지만, 이전 프로젝트부터 보이던 배경의 검은색 선이 보기 좋지 않다.
• 참고로 Rigidbody 2D에서 Gravity Scale을 0으로만들어야 플레이어가 아래로 내려가는 상황이 일어나지 않고, Z축을 고정을 체크해야 벽이나 사물에 부딪혔을때 돌아가는 현상이 발생하지 않는다.

---

5. 픽셀 퍼펙트

Package Manager

2D Pixel Perfect를 Install한다

픽셀 퍼펙트 카메라 컴포넌트 추가

Pixel Per Unit과 아래 해상도 조절하기

검은색 선이 더이상 보이지 않는다

• 2D Pixel Perfect Camera는 Main Camera에 추가하면 된다. 추가하고 Pixel Per Unit과 해상도를 잘 맞춰서 조정하면 위 캡처처럼 실행시 검은색 선이 보이지 않는다.
• 사실 픽셀 퍼펙트 카메라만으로 없어져야 하는 것이지만, 아무래도 다른 문제가 있어서 이 유튜브 영상을 보고 겨우 해결했다. 요약하면 Sprite Atlas라는 것을 만들고, 바닥 타일이 있는 스프라이트를 넣어 Filter Mode를 Point로 바꾸면 검은색 선 문제가 해결된다.