Unity 2D RPG - 3. 대화창 UI 구축하기

오늘은 대화창 UI를 구축을 해볼 것이다.

우선 Hierarchy 창에서 우클릭 한후 UI > Image를 클릭하여 Canvas를 만들어주자.

 

대화창 UI

 

 

그리고 우리는 도트 이미지로 만들 것이기 때문에 Canvas의 Pixel Perfect를 눌러준다.

 

 

Image에다가 Sprite를 넣어준다.

 

 

쯔꾸르 대화창을 보면 보통 아래에 위치하면 길게 놓여져 있다.

그것을 구현해보도록 하자.

 

우선 길이를 그냥 늘려보자.

 

 

길이를 그냥 늘리게 될 경우, 이미지가 깨지게 된다.

그러면 저 Image type을 Sliced로 사용해야 한다.

그러나 그냥 사용하지는 못하고 Sprite를 직접 변할 영역과 변하지 않는 영역을 나눠줘야 한다.

( =Sprite 모서리를 잡기 위하여 Border (외곽) 값을 입력한다)

 

Sprite를 클릭하여 Sprite Editor을 눌러서 Border 값을 변경하자

 

 

Apply를 하고 Sliced로 Image Type을 바꾸면

 

 

어떤 크기로 해도 잘리지 않고, 잘 적용된다.

 

우선 화면이 어떤 해상도로 되도 대화창은 아래에 붙어있어야 하기 때문에

anchor을 건드릴 것이다.

 

 

shift를 누르면 물체까지 아래로 내려오고,

저 맨 오른쪽 걸 누르면 화면에 맞춰 가로 길이가 늘어나거나 줄어들 것이다.

그리고 alt를 누르면 기준(그림의 중앙의 파란색 동그라미)이 바뀔 것이다.

 

그리고 여백을 넣어주면 된다.

 

 

Image 밑에 Text를 만들어주자.

Text를 Anchor을 통하여 왼쪽 중간에 두어주고, 좌우로 늘려주자

마지막으로 폰트와 사이즈 그리고 여백을 정해주자.

 

 

데이터 전달

 

우리가 실행시켜서 사물 앞에서 Spacebar를 누르면 콘솔에 그 물체의 이름이 뜬다.

하지만 우리가 만든 대화창 안에 뜨지 않는다.

이번에는 이것이 가능하게 해볼 것이다.

 

물론 Text에서 바로 출력할 수도 있다.

하지만 데이터 전달을 위하여 GameManager을 사용할 것이다.

Create Empty를 눌러 GameManger(GameObject)를 생성해주자.

 

그리고 GameManager 스크립트를 만들어서 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 + "이라고 한다.";
    }

}

 

GameManager에서 Text를 수정할 수 있게  불러오기 위하여 변수를 만들자.

Action 함수를 PlayerMove에서 사용할 수 있게 public으로 만들어준다.

또한 스캔한 물체를 쓸 수 있게, scanObject 변수를 public으로 만들어주자.

 

//Action함수를 사용하기 위하여 GameManager을 불러옴
public GameManager manager;

//Scan Object
if(Input.GetButtonDown("Jump")&&scanObject!=null)
{
   //Debug.Log("This is : " + scanObject.name);
   manager.Action(scanObject);
}

 

그리고 PlayerMove.cs에 가서 GameManager을 불러오기 위하여 변수로 세워주고,

Action()을 사용하여 Raycast로 찾은 scanObject를 매개변수로 넣어줘서 실행한다.

 

이렇게 코드를 짜고 Editor을 넘어가 GameObject와 Player 두 개의 오브젝트에

새로 생긴 변수들에다가 알맞게 오브젝트들을 넣어준다.

 

그리고 실행하면

 

 

대화창에 물체를 감지하는 것처럼 구현할 수 있다.

 

상태 전환

 

우리가 지금까지 한 것을 실행하면 대화창은 항상 켜지게 되어있다.

그러나 그러면 안되고, 액션을 취하고 있을 때만 대화창이 켜지게 해야한다.

그에 맞게 코드를 수정해보자.

 

우선 대화창을 불러와보자.

 

public GameObject talkPanel;

public bool isAction;

 

이렇게 public으로 대화창을 나타내는 변수를 선언한다.

그리고 지금 액션을 취하고 있는지 상태를 나타내는 bool 값 isAction 변수를 만들어준다.

 

SetActive()을 이용하여 대화창을 끄거나 켜보자.

 

 public void Action(GameObject scanObj)
{
    if(isAction)
    {
        isAction = false;
    }

    else
    {
        isAction = true;
        scanObject = scanObj;
        talkText.text = "이것의 이름은 " + scanObject.name + "이라고 한다.";
    }

    talkPanel.SetActive(isAction);
}

 

가볍게 설명하자면 isAction(조사 액션 중)이면 다시 끝난 상태로 바꿔주거나,

isAction(조사 액션 중)이 아니라면 true로 바꾸고 scanObject를 이용하여 Text의 내용물을 수정한다.

그리고 SetActive() 함수를 통하여 isAction값에 따라 대화창을 활성화 / 비활성화 시킨다.

 

그리고 대화창이 열릴 때에는 캐릭터가 움직이면 안된다.

그래서 PlayerMove.cs의 코드도 수정해보자.

 

h와 v 그리고 hDown, vDown, hUp, vUp의 값을 isAction의 값에 따라 0이 되거나 원래의 값이 되게 하자.

삼항 연산자(? :)를 이용할 것이다.

참고로 isAction 변수는 앞에서 Action 함수를 사용하기 위하여 GameManage 변수 manager을 선언했으니

굳이 추가로 불러올 필요는 없다.

 

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");

 

isAction이 true면 위의 변수들이 모두 0과 false가 되면서 움직이지 않는 상태가 된다.

그리고 다시 Update()함수가 1초에 여러번 실행되면서 Space 다시 누르게 되면,

Action()함수가 실행되면서 isAction의 값이 false가 되고, 변수들이 다시 반대값을 가지게 되면서

움직일 수 있게 된것이다.

 

Ui 애니메이션

 

쯔꾸르 게임들이나 미연시의 대화창에 보면 글씨 옆에 조금만 아래쪽 화살표 문양이 위아래로 움직이면서 존재한다.

(다음 페이지가 있다는 것을 알리는 모양)

 

그것을 한 번 구현해보겠다.

 

우선 Image를 Panel 아래에다가 만들어주고 이름을 End Curser이라고 하자.

알맞은 Sprite를 넣어주고 Anchor을 이용하여 고정 시켜주자.

여백이나 크기 등 또한 맞춰 주도록하자.

 

 

이제 애니메이션을 만들 것이다.

 

우선 End Curser에다가 Add Component를 통하여 Animator을 넣어주도록 하자.

애니메이션들을 저장해놨던 파일에다가 새로운 Animation Controller이랑 Animation을 만들자.

 

Animator 컴포넌트에 만들었던 Controller을 넣고 Animator 창에 들어가서

Create state > Empty를 만들고, Motion에다가 만들어 놨던 애니메이션 파일을 넣어주자.

 

 

후에 Window > Animation을 눌러 창을 꺼낸다.

End Curser 오브젝트를 누르고 Add Property를 누르고 Anchored Postion(모드)을 선택한다.

Y의 값을 바꾸고 총 3개의 키프레임을 만들어서 하나의 애니메이션이 되게 한다.

 

 

그리고 Animation 파일을 눌러서 Loop Time을 눌러 반복 실행되게 하면 된다.

 

최종 모습