텍스트 타이핑 효과 내기

 

대충 이런 형식으로 

1. 클릭으로 텍스트 출력 시 타이핑 효과가 들어가며

2. 출력이 완성된 텍스트 밑에 새로운 텍스트가 타이핑 효과로 출력되는

시스템을 제작하려고 한다. 

 

처음에는 클릭할 때마다 나오는 텍스트들을 아예 오브젝트화 해서 하나씩 생성하고 지울까 생각했는데, 그건 너무 낭비인 것 같아서 최후의 수단으로 쓰기로 했다. 현재 구현된 방식은 하나의 TMPro UGUI 오브젝트에 텍스트 내용을 추가하면서 출력하는 것이다. 

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

public class ShowText : MonoBehaviour
{
    public MainText mainText;

    [SerializeField] private TextMeshProUGUI objText;

    private int currentDialogIndex = 0;

    private string prevText;
    private string currText;

    private float typingSpeed = 0.1f;
    private bool isTypingEffect = false;

    private void Awake()
    {
        currentDialogIndex = mainText.Sheet1[0].number;
        Debug.Log(currentDialogIndex);

        objText.text = prevText + " ";

        StartCoroutine(OnTypingText());
    }

    private void Update()
    {
        UpdateText();
    }

    public void UpdateText()
    {

        if (Input.GetMouseButtonDown(0))
        {
            currentDialogIndex++;
            Debug.Log(currentDialogIndex);

            StartCoroutine(OnTypingText());

        }
    }

    private IEnumerator OnTypingText()
    {
        prevText += currText + "\n\n";

        for (int count = 0; count < mainText.Sheet1[currentDialogIndex - 1].textContents.Length; count++)
        {
            currText = mainText.Sheet1[currentDialogIndex - 1].textContents.Substring(0, count+1);
            objText.text = prevText + currText;

            yield return new WaitForSeconds(0.03f);
        }
    }
}

*기획자 분께서 간단하게 엑셀 파싱으로 작업하자고 하셔서 엑셀 임포트 관련 변수가 있다.

텍스트 처리는 기존에 있던 텍스트에 새로운 텍스트를 추가해나가면서, '새로운 텍스트' 부분에만 타이핑 효과를 처리해야 하므로 기존 텍스트와 새로운 텍스트를 구분할 필요가 있다. 잘못 구현할 시 기존 텍스트가 반복되어 타이핑되거나, 혹은 기존 텍스트와 새로운 텍스트가 뒤섞여 타이핑될 수 있다. (왜 아냐면...)

그래서 기존 텍스트(prevText)와 새로운 텍스트(currText)를 구분하여 사용해야 한다. 

 

for문에서 currText에 필요한 텍스트를 Substring으로 하나씩 붙여나간다. TMPro UGUI에 직접 연결된 변수인 objText에 출력을 끝낸 기존 텍스트와 타이핑 효과를 받는 텍스트를 합친다. 그리고 yield return으로 함수 맨 처음으로 빠져나가면서 prevText에 업데이트가 된다.

 

---

추가 작업

- 텍스트 타이핑 중에 한 번 더 클릭하면 타이핑 연출을 즉시 끝내고 모든 텍스트를 표시한다.