DOTween を使用したオブジェクトの移動とスケールアニメーション実装ガイド

2025年4月8日

本資料では、Unity 用ツイーニングライブラリ「DOTween」を用いて、オブジェクトの移動とスケールのアニメーションを実装する方法を紹介します。ここでは、オブジェクトを3秒間かけてX軸方向に3ユニット移動し、同時にスケールを0.5から2に変更する処理を実装し、アニメーション完了後に「終わり」とログ出力するサンプルコードを中心に解説します。

DOTween のセットアップ

1. DOTween のインストール

  1. Unity Asset Store からの導入
    • ブラウザで Unity Asset Store にアクセスし、「DOTween」で検索。
    • 無料版または有料版（DOTween Pro）を選択し、ダウンロードします。
  2. Unity プロジェクトへのインポート
    • ダウンロード後、「My Assets」から Package Manager 経由でプロジェクトへインポートします。

2. DOTween の初期設定

  • インポート直後、DOTween Setupウィンドウが自動的に表示される場合もありますが、表示されない場合は Unity エディター上部の
    Tools > Demigiant > DOTween Utility Panel
    からアクセスしてください。
  • パネル内の Setup DOTween… ボタンをクリックして初期設定を完了させます。

基本的な使用方法

DOTween を利用するための基本的な手順は以下の通りです。

  1. 名前空間のインポート
using DG.Tweening;
  1. Tween の作成
    例として、オブジェクトを X 軸方向に移動させる Tween は以下のように実装できます。
transform.DOMoveX(3f, 3f);
transform.DOMoveX(transform.position.x + 3f, 3f);

このコードでは、

  • 第一引数：transform.position.x + 3f が最終的な X 座標（現在の位置から右に 3 ユニット）を表し、
  • 第二引数：3f が移動にかかる時間（3秒）を示しています。

DOTween は直感的なメソッド設計となっているため、初心者でも手軽にアニメーションが実装できます。

シーケンスを用いた実装例

複数の Tween を同時または順番に実行する場合、DOTween の Sequence 機能を活用します。以下は、オブジェクトの移動とスケール変更を並列に実行する実装例です。

using UnityEngine;
using DG.Tweening;

public class MoveAndScaleExample : MonoBehaviour
{
    void Start()
    {
        // アニメーション開始前に初期スケールを 0.5 に設定
        transform.localScale = Vector3.one * 0.5f;

        // シーケンスを作成
        Sequence mySequence = DOTween.Sequence();

        // X軸方向に現在位置から3ユニット移動する Tween を作成
        Tween moveTween = transform.DOMoveX(transform.position.x + 3f, 3f)
                                   .SetEase(Ease.Linear);

        // スケールを 2 に変更する Tween を作成
        Tween scaleTween = transform.DOScale(2f, 3f)
                                    .SetEase(Ease.Linear);

        // シーケンスに2つの Tween を同時に追加（並列実行）
        mySequence.Join(moveTween);
        mySequence.Join(scaleTween);

        // シーケンス完了時にコールバックを設定
        mySequence.OnComplete(OnSequenceComplete);
    }

    // シーケンス完了時に呼び出されるコールバック
    void OnSequenceComplete()
    {
        Debug.Log("終わり");
    }
}

この実装例では、Join メソッドを用いて Tween を同時に実行しています。もし順次実行したい場合は、Append を使用してください。

DOMove と DOLocalMove の違い

DOTween には、DOMove と DOLocalMove の2つの移動メソッドが存在します。以下の点に注意してください。

  • DOMove
    • ワールド座標系に基づいて移動します。
    • シーン全体の絶対位置（グローバルな位置）を指定する場合に使用します。
    • 例: transform.DOMove(new Vector3(3, 0, 0), 2f);
  • DOLocalMove
    • ローカル座標系に基づいて移動します。
    • 親オブジェクトに対する相対位置を指定する場合に適しています。
    • 例: transform.DOLocalMove(new Vector3(3, 0, 0), 2f);

親オブジェクトの有無や、移動の基準となる座標系に応じて使い分けることが重要です。

コード詳細解説

以下、実装コードの各部分について解説します。

1. 初期スケールの設定

transform.localScale = Vector3.one * 0.5f;
  • 目的: アニメーション開始前にオブジェクトのスケールを明示的に設定し、初期状態を確定する。
  • 詳細: Vector3.one は (1, 1, 1) を表し、これに 0.5 を乗算することで (0.5, 0.5, 0.5) のスケールとなる。

2. シーケンスの作成

Sequence mySequence = DOTween.Sequence();
  • 目的: 複数の Tween をまとめて管理し、同時実行または順次実行を容易にするためのシーケンスを作成する。
  • 詳細: Sequence オブジェクトは、Tween の実行順序や並列・逐次実行の制御をサポートする。

3. Tween の作成

移動 Tween

Tween moveTween = transform.DOMoveX(transform.position.x + 3f, 3f)
                           .SetEase(Ease.Linear);
  • 目的: オブジェクトを X 軸方向に現在位置から 3 ユニット移動させる。
  • 詳細:
    • DOMoveX は指定した X 座標に移動する Tween を生成する。
    • transform.position.x + 3f により、現在の位置から右方向に 3 ユニット移動。
    • 3f はアニメーションの所要時間。
    • SetEase(Ease.Linear) により、線形（一定速度）のイージングを適用。

スケール Tween

Tween scaleTween = transform.DOScale(2f, 3f)
                           .SetEase(Ease.Linear);
  • 目的: オブジェクトのスケールを 0.5 から 2 に変更する。
  • 詳細:
    • DOScale は対象のオブジェクトを指定したスケールに変更する Tween を生成する。
    • 2f は最終的なスケール値。
    • SetEase(Ease.Linear) により、スムーズな線形遷移を実現。

4. シーケンスへの Tween 追加

mySequence.Join(moveTween);
mySequence.Join(scaleTween);
  • 目的: 複数の Tween を同時に実行するために、シーケンスに追加する。
  • 詳細: Join メソッドを使うと、指定した Tween 同士が同一のタイムライン上で並列実行される。

5. シーケンス完了時のコールバック設定

mySequence.OnComplete(OnSequenceComplete);
  • 目的: アニメーションがすべて終了した際に追加処理（ここではログ出力）を行うためのコールバックを設定する。
  • 詳細: アニメーション完了時に OnSequenceComplete メソッドが呼び出され、"終わり" とログに表示されます。

注意点とベストプラクティス

  • アニメーションの管理
    複数のアニメーションを組み合わせる場合は、シーケンスやメソッドチェーンを利用してコードの可読性と保守性を向上させましょう。
  • イージングの選択
    イージング設定（SetEase）はアニメーションの動きを大きく左右します。状況に応じた適切なイージング（例：Ease.OutBounce など）を選択すると、視覚的に魅力的な動きを実現できます。
  • リソース管理
    使用済みの Tween は Kill メソッドを利用して明示的に解放し、不要なメモリ使用を抑制することで、特にモバイル環境でのパフォーマンス向上に寄与します。
  • リピートアニメーション
    DOTween の SetLoops メソッドを使うと、アニメーションの繰り返し再生が可能です。無限ループなどでユーザーの注目を持続させる演出に利用できます。
  • デバッグ
    アニメーションが期待通りに動作しない場合は、OnStart や OnUpdate のコールバックを活用して、処理の流れや状態を確認しましょう。

まとめ

DOTween を使用することで、Unity におけるアニメーション実装が非常に柔軟かつ直感的に行えます。

  • シーケンスを活用することで、複数のアニメーションを統合的に管理できる
  • DOMove と DOLocalMove の使い分けにより、シーン構成に応じた正確な動作が実現できる

これらの手法をマスターすることで、より魅力的でインタラクティブな演出をプロジェクトに取り入れることが可能となり、ユーザーエクスペリエンスの向上に大きく貢献します。

以上が、校正・再構成した DOTween によるオブジェクトの移動とスケールアニメーション実装ガイドです。必要に応じて、各セクションをプロジェクトの要件に合わせて調整してください。

TWeen,Unity

Posted by hidepon