유니티 UI에서 채팅형식으로 보여주려면?

유니티에서 방금 올린 대화 내용을 채팅형 UI로 보여주려면, 대화가 채팅 앱처럼 아래로 스크롤되면서 표시되도록 UI를 설계하고, 대사를 하나씩 순차적으로 추가하는 방식으로 구현해야 합니다. 이를 위해 Unity의 Scroll View와 Content를 사용해 대화를 동적으로 추가하는 방법을 설명하겠습니다.

1. Unity에서 기본 UI 설정

1.1. Scroll View 설정

1. Canvas에서 UI > Scroll View를 생성합니다.
2. Scroll View의 하위에 자동으로 Viewport와 Content가 생성됩니다.
3. Content 오브젝트는 나중에 대화를 동적으로 추가할 위치입니다. Content의 Vertical Layout Group과 Content Size Fitter를 설정해 자동으로 채팅이 추가되도록 합니다.

Scroll View 설정

• Scroll View는 대화를 스크롤할 수 있는 영역을 제공합니다.
• Content는 대화 텍스트가 추가되는 실제 공간입니다.
• Viewport는 Scroll View에서 보이는 부분을 지정합니다.

1.2. Content Layout 설정

1. Content 오브젝트에 Vertical Layout Group과 Content Size Fitter 컴포넌트를 추가합니다.
2. Vertical Layout Group에서 Child Alignment를 Upper Left로 설정합니다.
3. Content Size Fitter에서 Vertical Fit을 Preferred Size로 설정해 대화가 추가되면 Content의 크기가 자동으로 조정되도록 합니다.

1.3. 대화 프리팹 생성

1. Text UI로 대화 프리팹을 만듭니다.
   • Text는 캐릭터 이름과 대사를 표시하는 UI로 사용됩니다.
   • 기본 Text 설정에서 Word Wrap과 Auto Resize를 활성화하여 대화 텍스트가 잘리지 않도록 설정합니다.
2. 이 Text 오브젝트를 Prefab으로 만들어 나중에 동적으로 대화가 추가되도록 설정합니다.

2. 스크립트 작성

DialogueManager 스크립트 확장

아래 스크립트는 JSON 파일로부터 대사를 불러와 채팅형 UI로 순차적으로 보여주는 방법입니다.

 

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

[System.Serializable]
public class Dialogue
{
    public string character;
    public string text;
}

[System.Serializable]
public class DialogueList
{
    public Dialogue[] dialogues;
}

public class DialogueManager : MonoBehaviour
{
    public GameObject chatPrefab; // 대화 프리팹 (Text UI)
    public Transform chatContent; // Scroll View의 Content
    public ScrollRect scrollRect; // Scroll View 자체

    private DialogueList dialogueList; // 대사 데이터를 저장할 리스트
    private int currentDialogueIndex = 0;

    void Start()
    {
        LoadDialogueData();
        StartCoroutine(DisplayDialogues());
    }

    // JSON 파일에서 대사 데이터를 로드하는 함수
    void LoadDialogueData()
    {
        TextAsset jsonData = Resources.Load<TextAsset>("dialogue");
        dialogueList = JsonUtility.FromJson<DialogueList>(jsonData.text);
    }

    // 대사를 순차적으로 채팅 창에 표시하는 코루틴
    IEnumerator DisplayDialogues()
    {
        while (currentDialogueIndex < dialogueList.dialogues.Length)
        {
            Dialogue dialogue = dialogueList.dialogues[currentDialogueIndex];
            AddChatMessage(dialogue.character, dialogue.text);
            currentDialogueIndex++;

            yield return new WaitForSeconds(1.5f); // 대사 표시 간격
        }
    }

    // 대사를 채팅 창에 추가하는 함수
    void AddChatMessage(string characterName, string message)
    {
        // 대화 프리팹을 인스턴스화
        GameObject newChat = Instantiate(chatPrefab, chatContent);
        
        // 대화 프리팹의 Text 컴포넌트를 설정
        Text chatText = newChat.GetComponent<Text>();
        chatText.text = characterName + ": " + message;

        // 스크롤을 가장 아래로 고정
        Canvas.ForceUpdateCanvases();
        scrollRect.verticalNormalizedPosition = 0f;
    }
}

3. 스크립트 설명

1. LoadDialogueData():
   • JSON 파일로부터 대사 데이터를 불러와 DialogueList에 저장합니다.
2. DisplayDialogues():
   • 코루틴으로 대화를 일정한 간격으로 하나씩 표시합니다. yield return new WaitForSeconds(1.5f);를 통해 대사 간의 시간 간격을 조정할 수 있습니다.
   • 대화를 표시할 때마다 AddChatMessage() 함수를 호출하여 대사를 채팅 창에 추가합니다.
3. AddChatMessage():
   • 대화 프리팹을 Content 안에 인스턴스화하여 새 메시지를 추가합니다.
   • 캐릭터 이름과 대사를 Text UI에 표시합니다.
   • 메시지를 추가할 때마다 Scroll View의 스크롤을 가장 아래로 고정시켜 최신 대화를 볼 수 있도록 설정합니다.

4. UI와 스크립트 연결

1. ChatPrefab: Text UI로 만든 대화 프리팹을 chatPrefab 필드에 연결합니다.
2. ChatContent: Scroll View의 Content 오브젝트를 chatContent에 연결합니다.
3. ScrollRect: Scroll View 컴포넌트를 scrollRect에 연결하여 자동 스크롤이 동작하도록 합니다.

5. 실행 및 테스트

• 게임을 실행하면 JSON 파일에서 대사 데이터를 순차적으로 가져와 채팅 창에 표시합니다.
• 대사는 일정한 시간 간격으로 추가되고, Scroll View가 자동으로 가장 아래로 스크롤됩니다.

6. 선택지 및 히든 엔딩 추가 (확장)

선택지를 추가하려면 각 대화에 선택지를 추가하고, 선택된 대화에 따라 다음 대화를 설정하는 방식을 추가할 수 있습니다. 이 부분은 앞서 설명한 선택지 처리와 유사하게 대화 중간에 선택지가 나타나도록 설정하면 됩니다.

요약

1. Scroll View를 사용해 채팅 UI를 설정합니다.
2. 대화 내용을 JSON에서 불러와 순차적으로 대사를 표시합니다.
3. 각 대사는 Text UI 프리팹으로 채팅 창에 동적으로 추가됩니다.
4. 자동 스크롤을 통해 가장 최근 대화가 화면에 보이도록 설정합니다.

이 방식으로 간단하게 채팅형 대화 UI를 구현할 수 있습니다.