유니티 UI - 간단한 토스트 메시지 만들기 (Toast Message)

Unity 전체 링크

 

메시지가 연속으로 나오는 경우 - 코루틴 메시지 큐로 순서대로 함수 실행하기 

 

Canvas에서 Text를 선언하고 적당한 위치의 화면에 Text를 옮긴다.

 

그리고 ToastMsg Text에 스크립트를 추가한다.

 

Text를 사용하기 위해서는 UnityEngine.UI가 필요하다.

토스트 메시지는 게임 씬에서 유일하기 때문에 싱글턴으로 만든다.

get을 이용해서 어떤 스크립트라도 ToastMsg.Instance.function(); 로 접근할 수 있게 만든다.

그리고 Awake에서 초기화 자기 자신을 할당한다.

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

public class ToastMsg : MonoBehaviour
{
    private Text txt;
    private float fadeInOutTime = 0.3f;
    private static ToastMsg instance = null;

    public static ToastMsg Instrance
    {
        get
        {
            if (null == instance) instance = FindObjectOfType<ToastMsg>();
            return instance;
        }
    }

    private void Awake()
    {
        if (null == instance) instance = this;
    }
    
    ...

 

Start에서는 Text를 받은 후, enabled를 false로 해서 텍스트를 꺼둔다.

    void Start()
    {
        txt = this.gameObject.GetComponent<Text>();
        txt.enabled = false;
    }

---

토스트 메시지는 코루틴으로 구현한다.

먼저 메시지를 사라지고 나타나게할 fade in out 함수를 만든다.

 

fade in 은 alpha값이 0 → 1로 되는 것이고, fade out 은 1 → 0이 되게 하면 된다.

따라서 fade in/out을 bool으로 체크하여 start, end alpha 값을 정한다.

    private IEnumerator fadeInOut(Text target, float durationTime, bool inOut)
    {
        float start, end;
        if (inOut)
        {
            start = 0.0f;
            end = 1.0f;
        }
        else
        {
            start = 1.0f;
            end = 0f;
        }

        Color current = Color.clear; /* (0, 0, 0, 0) = 검은색 글자, 투명도 100% */
        float elapsedTime = 0.0f;

        while (elapsedTime < durationTime)
        {
            float alpha = Mathf.Lerp(start, end, elapsedTime / durationTime);

            target.color = new Color(current.r, current.g, current.b, alpha);
            
            elapsedTime += Time.deltaTime;

            yield return null;
        }
    }

 

fade in/out이 완성되었으므로, 메시지를 보여준다.

fade in - message가 보여지는 시간 - fade out 순서대로 진행된다.

    private IEnumerator showMessageCoroutine(string msg, float durationTime)
    {
        Color originalColor = txt.color;
        txt.text = msg;
        txt.enabled = true;

        yield return fadeInOut(txt, fadeInOutTime, true);

        float elapsedTime = 0.0f;
        while(elapsedTime < durationTime)
        {
            elapsedTime += Time.deltaTime;
            yield return null;
        }

        yield return fadeInOut(txt, fadeInOutTime, false);

        txt.enabled = false;
        txt.color = originalColor;
    }

 

원하는 msg와 toast message를 유지할 시간을 파라미터로 받는 함수를 만들면 된다.

    public void showMessage(string msg, float durationTime)
    {
        StartCoroutine(showMessageCoroutine(msg, durationTime));
    }

 

토스트 메시지가 잘 나오는지 확인하기 위해,

콜라이더가 있는 게임 오브젝트의 스크립트에 아래의 코드를 추가한다.

    public void OnMouseUp()
    {
        ToastMsg.Instrance.showMessage("OnMouseUp!", 1.0f);
    }

 

오브젝트를 누르면 "OnMouseUp!"이 나왔다가 사라지는 것을 알 수 있다.

 

최종 코드는 아래와 같다.

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

public class ToastMsg : MonoBehaviour
{
    private Text txt;
    private float fadeInOutTime = 0.3f;
    private static ToastMsg instance = null;

    public static ToastMsg Instrance
    {
        get
        {
            if (null == instance) instance = FindObjectOfType<ToastMsg>();
            return instance;
        }
    }

    private void Awake()
    {
        if (null == instance) instance = this;
    }

    void Start()
    {
        txt = this.gameObject.GetComponent<Text>();
        txt.enabled = false;
    }

    public void showMessage(string msg, float durationTime)
    {
        StartCoroutine(showMessageCoroutine(msg, durationTime));
    }

    private IEnumerator showMessageCoroutine(string msg, float durationTime)
    {
        Color originalColor = txt.color;
        txt.text = msg;
        txt.enabled = true;

        yield return fadeInOut(txt, fadeInOutTime, true);

        float elapsedTime = 0.0f;
        while(elapsedTime < durationTime)
        {
            elapsedTime += Time.deltaTime;
            yield return null;
        }

        yield return fadeInOut(txt, fadeInOutTime, false);

        txt.enabled = false;
        txt.color = originalColor;
    }

    private IEnumerator fadeInOut(Text target, float durationTime, bool inOut)
    {
        float start, end;
        if (inOut)
        {
            start = 0.0f;
            end = 1.0f;
        }
        else
        {
            start = 1.0f;
            end = 0f;
        }

        Color current = Color.clear; /* (0, 0, 0, 0) = 검은색 글자, 투명도 100% */
        float elapsedTime = 0.0f;

        while (elapsedTime < durationTime)
        {
            float alpha = Mathf.Lerp(start, end, elapsedTime / durationTime);

            target.color = new Color(current.r, current.g, current.b, alpha);

            Debug.Log(target.color);

            elapsedTime += Time.deltaTime;

            yield return null;
        }
    }
}

---

위의 경우에는 메시지가 연속으로 나오게 되면 이전 메시지가 가려지고 fadeInOut이 정상작동하지 않는다.

코루틴을 순서대로 동작하도록 처리할 필요가 있다.

코루틴 메시지 큐로 순서대로 함수 실행하기를 참고하자.

 

Unity Plus:

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

 

Unity Pro:

Unity Pro

 

Unity 프리미엄 학습:

Unity Learn