유니티에서 텍스트 타이핑 대사박스 효과 구현하기

스토리게임들을 보면 캐릭터들의 대사들이 말하듯이 한글자씩 생성되도록 연출하는 경우가 많은데요.

직접 구현하려면 굉장히 번거롭겠지만 DoTween이라는 무료 에셋을 사용하면 간단히 구현 가능합니다!

DoTween 다운로드는 여기서 가능합니다. 에셋스토어 링크

DOTween (HOTween v2) | 애니메이션 도구 | Unity Asset Store

 

설치하시고 바로 네임스페이스에 DG.Tweening을 추가해주시면 사용 가능합니다.

아래는 간단한 코드 예제입니다(사실 이게 다입니다).

using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class TextAnimator : MonoBehaviour {
  private Text targetText;
  public string inputString;
  public float duration;
  public Ease ease;
  
  private void Start() {
    targetText = GetComponent<Text>();
    targetText.text = "";
    targetText.DOText(inputString, duration).SetEase(ease);
  }
}

여기서 inputString, duration, ease를 public으로 선언한 이유는 인스펙터에서 수정해서 사용하기 위함입니다.

각 변수별 역할은 아래와 같습니다.

 

• inputString : 최종적으로 표시될 문장입니다.
• duration : 문장이 모두 표시될때까지 걸리는 시간입니다.
• ease : 변환시의 시간당 변화량 그래프를 설정해줍니다. 텍스트는 Linear로 설정하는게 자연스럽더라구요.

여러 Ease 종류에 대해서는 다른글에서 따로 정리하겠습니다.

 

아무튼 저 클래스를 Text컴포넌트가 있는 오브젝트에 추가해주고, 아래와 같이 원하시는 값을 입력해주면 됩니다.

 

 

결과 영상입니다!