Unity

DOTweenの使い方 Tweenアニメーション入門【Unity】

DOTweenの使い方 - Tweenアニメーション入門【Unity】
記事内に商品プロモーションを含む場合があります

前回の記事で、DOTweenとは何か？他のTweenアセットとの比較や、Unity標準のアニメーションシステムであるMecanimとの比較について解説しました。

DOTweenとは？Mecanim(Animator)との違い
DOTweenとは？Mecanim(Animator)との違いTweenアセットとは何なのか？その中でもDOTweenを選ぶ理由と、Unity標準のアニメーション機能であるMecanim(Animator)との使い分けについて解説していきます。...

今回は、DOTweenの使い方について解説していきます。

Youtube版

この記事の内容は、Youtube動画にて最新情報を踏まえながら更に詳しく解説しています。

前回の動画はこちら ▶ 最強のTweenアセット「DOTween」の紹介とMecanimとの使い分けについて

導入

AssetStoreからインストール

assetstore.unity.com
外部サイト
DOTween (HOTween v2) | アニメーション ツール | Unity Asset Store
Use the DOTween (HOTween v2) tool from Demigiant on your next project. Find this & more animation tools on the Unity Asset Store.

Pro版もありますが、機能的にはフリー版で十分です。

Pro版ではGameObjectにDOTweenのコンポーネントをつけてInspectorからアニメーションの設定を行うことができます。非エンジニアに設定を任せる場合は、Pro版も有効かと思います。

DOTween自体はオープンソースなので、GitHubから取得することもできます。

GitHub
外部サイト
Demigiant/dotween
A Unity C# animation engine. HOTween v2. Contribute to Demigiant/dotween development by creating an account on GitHub.

using DG.Tweening

スクリプト冒頭でDG.Tweeningをusing指定して下さい。

using DG.Tweening;
DGって？

DOTweenを開発しているDemigiant社の略です。

設定

Unityのメニューより設定を開くことができます。

Tools > Demigiant > DOTween Utility Panel > Preferences

基本的にはデフォルトで問題ありません。

アニメーション実行方法

Transformの例

シンプルな例としてTransformの移動について見ていきましょう。

transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f);
  • 座標 (0, 0, 10) に向けて
  • 0.5秒で
  • transformのlocalPositionを移動させる

という指定です。

transform.positionを移動させる場合は、「DOMove」を使用します。

今回はDOTweenで実行できるアニメーションの種類を網羅することはしませんが、例として以下のようなことができます。

  • 回転：DORotate()
  • 拡大/縮小：DOScale()
  • ジャンプ動作：DOJump()
  • パス（経路）をVector3の配列で指定して移動：DOPath()
  • BGM/SEのフェード：AudioSource.DOFade()
  • マテリアル色のアニメーション：Material.DOColor()
  • UI画像のフェード：Image.DOFade()

英語にはなってしまいますが、全種類を網羅しているのは公式のドキュメントです。

dotween.demigiant.com
外部サイト
DOTween – Documentation
DOTween is the evolution of HOTween, a Unity Tween Engine

メソッドチェーン

DOTweenでは、 何のアニメーションをするか ＋ オプション のメソッドチェーンで書くのが一般的です。

transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f)
         .SetDelay(1f)
         .SetRelative()
         .SetEase(Ease.OutQuad)
         .SetLoops(2, LoopType.Incremental);

このように一度Tweenのオブジェクトを受け取ってからオプションを追加しても問題ありません。

Tween t = transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f);
t.SetDelay(1f);

DOTweenの仕組みとしてDOLocalMoveを実行した時点ではアニメーションは開始されておらず、そのフレームの最後にまとめてアニメーションを開始します。

そのため、アニメーションの実行メソッドを書いた後でも同一フレーム内であればオプションを追加できます。

代表的なオプション

SetDelay(待機時間/秒)

指定秒数、待ってからTweenを再生します。

SetRelative()

相対的なアニメーションに変更します。先ほどのTransformの例であれば、

transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f)
         .SetRelative();

Tween前の座標が（0, 0, 5）の時、

  • SetRelativeなし：（0, 0, 10）へ移動
  • SetRelativeあり：（0, 0, 15）へ移動

となります

SetLoops(ループ回数, LoopType)

ループ回数を指定します。-1を指定すると永久ループになります。

LoopTypeに指定できる種類は以下の通りです。

Incremental前回の位置を基準にしながら差分移動
Restart同じ動きを繰り返す
Yoyoヨーヨーのように、進んでは戻るを繰り返す

SetEase(Ease or AnimationCurve)

アニメーションの進み具合を指定します。DOTweenで用意されているEase型で指定するか、Unity標準のAnimationCurve型を渡します。

等速ならEase.Linearです。

前回の記事でも書きましたが、現実世界では物が等速移動することはあまりないため、Easingを指定すると自然に見えます。

Easing指定に迷ったら以下のサイトなどで動きを確認しましょう。DOTweenでも同じものを指定することができます。

easings.net
外部サイト
Easing Functions Cheat Sheet
Make animations more realistic by picking the right easing function.

各種コールバック

コールバックもメソッドチェーンで追加します。

transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f)
         .OnComplete(() => {
             gameObject.SetActive(false);
         });

OnStart()

再生開始時に呼ばれます。

再生開始時っていらないイメージがあるかもしれないですが、先述した通りDOTweenのアニメーションが実行されるのはフレームの最後にまとめてなので、アニメーションの実行を書いた時とは状況が変わっていることもあり得ます。

また、後述するSequenceを使う場合は役に立つことが多々あります。

OnUpdate()

アニメーション対象のパラメータの値が更新される度に呼ばれます。要するに毎フレーム呼ばれます。

OnComplete()

完了時に呼ばれます。

再生完了を待たずに、完了したことにするComplete()メソッドも存在します。

Tween t = transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f);
t.Complete();

OnKill()

Tweenオブジェクトが破棄された時に呼ばれます。

アニメーションの破棄（Kill）

Killされることでメモリにプールされ、Tweenオブジェクトが再利用可能になります。

設定でオフにしていない限りは、再生終了時（Complete時）に自動でKillされるようになっています。手動で呼ぶことも可能です。

Tween t = transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f);

// 内部でnullチェックされているので、nullチェックは不要
DOTween.Kill(t);

// 第2引数をtrueにするとOnCompleteのコールバックも呼ばれる
DOTween.Kill(t, true);

// この書き方でもOK
t.Kill();

DOTween.To

DOTweenで対応されているアニメーション対象にどんなものがあるか忘れてしまったり、そもそも知らなかったということがよくあります。

intもしくはfloatの値をアニメーションさせる機能であるDOTween.Toを使えば、どんなパラメータでも間接的にアニメーションさせることができます。

前回の記事に載せたサンプル動画でコインが増えるアニメーションのような、数字のアニメーションを例にします。

UpdateCoinを呼ぶ度に、現在の値から指定したコイン数まで数字のテキストを更新する処理です。

この例では、連続で呼んでも大丈夫なように前回実行したTweenは破棄しています。

DOTween.Toの使い方

DOTween.To（getter, setter, to, duration）

  1. getter: 開始値を渡すメソッドを指定します。
  2. setter: 更新メソッドを指定します。引数として更新された値を受け取ることができるので、それを使ってTextに反映します。
  3. to: 終了値を指定します。
  4. duration: アニメーションの時間を指定します。

開始値を渡すのにメソッドを使うgetterではなく値を直接渡せるバージョンもありますが、引数の順番が異なるのとなぜかfloatしか対応していないので注意です。

DOTween.To(setter, startValue, endValue, duration)

上の例ではsetterにラムダ式を使っていますが、以下のようにメソッドを分けて定義しておき、直接渡すことも可能です。

Sequence

Tweenを順番に実行したい時に使える機能です。

以下のように発行します。

Sequence sequence = DOTween.Sequence();

この発行したSequenceに対してTweenを追加していきます。

Tweenの追加方法

追加方法は3つあります。

Append()前のTweenが終わってから実行
Join()前のTweenと同時に実行
Prepend()再生済のものを除いて、先頭に追加

Prepend()がちょっとややこしいですが、Sequenceを作った直後ではなくて既に再生して時間が経っている場合をイメージして下さい。

既に再生が終わっているものは無視して、次に再生するTweenとして割り込ませるイメージです。

コールバックの追加方法

Sequenceの途中で処理を実行することができます。

Sequence sequence = DOTween.Sequence();
sequence.AppendCallback(() => gameObject.SetActive(false));

こちらもAppendではなくPrependが利用できます。

Sequence例

サンプル動画で、ハズレだった時の宝箱の攻撃部分のシーケンスです。

再生タイミングについて

何度も書いてきた通りTween、Sequenceは作ったらフレームの最後にまとめて自動再生されます。（設定で変更可能）

事前にオブジェクトだけ作っておいて任意のタイミングで再生したい場合は、作った直後にPause()を実行しておきます。

再生したい時になったら、Play()を呼びます。

Tween t = transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f);
t.Pause();

t.Play();

一時停止

上記のPause()は一時停止の機能なのでいつでも使うことが出来ます。

一時停止した場合、再開する時はPlay()とRestart()の使い分けが必要です。

t.Pause();
// 再開
t.Play();

// 最初から再生
t.Restart();

注意点

DOTweenを使う上で注意点がいくつかあるのでこちらで解説します。

dll化の罠

アセットストアから導入するとdll化されているため、コールバックで発生したエラーを追うのが少し大変です。

Consoleでエラーログをダブルクリックして開くファイルと行位置がエラーの原因箇所とずれることがある。エラーがWarning扱いになるといった問題があります。

Capacity

最初のTweenを実行するとき、もしくはDOTween.Init()をコールした時にまとめてメモリ確保を実行します。

以下のメソッドで確保するメモリ量を指定できます。

DOTween.SetTweensCapacity(Tween数, Sequence数);

デフォルトはTween200、Sequence50です。

この指定値を超えてTweenを実行してしまうとGCAllocが発生し、Warningが出ます。

最初から余裕をもったCapacityを設定しておきましょう。

スマートフォン端末などでは初回のGCAllocでほぼ間違いなく画面がカクつきます。DOTween.Init()をロード画面など見た目に影響が出ないところで実行しておきましょう。

Killの罠

TweenとSequenceで挙動が異なるため、注意して下さい。

// Tweenはこれでもいいし、t.Kill()でもOK
Tween t = transform.DOLocalMove(new Vector3(0, 0, 10f), 0.5f);
DOTween.Kill(t);

// SequenceではDOTween.Kill()ではKillできない！！
Sequence sequence = DOTween.Sequence();
sequence.Kill(); // 必ずこちらで

まとめ

DOTweenは使えば使うほど良さが分かってきます。

まずは簡単な機能から試してみて下さい。

そこからオプションを活用したり、Sequenceを活用したりしてみてゲームのアニメーションをクオリティの高いものに仕上げていきましょう！

関連記事