유니티(Unity) - 글자 타이핑 효과(Typing)

 

 

우선 Canvas에 테스트를 위한 Text UI와 Button을 하나씩 만들었습니다.

둘 다 TextMeshPro를 사용하고 있습니다.

 

화면에 배치는 대충 이렇게 했습니다.

 

Text의 정렬은 중앙으로 잡아 주었습니다.

 

 

Button에 Typing.cs 스크립트를 넣고 Button 이벤트에 위 이미지처럼 TypingButton을 연결시켜 줍니다.

using System.Collections;
using UnityEngine;
using TMPro;

public class Typing : MonoBehaviour {
    [Header("Text UI")] public TextMeshProUGUI textUI;
    [Header("타이핑 지연 시간")] public float delayTime;
    IEnumerator startTyping;
    string write = "Typing effect test";
    bool typingCheck = false;
    WaitForSeconds time;

    void Start() {
        time = new WaitForSeconds(delayTime);
    }

    public void TypingButton() {
        NextStory();
    }

    void NextStory() {
        if (!typingCheck) {
            startTyping = TypingPage();
            typingCheck = true;
            StartCoroutine(startTyping);
        } else {
            // 타이핑 효과 넘기기
            if(typingCheck) {
                StopCoroutine(startTyping);
                textUI.text = write;
                typingCheck = false;
            }
        }
    }

    // 타이핑 효과
    IEnumerator TypingPage() {
        string pageText;

        for (int i = 0; i < write.Length + 1; i++) {
            pageText = write.Substring(0, i);
            print(pageText);
            textUI.text = pageText;
            yield return time;
        }

        typingCheck = false;
    }
}

---

    public void TypingButton() {
        NextStory();
    }

Button에 연결 시켜 줍니다.

 

    void NextStory() {
        if (!typingCheck) {
            startTyping = TypingPage();
            typingCheck = true;
            StartCoroutine(startTyping);
        } else {
            // 타이핑 효과 넘기기
            if(typingCheck) {
                StopCoroutine(startTyping);
                textUI.text = write;
                typingCheck = false;
            }
        }
    }

 

if (!typingCheck) => typingCheck 가 flase 이면 (타이핑 효과가 작동 중이 아니라면) 

코루틴을 실행시켜 타이핑 효과를 표시해줍니다.

if (typingCheck) => typingCheck가 true 이면 (타이핑 효과가 작동 중이면)  ** 타이핑 효과가 작동 중 버튼을 누른다면

실행 중인 코루틴을 중단시키고 textUI에 한 번에 모든 글자를 표시하게 합니다.

 

    IEnumerator TypingPage() {
        string pageText;

        for (int i = 0; i < write.Length + 1; i++) {
            pageText = write.Substring(0, i);
            textUI.text = pageText;
            yield return time;
        }

        typingCheck = false;
    }

write의 글자 수만큼 for문을 돌려 Substring을 이용해 한 글자씩 나오게 해 줍니다.

---

 

이런 식으로 타이핑 효과를 표시하게 됩니다.

그런데 이렇게 하면 문제가 Text UI의 정렬을 중앙으로 했으니 나타나는 글자들이 중앙에서 좌우로 벌어지며 

표시됩니다.

정렬은 중앙으로 해 두고 표시는 앞에서 하나씩 움직임 없이 표시하고 싶을 경우 아래 추가 코드를 넣어 주시면 됩니다.

 

    IEnumerator TypingPage() {
        string pageText;

        for (int i = 0; i < write.Length + 1; i++) {
            pageText = write.Substring(0, i);
            pageText += "<color=#00000000>" + write.Substring(i) + "</color>";
            textUI.text = pageText;
            yield return time;
        }

        typingCheck = false;
    }

TypingPage 함수에 

아래 코드를 추가해 줍니다.

 

pageText += "<color=#00000000>" + write.Substring(i) + "</color>";

이렇게 되면 Text UI에 전달되는 값은 아래와 같이 됩니다.

 

T<color=#00000000>yping effect test</color>

Ty<color=#00000000>ping effect test</color>

Typ<color=#00000000>ing effect test</color>

.....

이 방법은  TextUI에 모든 글자를 다 넣어 주고 <color>를 이용해 타이핑되는 글자 부분 뒤쪽은 모두 투명 처리해서

실제로는 존재 하지만 화면에만 나오지 않게 하는 방식입니다.

이러면 정렬은 중앙이면서 움직임 없이 한 글자씩 표시하게 됩니다.