[Unity] 타임라인으로 TextMeshPro 자막 수정하기 (PlayableAsset)

타임라인 트랙에 얹어서 인스펙터 창을 통해 텍스트를 설정하는 방법

+ ease in / out 적용

+ 색 종류 정해서 할당 가능

 

<주요 스크립트 역할>

파일명	역할	핵심 기능
SubtitleTrack.cs	데이터의 통로 (Track)	타임라인에 'Subtitle Track'이라는 전용 트랙 생성. TextMeshProUGUI를 바인딩 대상으로 설정해 자막이 출력될 UI 지정.
SubtitleClip.cs	데이터 보관소 (Clip)	타임라인의 개별 조각.  인스펙터 창에서 자막 내용(subtitle Text)과 화자(subtitleColor)를 설정하며, 실제 동작하는 Behaviour에 데이터 전달.
SubtitleBehaviour.cs	실행 로직 (Behaviour)	타임라인 재생 중 매 프레임 실행. 전달받은 텍스트를 UI에 뿌려주고, info.weight를 사용해 클립간의 fade in / out 효과를 text 컬러에 반영.

 

SubtitleTrack.cs

using TMPro;
using UnityEngine;
using UnityEngine.Timeline;

[TrackBindingType(typeof(TextMeshProUGUI))]
[TrackClipType(typeof(SubtitleClip))]
public class SubtitleTrack : TrackAsset
{
}

 

 

SubtitleClip.cs

using UnityEngine;
using UnityEngine.Playables;
using TMPro;
public enum SubtitleColor
{
    Narration,
    Dodo
    Rere,
    Mimi,
    Fafa
}
public class SubtitleClip : PlayableAsset
{
    [TextArea(3, 10)] // 텍스트 입력창 넓게
    public string subtitleText;
    public SubtitleColor colorType = SubtitleColor.Narration;
    public override Playable CreatePlayable(PlayableGraph graph, GameObject owner)
    {
        var playable = ScriptPlayable<SubtitleBehaviour>.Create(graph);
        SubtitleBehaviour behaviour = playable.GetBehaviour();
        behaviour.subtitleText = subtitleText;
        behaviour.textColor = GetActualColor(colorType);

        return playable;
    }

    private Color GetActualColor(SubtitleColor type)
    {
        switch (type)
        {
            case SubtitleColor.Narration: return Color.white;
            case SubtitleColor.Dodo: return new Color(1f, 0.7f, 0.75f); // 원하는 색 지정
            case SubtitleColor.Rere: return new Color(0.486f, 0.913f, 0.478f);
            case SubtitleColor.Mimi: return new Color(0.992f, 0.917f, 0.38f);
            case SubtitleColor.Fafa: return new Color(0.541f, 0.8f, 1f);
            default: return Color.white;
        }
    }
}

 

 

SubtitleBehaviour.cs

using UnityEngine;
using UnityEngine.Playables;
using TMPro;

public class SubtitleBehaviour : PlayableBehaviour
{
    public string subtitleText;
    public Color textColor;
    public override void ProcessFrame(Playable playable, FrameData info, object playerData)
    {
        TextMeshProUGUI text = playerData as TextMeshProUGUI;
        text.text = subtitleText;
        text.color = new Color(textColor.r, textColor.g, textColor.b, info.weight);
    }
}

 

적용 방법

1. 자막 띄울 Canvas에 TextMeshPro 만들기

 

2. Timeline에서 좌측 상단 + 누르고 SubtitleTrack 누르기

+ 만들어둔 TextMeshPro 연결

 

3. Track에서 우클릭 > Add SubtitleClip

 

4. 내용쓰고 할당해주기

 

주의사항

타임라인에서 돌려서 실행해보다가 처음부터 플레이하면, 기존의 텍스트 내용 값이 남아있을 수 있어서

타임라인 맨 앞에 공백으로 처리 한번씩 해주기

 

참고) https://youtu.be/12bfRIvqLW4?si=Muqpg7nKm9QtI8qo