[Unity] 말풍선 UI 적용하고 대화창 구현하기

게임 내에서 정보를 알려주거나 NPC들과 대화 시 사용하는 말풍선 UI

 

Astro Cat 게임 진행에서 아주 톡톡한 역할을 해준 말풍선 UI를 구현해보겠습니당

 

 

 

우리가 만든 게임의 말풍선을 넘기는 조건은 아래와 같다.

 

1. 첫번째 말풍선을 클릭하면 두번째 말풍선으로 넘어간다.

2. 두번째 말풍선을 클릭하면 해당 말풍선이 사라지고 용이 준 아이템이  나타난다.

3. 용이 준 아이템을 Player가 Get하면 세 번째 말풍선이 나타난다.

 

 

※ 대화창 UI는 글 맨 아래 에셋을 참고하시라

 

대화창에서 창을 담당하고 있는 talkPanel을 살펴보겠다.

Unity 하이어라키에 UI>Canvas를 추가해주고 그 아래 다음과 같이 UI>Image를 추가해준다.

Canvas를 추가해줘야 게임 내 UI를 추가할 수 있다.

말풍선(talkPanel) 아래에는 UI>Text를 추가해준다.

(nameTag와 Button은 모두 UI>Image이며 선택적인 부분이다.)

 

※ 참고로 3D 게임의 UI 작업 시에는 이렇게 2D로 설정해놓고 하면 편하다.

 

말풍선의 Anchor/Inspector 설정은 다음과 같이 해주었다.

적당히 원하는 정도를 찾아 Scene/Game을 봐가며 해주면 된다.

 

그래도 이미지가 이상하다 싶으면(ex.직사각형 이미지를 원하는데 정사각형 이미지일 경우) 해당 이미지 에셋을 클릭한 후

Window>2D>sprite editor를 통해 조정해주면 된다.

 

 

 

다음으로 대화창에서 대화를 담당하는 Text UI로 넘어간다.

Text UI에서 가장 중요한 설정은 Overflow와 Best Fit이다!

다음과 같이 설정하면 아마 사용자가 원하는 모양의 UI가 나올 것이다.

(폰트도 다운받아서 바꿔주면 찐 게임같으니 웬만하면 바꾸자.)

 

 

이제 그럼 UI는 완성되었으니 앞서 말한 '말풍선을 넘기는 조건'을 충족할 수 있게 코드를 짜보자.

 

UI를 관리할 코드에는 맨 위에 아래 코드를 꼭 추가해준다.

using UnityEngine.UI;

 

우선 첫 번째 조건과 두 번째 조건을 충족시키기 위해 말풍선을 클릭해서 넘기는 방법에 대해 알아보자.

우리가 정해준 원리는 다음과 같다.

마우스 왼쪽 버튼을 클릭하는 수에 따라 말풍선 안의 text가 바뀐다.

    public GameObject talkPanel;
    public Text text;
    int clickCount = 0; 
    int getGem = false;
    
    void Update()
    {
        
        if (Input.GetMouseButtonDown(0))
        {

            if (clickCount == 0)
            {
                text.text = "보석은 잘 모아두면 분명 쓸모가 있을 것이다.\n이 은하계를 탈출하고 싶다면 보석을 꼭 기억해!";
                clickCount++; // 1
            }

            else if (!getGem && clickCount == 1) // 보석 나타남
            {
                talkPanel.SetActive(false);
                GameObject.Find("Gem").transform.Find("Diamond").gameObject.SetActive(true);
                clickCount++; // 2
            }

            else if (lastClick && clickCount == 2) // 마지막 말풍선 비활성화
            { 
                talkPanel.SetActive(false);
            }

            Debug.Log(getGem);
            Debug.Log(clickCount);
        }

    }

 

Input.GetMouseButton(0) & (텍스트).text & SetActive와 함께라면 어디든지 갈 수 있어

public GameObject랑 public Text에 꼭 UI Object 할당해주기

 

 

사실 여기까지만 해도 말풍선 구현은 끝!

 

세 번째 조건은 다음 글에서 아이템 Get 구현과 함께 충족시킬 예정

 

👇 추가 완료 

[Unity] 아이템 구현하기

 

 

 

 

---

말풍선 UI의 출처는 아래 에셋 스토어! 

Top-Down 2D RPG Assets Pack | 2D 캐릭터 | Unity Asset Store