Transform と RectTransform の違いを踏まえた DOTween アニメーションの解説

本資料では、ゲームオブジェクトのアニメーションに使用するベースコード（Transformを利用したケース）を例に、TransformとRectTransformの違いや、それぞれに合わせたDOTweenの使用方法について解説します。

ベースとなるコード（Transform使用例）

以下は、ゲームオーバーテキストのアニメーションを実現するための基本コードです。このコードでは、Transformを利用してオブジェクトの位置を変更し、アニメーションとシェイク効果、そして遅延後のシーン遷移を実装しています。

using DG.Tweening;
using UnityEngine;
using UnityEngine.SceneManagement;

public class GameOverTextAnimator : MonoBehaviour
{
    private void Start()
    {
        // Transformの参照をキャッシュし、操作の効率を向上させる
        var transformCache = transform;
        // 終点として利用するため、初期のローカル座標を保持
        var defaultPosition = transformCache.localPosition;
        // 一旦、オブジェクトを画面上部に移動させる（例: y座標300）
        transformCache.localPosition = new Vector3(0, 300f);
        // 保存した位置に対して、1秒かけて移動するアニメーションを実行
        transformCache.DOLocalMove(defaultPosition, 1f)
            .SetEase(Ease.Linear)
            .OnComplete(() =>
            {
                // アニメーション完了時にログを出力
                Debug.Log("GAME OVER!!");
                // その後、1.5秒間、シェイク（振動）エフェクトを実行
                transformCache.DOShakePosition(1.5f, 100);
            });

        // DOTweenの遅延処理を利用して、10秒後にタイトルシーンへ遷移
        DOVirtual.DelayedCall(10, () =>
        {
            SceneManager.LoadScene("TitleScene");
        });
    }
}

Transform と RectTransform の違い

Transform

  • 基本役割:
    ゲームオブジェクトの位置、回転、スケールを管理するためのコンポーネント。
  • 利用シーン:
    キャラクターや背景、エフェクトなど、Canvas外のゲームオブジェクトに使用します。
  • アニメーションの対象:
    localPosition、position、rotation、localScaleなどを直接操作するため、DOTweenでは DOMove や DOLocalMove、DOShakePosition などが一般的に利用されます。

RectTransform

  • 基本役割:
    UI要素（ボタン、パネル、テキストなど）に付与されるTransform。
  • 特徴:
    RectTransformはTransformを継承しており、アンカー（anchorMin/anchorMax）、ピボット、オフセットなど、UIレイアウトに必要なプロパティが追加されています。
  • アニメーションの対象:
    UI要素の場合は、anchoredPositionやsizeDeltaなど、Canvasレイアウトに合わせたプロパティを操作する必要があります。DOTweenではこれらに対して、DOAnchorPos や DOSizeDelta、DOShakeAnchorPos といった専用メソッドを利用します。

コード解説（Transform使用の場合）

初期設定と位置調整

var transformCache = transform;
var defaultPosition = transformCache.localPosition;
transformCache.localPosition = new Vector3(0, 300f);
  • transformCache
    Transformの参照を変数に格納。これにより、何度も transform プロパティを呼び出すコストを削減できます。
  • defaultPosition
    オブジェクトの本来の位置を保持し、後でアニメーションの終点として利用します。
  • 初期位置の設定
    オブジェクトを画面上部（y = 300）に配置し、そこから本来の位置へ移動させる動きを作り出します。

移動アニメーションとシェイク効果

transformCache.DOLocalMove(defaultPosition, 1f)
    .SetEase(Ease.Linear)
    .OnComplete(() =>
    {
        Debug.Log("GAME OVER!!");
        transformCache.DOShakePosition(1.5f, 100);
    });
  • DOLocalMove
    保存しておいた defaultPosition に対して、1秒間かけて移動するアニメーションを実行。
  • SetEase(Ease.Linear)
    一定速度での移動（線形補間）を指定。
  • OnCompleteコールバック
    移動完了後、コンソールに「GAME OVER!!」と出力するとともに、 DOShakePosition により1.5秒間のシェイク効果で演出を加えます。

遅延処理（シーン切替）

DOVirtual.DelayedCall(10, () =>
{
    SceneManager.LoadScene("TitleScene");
});
  • DelayedCall
    指定した時間（10秒）待機後に、タイトルシーンへ遷移させる処理を実行します。

UI要素（RectTransform）の場合

上記のコードは、Transformを利用した基本的なアニメーションの例です。UI要素に対して同様の演出を実装する場合、主に以下の違いがあります。

ポイント

  • 対象プロパティの違い
    UIの場合、RectTransform の anchoredPosition を操作するため、移動アニメーションは DOAnchorPos になります。
  • Shakeのメソッド
    UI要素のシェイクには DOShakeAnchorPos を使います。これにより、UIレイアウト（アンカー設定）を考慮したシェイク効果を得られます。

UIバージョンのサンプルコード

using DG.Tweening;
using UnityEngine;
using UnityEngine.SceneManagement;

public class GameOverUIAnimator : MonoBehaviour
{
    private void Start()
    {
        // RectTransformのキャッシュ
        RectTransform rectTransform = GetComponent<RectTransform>();
        // 初期のアンカーポジションを保持
        var defaultPos = rectTransform.anchoredPosition;
        // 一旦、UIを画面上方に移動（例: y座標300）
        rectTransform.anchoredPosition = new Vector2(0, 300f);
        // 保存したアンカーポジションに対して、1秒かけて移動するアニメーションを実行
        rectTransform.DOAnchorPos(defaultPos, 1f)
            .SetEase(Ease.Linear)
            .OnComplete(() =>
            {
                Debug.Log("GAME OVER!!");
                // UI要素の場合は、DOShakeAnchorPosでシェイク効果を実施
                rectTransform.DOShakeAnchorPos(1.5f, new Vector2(10, 10));
            });

        // 10秒後にタイトルシーンへ遷移
        DOVirtual.DelayedCall(10, () =>
        {
            SceneManager.LoadScene("TitleScene");
        });
    }
}
  • rectTransform.anchoredPosition
    UI要素の位置プロパティとして、Canvas内での配置を管理するための値です。
  • DOAnchorPos / DOShakeAnchorPos
    UIに合わせたアニメーションメソッドであり、RectTransform特有のレイアウトも考慮されています。

まとめ

  • Transform使用時
    • ゲームオブジェクト全般の位置や回転、スケールの管理に用いる。
    • DOTweenでは、DOLocalMove や DOShakePosition などのメソッドを利用してアニメーションを実装。
  • RectTransform使用時
    • UI要素専用のTransformであり、アンカー、ピボット、オフセットといったプロパティが追加されている。
    • UI要素の場合は、DOAnchorPos や DOShakeAnchorPos を使用して、Canvas内で正しくレイアウトされたアニメーション処理を実現。

今回のベースコードを元に、用途に合わせてTransformまたはRectTransformを適切に選択することで、ゲーム内のオブジェクトおよびUI要素両方に魅力的なアニメーション演出を追加できるようになります。ぜひ、シーンやプロジェクトの目的に合わせた使い分けを試してみてください。

TWeen,Unity

Posted by hidepon