Unity) 전광판 처럼 흐르는 Text 처리 (스크롤링 텍스트, 텍스트 스크롤)

전광판 처럼 흐르는 Text 처리 (스크롤링 텍스트, 텍스트 스크롤)

전광판처럼 흐르는 Text 처리하는 코드를 봐서 포스팅하게 되었다.

 

간단하게 오른쪽 / 왼쪽을 선택해서 텍스트가 점차적으로 보이도록 설정을 할수 있다.

 

반응형

 

RectMask2D를 추가한 컴포넌트 밑에 Text에 해당 스크립트를 추가하면 된다.

 

< Hierarchy 구조 >

 

 

< 테스트 코드 >

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


public class ScrollText : MonoBehaviour
{
    [Header("이동할 오브젝트")]
    [SerializeField]
    private TextMeshProUGUI textMeshPro = null;

    [Header("이동 속도")]
    [SerializeField]
    private float moveSpeed = 3f;

    [Header("이동 방향( -> )")]
    [SerializeField]
    private Direction directionType = Direction.Left;

    [Header("Mask 영역")]
    [SerializeField]
    private RectTransform maskBackground = default;

    [SerializeField]
    private float spaceX = 100f;


    private Vector2 startPosition;
    private Vector2 endPosition;
    private Vector2 direction = Vector2.right;


    public enum Direction
    {
        Left,
        Right,
    }


    private RectTransform _textRectTransform =null;
    private RectTransform textRectTransform
    {
        get
        {
            if (_textRectTransform == null)
                _textRectTransform = textMeshPro.GetComponent<RectTransform>();

            return _textRectTransform;
        }
    }

    private void Start()
    {
        textRectTransform.sizeDelta = new Vector2(textMeshPro.preferredWidth, maskBackground.rect.height);
        LayoutRebuilder.ForceRebuildLayoutImmediate(textRectTransform);  //Layout 재정렬

        float posX = (maskBackground.rect.width * textRectTransform.anchorMax.x) + (textRectTransform.rect.width * textRectTransform.anchorMax.x);
        posX += spaceX; //여백추가

        switch (directionType)
        {
            case Direction.Left:
                {
                    startPosition = new Vector2(posX, 0);
                    direction = Vector2.left;
                }
                break;
            case Direction.Right:
                {

                    startPosition = new Vector2(posX * -1, 0);
                    direction = Vector2.right;
                }
                break;
            default:
                return;
        }

        endPosition = new Vector2(startPosition.x * -1, startPosition.y);


        textRectTransform.anchoredPosition = startPosition;
        StartCoroutine(CoroutineMoveAction());
    }

    private IEnumerator CoroutineMoveAction()
    {
        while (true)
        {
            textRectTransform.Translate(direction * moveSpeed * Time.unscaledDeltaTime);

            if (IsPositionEnd())
            {
                textRectTransform.anchoredPosition = startPosition;
            }

            yield return null;
        }
    }

    private bool IsPositionEnd()
    {
        switch (directionType)
        {
            case Direction.Left:return endPosition.x > textRectTransform.anchoredPosition.x;
            case Direction.Right: return endPosition.x < textRectTransform.anchoredPosition.x;
            default:
                return false;
        }
    }
}

결과영상은 다음과 같다.

< 테스트  영상 >

로직을보면 간단하게 방향(왼/오른쪽)을 기준으로 anchorePosition을 이동시키는 처리를

Coroutine으로 사용해서 구현되었다.

해당 코드를 참고해서 필요한 상황에 맞춰서 개발하면 된다.

 

 

원본 링크 : [ 링크 ]

 

GitHub - hahahohohun/PublicCode

★☆☆☆☆