【Unityゲーム開発】画像と文字をDOTweenで右から左に流す機能の実装【備忘録】

Unityを使ってゲームやアプリケーションを開発していると、UI要素をスムーズにアニメーションさせることが求められるシーンがよくあります。

この記事では、画像と文字を組み合わせたUIプレハブを作成し、これを右から左に流れるアニメーションをDOTweenを使用して実装する方法について解説します。

目次

必要なツール

DOTweenをアセットストアから追加する必要があります。

DOTweenの導入

DOTweenの導入方法について以下の記事で紹介しています。

プレハブの作成

まず、画像と文字を組み合わせたUIを作成し、これをプレハブ化します。プレハブは、再利用可能なオブジェクトのテンプレートで、ゲームオブジェクトを使い回す際に非常に便利です。

プレハブに含める要素

  • Image: 背景や装飾用の画像
  • TextMeshPro (TMP) Text: 表示したいテキスト

今回はスーパーチャットのような組み合わせを意識して以下のような構成のプレハブを作成しています。

左にキャラ画像、右にスパチの背景画像、その上にテキスト画像。これらをランダムに内容を変更できるように作成していきます。

まずCanvasにパネルを配置して、そのパネル上に、Imageを2つ作って、Spachi_35PとSpachi_Colorとしています。

次に、その画像の上に文字を表示したいので、Spachi_Colorの下にテキスト(OutLineの設定をしたかったため、TextMeshProを利用していますが、普通のTextでも可)のオブジェクトを設置しています。

TextMeshProの使い方は以下の記事で紹介しています。

ランダムに画像やテキストを設定するスクリプト

SpachiRandom.csを使って、ランダムに画像やテキストを設定するスクリプトを作成します。このスクリプトを使うことで、プレハブ化したUIに動的に異なるコンテンツを表示させることができます。

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class SpachiRandom : MonoBehaviour
{
    public Sprite[] images_35p;
    public Sprite[] spachi;
    public Image spachi_35p;
    public Image spachi_comment;
    public TMP_Text spachi_text;

    void Start()
    {
        spachi_35p.sprite = images_35p[Random.Range(0, images_35p.Length)];
        spachi_comment.sprite = spachi[Random.Range(0, spachi.Length)];

        int rand = Random.Range(0, 4);
        switch (rand)
        {
            case 0:
                spachi_text.text = "ここ好き";
                break;
            case 1:
                spachi_text.text = "ここも好き";
                break;
            case 2:
                spachi_text.text = "全部好き";
                break;
            case 3:
                spachi_text.text = "みこち大好き";
                break;
            default:
                spachi_text.text = "ここ好き";
                break;
        }
    }
}
  • 複数の画像やテキストからランダムに選択し、UI要素に表示します。
  • Startメソッド内で、Unityのランダム機能を利用して画像とテキストを設定しています。

空のオブジェクトの名前をSpachiObjとしたものにキャラ画像とスパチの画像を設定したい数だけ設定します。それらはオブジェクトにランダムで設定されます。

ここでは、プログラム内でテキストをランダムに設定していますが、ここも画像と同様に配列にしてInspectorから設定しても良いかもしれません。

最後にパネルにセットしていたUI-ImageとTextMeshProをInspectorで設定しておきます。

DOTweenを使ったアニメーションの実装

次に、プレハブ化したUIを右から左にスライドさせる機能をMainManager.csで実装します。ここでは、DOTweenを使ってスムーズなアニメーションを実現します。

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

public class MainManager : MonoBehaviour
{

    #region public 変数

    /// <summary>
    /// メインマネージャーのインスタンス
    /// </summary>
    public static MainManager instance;
    #endregion

    #region private 
    /// <summary>
    /// スパチのプレファブ
    /// </summary>
    public GameObject spachiPrefab;

    private bool canSpawn = true; // インスタンスを生成できるかのフラグ

    #endregion

    #region unityのイベント処理

    void Awake()
    {
        if (instance == null)
        {
            instance = this;
        }
        else
        {
            Destroy(gameObject);
        }
    }

    #endregion

    #region デバッグ処理

    /// <summary>
    /// ボールを投入してリールを回すデバッグ
    /// </summary>
    public void debug()
    {
        StartCoroutine(SlideUI(spachiPrefab));
    }
    #endregion


    private IEnumerator SlideUI(GameObject uiPrefab,
                            float slideDuration = 3f)
    {
        // インスタンス生成不可にする
        canSpawn = false;

        // UIプレファブを指定したCanvasにインスタンス化
        GameObject instance = Instantiate(uiPrefab);

        // 画面サイズを取得
        float screenWidth = Screen.width;
        float screenHeight = Screen.height;

        // 子のPanelオブジェクトを取得
        RectTransform[] panels = instance.GetComponentsInChildren<RectTransform>();

        // 1周目で決定したランダムな高さを保持
        float randomHeight = 0f;
        bool isFirstPanel = true;

        foreach (var panel in panels)
        {
            if (panel.gameObject.name == "SpachiPanel")
            {
                if (isFirstPanel)
                {
                    // ランダムな高さを1回だけ設定
                    randomHeight = Random.Range(-screenHeight / 2f + panel.rect.height / 2f, screenHeight / 2f - panel.rect.height / 2f);
                    isFirstPanel = false;
                }

                panel.anchoredPosition = new Vector2(screenWidth / 2f + panel.rect.width / 2f, randomHeight);

                // 右側の外から左側の外までスライドさせる
                panel.DOAnchorPosX(-screenWidth / 2f - panel.rect.width / 2f, slideDuration)
                    .SetEase(Ease.Linear)
                    .OnComplete(() =>
                    {
                        // Panelがスライドし終わったら削除する
                        Destroy(instance);
                    });
            }
        }

        // インスタンス生成を再度許可
        yield return new WaitForSeconds(0.5f);
        canSpawn = true;
    }

}
  • UIプレハブを右から左にスライドさせる処理を行います。
  • DOAnchorPosXメソッドを使って、指定した時間でスムーズに位置を変更します。
  • アニメーションが完了すると、生成されたUIオブジェクトを削除します。

上記のコードをプロジェクトに組み込み、Unityエディタ上で動作確認を行いましょう。MainManagerdebugメソッドを呼び出すことで、プレハブが右から左に流れる様子が確認できます。

まとめ

この手法を使えば、UI要素を動的にアニメーションさせることができ、視覚的に魅力的なインターフェースを簡単に実装できます。DOTweenを使うことで、アニメーションの実装が簡単になり、コードもシンプルに保つことができます。

このアプローチを活用して、さまざまなアニメーション効果を実現し、Unityプロジェクトに動きを加えてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次