【Unity】特定時間後に自動で消えるUIメッセージの作り方(トースト風)

Unity

通知的な内容をゲーム内で知らせるときに、トースト風の通知を使うケースも選択肢に入る時があるかなと思います。(あるかな?あるよね?)

トースト通知って何ぞや?

トースト通知とは、ざっくり説明すると「画面の端とかに表示される一定時間表示されたら勝手に非表示になるメッセージ」のことです。

初めて聞いたって方はこちらのQiitaが他の用語と比較して説明されてて分かりやすかったのでチラ見すると良いかもです。

ポップアップをトーストと呼ぶのはどんなとき? - Qiita
なにこれ? みなさんはトーストって知っていますか? 初めは「何それ?おいしいの?」って思うほど何かわからなかったんですが、調べていくうちに、「ポップアップ」「ダイアログ」「モーダル」など、似たような意味を持つものがあることがわかりました。 ...

個人的にはAndroid系の開発をしていると割と遭遇するかなー?というイメージ。
Androidのシステムメッセージとしてよく使われてますね。

そこで、今回はこの演出をuGUIと簡単なCoroutineで実装してみましょう!

トースト風表示処理(一定時間表示して自動非表示)

using UnityEngine;
using TMPro;
using System.Collections;

public class ToastMessage : MonoBehaviour
{
    [SerializeField] GameObject toastPanel; // テキストや背景を含む親オブジェクト
    [SerializeField] TextMeshProUGUI messageText;
    [SerializeField] float visibleDuration = 2.0f;

    private Coroutine currentRoutine;

    private void Awake()
    {
        toastPanel.SetActive(false); // 最初は非表示にしておく
    }

    public void ShowMessage(string message)
    {
        if (currentRoutine != null)
        {
            StopCoroutine(currentRoutine);
        }
        currentRoutine = StartCoroutine(ShowRoutine(message));
    }

    private IEnumerator ShowRoutine(string message)
    {
        messageText.text = message;
        toastPanel.SetActive(true);

        yield return new WaitForSeconds(visibleDuration);  // visibleDuration秒待機

        toastPanel.SetActive(false);
    }
}

こんな感じで呼び出すだけでトースト風表示になるはずです。

toastMessage.ShowMessage("アイテムを入手しました!");

応用系

今回はSetActiveでパッと表示切替するようなサンプルにしていますが、前回の記事に書いたフェードイン・アウトの処理を入れたら、よりAndroidのトースト風の表示になるかなと思います。

良かったら試してみてください。
GameObjectは直接αを変更できないので、Panel部分にCanvasGroupをアタッチして、CanvasGroupのαを変更すると簡単に透過処理を実装できますよ!

最後に

ということでトースト風表示のサンプルコードを書いてみました。

興味があるなという方はぜひ使ってみてください!
こういうパターンも作ってほしいとかあればぜひ教えてもらえるとー!

コメント

タイトルとURLをコピーしました