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

DOTweenは、Unity向けの強力で柔軟なツイーニング（補間）ライブラリです。オブジェクトの移動、回転、スケール変更など、さまざまなアニメーションを簡単に実装することができます。本技術資料では、DOTweenを使用して3秒間かけてオブジェクトをX軸方向に3ユニット移動しながら、その大きさを0.5から2に変更し、アニメーション完了後に「終わり」とログに表示する方法について解説します。シーケンスとメソッドチェーンの両方の実装方法を紹介します。これにより、プログラマーは柔軟なアニメーションを効率的に実装するスキルを身につけることができます。

DOTween のセットアップ

1. DOTween のインストール

DOTweenをプロジェクトに導入するには、以下の手順に従ってください。最新のUnityバージョンでは、Asset Storeからのインストールが完全にWeb経由となっています。

Unity Asset Storeのウェブサイトにアクセス

DOTweenを検索

  • 検索バーに「DOTween」と入力し、検索結果からDOTweenを選択します。

購入またはダウンロード

  • DOTweenは無料版と有料版（DOTween Pro）があります。必要に応じて選択し、ダウンロードします。

Unityプロジェクトへのインポート

  • 「My Assets」に保存されているので、Package Managerからインポートします。

2. DOTweenの初期設定

DOTweenを初めて使用する際には、初期設定を行う必要があります。以下の手順で初期化を行います。

DOTween Setupウィンドウを開く

  • インポート直後にもこのウィンドウは開いています
  • Unityエディターで Tools > Demigiant > DOTween Utility Panel を選択します。

初期化の実行

  • DOTween Utility Panelが表示されたら、Setup DOTween... ボタンをクリックします。これにより、DOTweenが正しく設定され、プロジェクト内で使用可能になります。

基本的な使用方法

DOTweenを使用するための基本的な流れは以下の通りです。

  1. 名前空間のインポート
   using DG.Tweening;
  1. Tweenの作成
  • 例: オブジェクトの位置を変更するTween
   transform.DOMoveX(3f, 3f);

DOTweenは非常に直感的で簡単に使うことができるため、初心者でも手軽にアニメーションを実装できます。また、多彩なオプションと設定を用いることで、複雑なアニメーションを作成することも可能です。

オブジェクトの移動とスケールアニメーションの実装

DOTweenを使用してオブジェクトの移動とスケールのアニメーションを実装する方法をいくつか紹介します。

シーケンスを使用する方法

DOTweenのSequenceを使用して、複数のTweenを順序立てて制御する方法です。シーケンスを使うことで、異なるアニメーションをまとめて実行することが可能になります。

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);

        // シーケンスにTweenを同時に追加
        mySequence.Join(moveTween);
        mySequence.Join(scaleTween);

        // シーケンス完了時にログを表示
        mySequence.OnComplete(OnSequenceComplete);
    }

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

シーケンスを使用することで、複数のアニメーションをタイムライン上で一括管理でき、個別に実行するよりも簡潔にコードを書くことができます。

DOMoveとDOLocalMoveの違い

DOTweenにはDOMoveとDOLocalMoveという2つのメソッドがありますが、それぞれの違いは「座標系」に基づいた移動の方法にあります。

  • DOMove:
    • ワールド座標系に基づいてオブジェクトを移動します。
    • オブジェクトをシーンの絶対位置（グローバルな位置）に移動させる場合に使用します。
    • 例えば、transform.DOMove(new Vector3(3, 0, 0), 2f)というコードでは、オブジェクトはワールド座標(3, 0, 0)の位置に2秒かけて移動します。
  • DOLocalMove:
    • ローカル座標系に基づいてオブジェクトを移動します。
    • オブジェクトが親オブジェクトに対して相対的な位置に移動する場合に使用します。
    • 例えば、transform.DOLocalMove(new Vector3(3, 0, 0), 2f)というコードでは、オブジェクトは親オブジェクトのローカル空間において相対的に(3, 0, 0)の位置に移動します。

使い分けるタイミング

  • オブジェクトが親オブジェクトを持たない場合、どちらを使っても同じ挙動になります。
  • 親オブジェクトが存在する場合は、DOMoveを使うとシーン全体のワールド座標で動作し、DOLocalMoveを使うと親オブジェクトに対して相対的に動作します。例えば、キャラクターが何かに乗っている状態で、乗り物の移動とキャラクターの位置を連動させる場合などにDOLocalMoveが有用です。

この違いを理解することで、シーンの構成に応じた適切な移動方法を選択し、意図した通りの動きを実現できます。

コードの詳細解説

1. 初期スケールの設定

transform.localScale = Vector3.one * 0.5f;
  • 目的: アニメーション開始前にオブジェクトのスケールを0.5に設定します。
  • 詳細: 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ユニット移動させるTweenを作成します。
  • 詳細:
    • DOMoveXは、指定したX座標に移動するTweenを作成します。
    • transform.position.x + 3fで現在のX位置から3ユニット右に移動します。
    • 3fはアニメーションの所要時間（秒）です。
    • SetEase(Ease.Linear)でイージングを線形に設定し、一定速度で移動します。

イージングを適切に選択することで、アニメーションの見た目を自然にし、プレイヤーにとって心地よい動きを実現することができます。

スケールTween

Tween scaleTween = transform.DOScale(2f, 3f)
                           .SetEase(Ease.Linear);
  • 目的: オブジェクトのスケールを2に変更するTweenを作成します。
  • 詳細:
    • DOScaleは、指定したスケールに変更するTweenを作成します。
    • 2fは最終的なスケール値です。
    • 3fはアニメーションの所要時間（秒）です。
    • SetEase(Ease.Linear)でイージングを線形に設定します。

スケール変更は、オブジェクトの注目度を高めたり、シーン内での存在感を強調したい場合に非常に有効です。

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

mySequence.Join(moveTween);
mySequence.Join(scaleTween);
  • 目的: 作成したTweenをシーケンスに同時に追加し、並列実行します。
  • 詳細: Joinメソッドを使用することで、複数のTweenが同時に実行されます。

シーケンスにTweenを追加する際には、AppendやJoinを使って異なるタイミングでの実行を制御することができます。これにより、アニメーションの流れをより柔軟に調整することが可能です。

mySequence.Append(moveTween);
mySequence.Append(scaleTween);

Appendメソッドは、シーケンスにツイーンを順番に追加するメソッドです。最初のAppendで追加されたツイーンが最初に実行され、次に追加されたツイーンがその後に実行されます。

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

mySequence.OnComplete(OnSequenceComplete);
  • 目的: シーケンスが完了したときに特定の処理を行うためのコールバックを設定します。
  • 詳細: OnCompleteメソッドにより、シーケンスが終了した際に OnSequenceComplete メソッドが呼び出されます。

アニメーション完了後のコールバックを設定することで、次のアクションをスムーズに行うことができ、ユーザーのインタラクションを途切れさせることなく実現できます。

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

アニメーションの管理

  • 複数のアニメーションを同時に実行する際には、シーケンスやメソッドチェーンを使用して、コードの可読性を高めることが重要です。これにより、アニメーションの制御が簡潔になり、将来的なメンテナンスも容易になります。

イージングの選択

  • アニメーションのイージング（SetEase）は視覚的な効果に大きな影響を与えます。適切なイージングを選択することで、自然で魅力的なアニメーションを作成できます。例えば、Ease.OutBounceを使用すると、弾むような動きが追加され、アニメーションに遊び心を加えることができます。

リソースの解放

  • 不要になったTweenは Kill メソッドを使って明示的に解放することで、メモリ使用量を抑えることができます。これにより、特にモバイルデバイスでのパフォーマンスを最適化することができます。

リピートアニメーションの使用

  • DOTweenでは SetLoops メソッドを使用してアニメーションをリピートすることが可能です。例えば、無限に繰り返す設定により、アニメーションが途切れなく再生され、ユーザーの目を引く効果を持続させることができます。

デバッグの活用

  • アニメーションが意図した通りに動作していない場合は、OnStartやOnUpdateといったデバッグ用のコールバックを使用することで、問題を特定しやすくなります。

まとめ

このガイドでは、DOTweenを使用してオブジェクトを移動・スケールアニメーションさせる方法について説明しました。DOTweenを使用することで、簡単に柔軟なアニメーションを実装することが可能です。シーケンスやメソッドチェーンを活用することで、複雑なアニメーションもシンプルに管理できます。

DOTweenの使い方をマスターすることで、Unityプロジェクトにおけるアニメーションの幅が広がり、より魅力的でインタラクティブな演出を実現できるようになります。アニメーションはゲームやインタラクティブなアプリケーションにおいて重要な要素であり、視覚的な体験を大きく向上させる力を持っています。DOTweenを使いこなすことで、ユーザーにとってエンゲージメントの高い体験を提供し、プロジェクト全体の品質を向上させることができるでしょう。

参考

学習動画

Unity

Posted by hidepon