[Unity/유니티] 기초-탑다운 2D RPG: 대화창 UI 구축하기[B22]

개요

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

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

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

유니티 강좌 기초 채널 Basic

---

탑다운 2D RPG: 대화창 UI 구축하기[B22]

1. 대화창 UI

UI-Image 생성

Pixel Perfect 체크

대화창으로 사용할 UI 판넬을 Border 값을 입력해 잘라준다.

Source Image에 UI 판넬을 넣고 타입 변경

Alt와 Shift를 동시에 누르고 아래쪽에 앵커를 두어 채우기를 한다.

UI 크기 조절과 여백 추가

• 대화창 UI는 대부분의 탑다운 2D RPG 게임에서 화면 아래쪽에 조금 가득 채우듯이 존재한다. 그래서 UI로 사용할  스프라이트에 Sprite Editor를 사용해 Border 값을 주고 Image Type을 Sliced로 변경해서, 이미지 크기를 변경했을때 깨지지 않도록 한다.
• 그 후에 앵커를 활용해 Alt 키와 Shift키를 눌려 아래쪽으로 고정시키고, 위 캡처의 버튼처럼 채우기 모양의 버튼을 클릭하면 이미지가 변경된다. 이때 포지션 값이 Left와 Right로 바뀌는데, 이는 양쪽 여백을 뜻한다. 또한 Pos Y 값을 주면 아래쪽에도 여백이 생긴다.

Image 안에 Text 추가

폰트 다운로드 및 이동

잘 추가되었다.

폰트를 설정하고 일부 변경해주었다.

앵커를 활용해서 대화창 여백과 크기를 설정하고, 폰트 사이즈도 조금 늘렸다.

• 텍스트에 사용할 폰트도 다운받아서 사용했다. 폰트는 유튜브 설명란의 넥슨 메이플스토리 서체를 사용했다. 다운 받은 후에는 압축을 풀고 그냥 폰트 파일들을 유니티 에셋창에 넣어두었다.
• 이후 텍스트의 Font 항목에 사용할 폰트를 끌어다 넣고, 색상과 크기를 약간 바꾸었다. 그리고 일반적인 탑다운 2D RPG에서는 대화창의 텍스트가 왼쪽 상단부터 출력되므로, 앵커와 Alt키, Shift키를 사용해서 중심을 왼쪽에 배치하여 여백과 크기를 설정했다.

---

2. 데이터 전달

GameManager 생성(Create Empty)

스크립트 파일도 생성해서 넣어준다

//GameManager 스크립트 파일

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

public class GameManager : MonoBehaviour {
    public Text talkText;
    public GameObject scanObject;

	public void Action (GameObject scanObj) {
        scanObject = scanObj;
        talkText.text = "이것의 이름은 " + scanObject.name + "이라고 한다.";
	}
}

//PlayerAction 스크립트 파일

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

public class PlayerAction : MonoBehaviour {
    public float Speed;
    public GameManager manager;

    Rigidbody2D rigid;
    Animator anim;
    Vector3 dirVec;
    GameObject scanObject;
    float h;
    float v;
    bool isHorizonMove;

	void Awake () {
        rigid = GetComponent<Rigidbody2D>();
        anim = GetComponent<Animator>();
	}
	
	void Update () {
        //이동 값 설정
        h = Input.GetAxisRaw("Horizontal");
        v = Input.GetAxisRaw("Vertical");

        //이동 버튼 확인
        bool hDown = Input.GetButtonDown("Horizontal");
        bool vDown = Input.GetButtonDown("Vertical");
        bool hUp = Input.GetButtonUp("Horizontal");
        bool vUp = Input.GetButtonUp("Vertical");

        //이동 방향 체크
        if (hDown || vUp)   //수평
            isHorizonMove = true;
        else if (vDown || hUp)  //수직
            isHorizonMove = false;
        else if (hUp || vUp)
            isHorizonMove = h != 0;

        //애니메이션 전환
        if (anim.GetInteger("hAxisRaw") != h) {
            anim.SetBool("isChange", true);
            anim.SetInteger("hAxisRaw", (int)h);

        }
        else if (anim.GetInteger("vAxisRaw") != v) {
            anim.SetBool("isChange", true);
            anim.SetInteger("vAxisRaw", (int)v);
        }
        else
            anim.SetBool("isChange", false);

        //레이 방향 판단하기
        if (vDown && v == 1)    //위쪽 방향
            dirVec = Vector3.up;
        else if (vDown && v == -1)    //아래쪽 방향
            dirVec = Vector3.down;
        else if (hDown && h == -1)    //왼쪽 방향
            dirVec = Vector3.left;
        else if (hDown && h == 1)    //오른쪽 방향
            dirVec = Vector3.right;

        //오브젝트 스캔 출력
        if (Input.GetButtonDown("Jump") && scanObject != null)
            manager.Action(scanObject);
    }

    void FixedUpdate() {
        //수평, 수직 이동 결정
        Vector2 moveVec = isHorizonMove ? new Vector2(h, 0) : new Vector2(0, v);
        rigid.velocity = moveVec * Speed;

        //레이 사용하기
        Debug.DrawRay(rigid.position, dirVec * 0.7f, new Color(0,1,0));
        RaycastHit2D rayHit = Physics2D.Raycast(rigid.position, dirVec, 0.7f, LayerMask.GetMask("Object"));

        if (rayHit.collider != null) {
            scanObject = rayHit.collider.gameObject;    //RayCast된 오브젝트를 변수로 저장
        }
        else
            scanObject = null;
    }
}

GameManager에 Text 끌어다 놓기

Player의 Manager에 GameManager 넣기

잘 작동한다

• 지난 글에서 Ray를 사용해 플레이어가 조사 가능한 오브젝트(레이어를 Object로 설정)의 이름을 콘솔에 출력했었다. 이번 시간에는 대화창 UI를 만들었으니 이를 사용해서 출력하게 만들었다.
• 참고로 이전에 픽셀 퍼펙트를 적용하면서 해상도를 키웠더니 화면 크기가 작아져서 확대한채로 진행했었는데, 이번에 추가된 대화창은 확대에 영향을 받지 않아서 결국 메인 카메라의 해상도를 1/3정도로 낮춰서 크기가 맞게 했다.(341 x 256)

---

3. 상태 전환

대화창은 게임 시작시 없어야하므로 체크를 없애 비활성화한다

//GameManager 스크립트 파일

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

public class GameManager : MonoBehaviour {
    public GameObject talkPanel;
    public Text talkText;
    public GameObject scanObject;
    public bool isAction;   //대화창 활성화 여부 체크

	public void Action (GameObject scanObj) {
        if (isAction) { //대화창 비활성화
            isAction = false;
        }
        else {  //대화창 활성화
            isAction = true;
            scanObject = scanObj;
            talkText.text = "이것의 이름은 " + scanObject.name + "이라고 한다.";
        }

        talkPanel.SetActive(isAction);
	}
}

//PlayerAction 스크립트 파일

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

public class PlayerAction : MonoBehaviour {
    public float Speed;
    public GameManager manager;

    Rigidbody2D rigid;
    Animator anim;
    Vector3 dirVec;
    GameObject scanObject;
    float h;
    float v;
    bool isHorizonMove;

	void Awake () {
        rigid = GetComponent<Rigidbody2D>();
        anim = GetComponent<Animator>();
	}
	
	void Update () {
        //이동 값 설정
        h = manager.isAction ? 0 : Input.GetAxisRaw("Horizontal");
        v = manager.isAction ? 0 : Input.GetAxisRaw("Vertical");

        //이동 버튼 확인
        bool hDown = manager.isAction ? false : Input.GetButtonDown("Horizontal");
        bool vDown = manager.isAction ? false : Input.GetButtonDown("Vertical");
        bool hUp = manager.isAction ? false : Input.GetButtonUp("Horizontal");
        bool vUp = manager.isAction ? false : Input.GetButtonUp("Vertical");

        //이동 방향 체크
        if (hDown || vUp)   //수평
            isHorizonMove = true;
        else if (vDown || hUp)  //수직
            isHorizonMove = false;
        else if (hUp || vUp)
            isHorizonMove = h != 0;

        //애니메이션 전환
        if (anim.GetInteger("hAxisRaw") != h) {
            anim.SetBool("isChange", true);
            anim.SetInteger("hAxisRaw", (int)h);

        }
        else if (anim.GetInteger("vAxisRaw") != v) {
            anim.SetBool("isChange", true);
            anim.SetInteger("vAxisRaw", (int)v);
        }
        else
            anim.SetBool("isChange", false);

        //레이 방향 판단하기
        if (vDown && v == 1)    //위쪽 방향
            dirVec = Vector3.up;
        else if (vDown && v == -1)    //아래쪽 방향
            dirVec = Vector3.down;
        else if (hDown && h == -1)    //왼쪽 방향
            dirVec = Vector3.left;
        else if (hDown && h == 1)    //오른쪽 방향
            dirVec = Vector3.right;

        //오브젝트 스캔 출력
        if (Input.GetButtonDown("Jump") && scanObject != null) {
            manager.Action(scanObject);
        }
    }

    void FixedUpdate() {
        //수평, 수직 이동 결정
        Vector2 moveVec = isHorizonMove ? new Vector2(h, 0) : new Vector2(0, v);
        rigid.velocity = moveVec * Speed;

        //레이 사용하기
        Debug.DrawRay(rigid.position, dirVec * 0.7f, new Color(0,1,0));
        RaycastHit2D rayHit = Physics2D.Raycast(rigid.position, dirVec, 0.7f, LayerMask.GetMask("Object"));

        if (rayHit.collider != null) {
            scanObject = rayHit.collider.gameObject;    //RayCast된 오브젝트를 변수로 저장
        }
        else
            scanObject = null;
    }
}

Talk Panel에 대화창 UI를 끌어다 놓는다

실행하니 대화창 UI가 보이지 않는다.

Ludo 옆에서 스페이스바를 누르니 대화창이 뜨고, 움직여지지 않는다

다시 누르니 대화창이 없어지고 이동도 가능해졌다

• 대화창은 원래 기본적으로 대화나 조사 같은 특정 이벤트 때만 활성화되어야 하므로, 비활성화한다. 이후 스크립트 파일에 코드를 작성해서 isAction이라는 bool 변수를 활용해서 특정 오브젝트 앞에서 스페이스바를 눌렸을때 true가 되어 대화창이 뜨고, 다시 누르면 대화창이 꺼지면서 false가 되도록 한다.
• 또한 대화할 때 플레이어가 움직여서 이탈할 가능성이 있으므로, 대화창이 활성화 되었을 때는 PlayerAction 스크립트 파일의 이동 값과 이동 버튼 확인 변수들을 변경하여 플레이어 이동을 제한하도록 했다.

---

4. UI 애니메이션

대화창 UI에 Image를 추가해준다

Source Image 설정

Set Native Size를 클릭해 원본 크기대로 이미지 사이즈를 맞추었다

앵커와 중심을 오른쪽 아래에 설정하고, 여백과 크기도 일부 수정했다

애니메이션 설정을 위해서 Aniamator Controller 생성

Image에 Animator 컴포넌트를 추가한 뒤 넣어준다.

사용할 Animation도 생성

애니메이션 컨트롤러 Animator 창. 아까 만든 Animation CursorMove를 끌어다가 추가한다

위 아래로 움직이는 애니메이션을 구현하기위해서 Add ProPerty에서 Anchored Position 선택

키 프레임을 추가해서 총 3개의 Y축 값이 20 -> 30 -> 20으로 바뀌도록 변경. 실행하니 커서가 위아래로 계속 움직였다

반복해야하니 Loop Time 체크

애니메이션 속도를 조금 늦추었다

실행해보니 정상적으로 커서가 위 아래로 움직인다.

• 대화창 UI의 오른쪽 아래에 있는 커서는 따로 애니메이션 스프라이트가 존재하지 않고, 단순하게 위 아래로 움직이는 것이므로 이전과는 달리 직접 애니메이터 컨트롤러와 애니메이션을 생성했다.