Unity) [UGUI] 애니메이션 대화창 구현

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

public class UIDialogPanel : MonoBehaviour
{
    public Text txtDialog;
    public Button btnDim;
    public Animator anim;
    public GameObject endArrowGo;
    private int idx;

    [SerializeField]
    private float charPerSecond;
    private string targetDialog;
    private Text txtEffect;
    private int diaologIdx;
    private bool isTalking;

    //임시값
    private string dialogA = "안녕하세요. 반갑습니다. 오늘은 2023년 4월 3일입니다.";
    private string dialogB = "오늘 날씨는 맑았지만 내일은 비가 올 예정입니다.";
    private string dialogC = "가나다라마바사아자차카타파하";
    private List<string> dialogList;

    void Start()
    {
        this.dialogList = new List<string>();
        this.dialogList.Add(this.dialogA);
        this.dialogList.Add(this.dialogB);
        this.dialogList.Add(this.dialogC);

        this.SetDialog(this.dialogList[this.idx]);
        this.anim.Play("UIDialogPanel_Portrait", -1, 0);
        this.btnDim.onClick.AddListener(() =>
        {
            if (!this.isTalking)
            {
                this.anim.Play("UIDialogPanel_Portrait", -1, 0);
                this.idx++;
                if (this.idx >= this.dialogList.Count)
                {
                    this.idx = 0;
                    this.gameObject.SetActive(false);
                }               
            }
            
            this.SetDialog(this.dialogList[this.idx]);
        });

    }

    public void SetDialog(string dialog)
    {
        if (this.isTalking) 
        {
            this.txtDialog.text = this.targetDialog;
            CancelInvoke();            
            this.EndEffect();
        }
        else
        {
            this.targetDialog = dialog;
            this.StartEffect();
        }
    }

    //애니메이션 제어 3단계
    private void StartEffect()
    {
        this.txtDialog.text = "";
        this.diaologIdx = 0;
        this.endArrowGo.SetActive(false);
        this.isTalking = true;

        //1글자가 나오는 속도
        Invoke("OnEffect", 1 / this.charPerSecond);
    }

    private void OnEffect()
    {
        if (this.txtDialog.text == this.targetDialog)
        {
            this.EndEffect();
            return;
        }
        
        this.txtDialog.text += this.targetDialog[this.diaologIdx];
        this.diaologIdx++;
        //재귀적 사용
        Invoke("OnEffect", 1 / this.charPerSecond);
    }

    private void EndEffect()
    {
        this.endArrowGo.SetActive(true);
        this.isTalking = false;
    }
}

 

문자열 값들의 인덱스를 활용하여 구현한 애니메이션 대화창입니다. Invoke를 사용하여 제어하였으며, List에 전체 대화 문자열을 저장하고 해당 List를 인덱스의 순서대로 탐색하여 문자열을 찾습니다. 그리고 해당 문자열 역시 인덱스 순서대로 문자열을 출력하도록 하여 대화가 마치 애니메이션 효과처럼 흐르도록 합니다. 추가적으로 캐릭터 초상화 애니메이션은 애니메이터의 Play 메서드를 활용하였는데 세 번째 매개변수(normalizedTime)로 애니메이션이 시작될 때 지연시간을 지정하여 애니메이션이 부드럽게 실행되도록 할 수 있다.