- 開発環境
- DOTweenの基本形
- 平行移動
- 回転
- 拡大縮小
- 複数座標移動
- パンチング運動 (平行移動)
- パンチング運動 (拡大縮小)
- シェイク
- シンプルなジャンプ
- ゴール値ではなく初期値を使う方法
- まとめ
開発環境
- Unity5.3.6f1
- DOTween v1.1.310
UnityのTweenエンジンの中で私が最近高頻度で使っているのがDOTweenです。
正式な読み方が分からないですが、勝手に「ドットゥイーン」と呼称しています。
DOTweenとは前身であるHOTweenの改良版です。
DOTween is more than 400% faster
HOTweenと比べて400%高速だと公式ページで謳っています。
私を含め、HOTweenの文法に慣れ親しんだ人にとっては、記述が大きく変わってしまったため、導入当初はとても戸惑うかもしれません。
しかし慣れてしまうとDOTweenの方が、かなりコード量を抑えることができ、見通しの良いコードになります。
その理由としては拡張メソッドの採用が大きいです。
◆HOTween的な書き方
// 1.2秒かけて(5, 0, 0)の位置に移動します DOTween.To(() => transform.localPosition, x => transform.localPosition = x, new Vector3(5f, 0, 0), 1.2f);
第1引数に操作したいプロパティのgetter、第2引数にsetter、第3, 4引数にゴールの値とかかる時間を
| 第1引数 | 第2引数 | 第3引数 | 第4引数 |
|---|---|---|---|
| 操作したい プロパティの getter |
操作したい プロパティの setter |
ゴールの値 | 時間 |
という風にコード量が多くなります。
◆拡張メソッド版
// 1.2秒かけて(5, 0, 0)の位置に移動します transform.DOLocalMove(new Vector3(5f, 0, 0), 1.2f);
一方拡張メソッドを使うと、第1引数にゴール値、第2引数に時間と、シンプルで分かりやすいコードになります。
※内部的にはHOTween的な書き方の処理が呼び出されています
よっぽどのことが無い限りHOTweenを使う理由はなくなりました。
- 使用しているコアなライブラリがHOTweenを採用している
- 既存プロジェクトがどっぷりHOTweenに使っている
このようなケースでは仕方ないかもしれません。
本記事ではDOTweenのショートコードを紹介するとともに、「こんな機能があったのね」という個人的な新発見を綴っていくシリーズです。
今回は使用頻度ナンバーワンのTransformコンポーネントの拡張メソッドについてまとめていきます。
※注意:これからのサンプルは以下のようにDG.Tweeningをusingしている必要があります。
using DG.Tweening;
DOTweenの基本形
まずはオーソドックスな使い方から紹介します。
平行移動
Transformコンポーネントの拡張メソッド中使用頻度ナンバーワンプロパティは平行移動ではないかと思っています。
Transformクラスの拡張メソッドが定義されていると、transform.Hogehoge(); という形で実行することができるため、直感的に処理を読み書きすることが出来ます。
以下のサンプルは平行移動するだけのシンプルなコードです。
transform.DOLocalMove (new Vector3 (3f, 2, 0), 2f).SetEase (Ease.InOutQuart);
これをHOTweenで書きなおしてみると、
HOTween.To (transform, 2f, new TweenParams () .Props ("localPosition", new Vector3 (3f, 2, 0)) .Ease (EaseType.InOutQuart);
となり、非常に長ったらしいコードとなってしまうのがお分かりになるかと思います。
またHOTweenはプロパティ名を文字列指定しないといけないため、タイプミスによるバグが発生しやすいのも良くない点でしたが、DOTweenはタイプセーフで安全です。
第一引数に移動先のゴールを指定しますが、以下のようにVector3型ではなく、x, y, zを個別に指定することも出来て至れり尽くせりです。
transform.DOLocalMoveX (-3f, 2f);
y, z軸はそのままで、x軸のみ平行移動することが出来ます。
回転
transform.DOLocalRotate (new Vector3 (120f, 0, 0), 2f);
拡大縮小
transform.DOScale (new Vector3 (3f, 4f, 5f), 2f);
基本形の使い方はここまでです。
ここからは少し特殊で複雑な動きの処理を紹介していきます。
複数座標移動
第一引数にVector3型の配列を渡し、各座標を順番に通るという複数座標移動が提供されています。
transform.DOLocalPath (
new Vector3[]{
new Vector3 (3f, 3f),
Vector3.zero,
new Vector3 (-3f, 2f)
}, 2f, PathType.CatmullRom);
第三引数のPathTypeをCatmullRomにするか、Linearにするかで大きく印象が変わります。
CatmullRom
なめらかなカーブを補完してくれます。 ※上のサンプルはこのCatmullRom曲線を指定しています。
Linear
直線的な移動をします。
デフォルト引数ではLinearになっていますので、なめらかなカーブをさせたい場合は、CatmullRomをセットしてみてください。
このようにどういう軌跡を辿かはGizmosで表示可能です。
※軌跡の色は第六引数で変更可能
パンチング運動 (平行移動)
後で紹介するシェイクと似ていますが、移動するベクトル範囲を指定する所が特徴です。
transform.DOPunchPosition (new Vector3 (5f, 0f), 2f, 10, 1f);
パンチング運動 (拡大縮小)
transform.DOPunchScale (new Vector3 (3f, 3f, 3f), 3f, 3, 0);
他にDOPunchRotate(回転パンチング)があります。
シェイク
パンチングと違い、ランダムな移動を繰り返します。
カメラに適用して、衝撃の揺れ演出をするときに役立ちそうです。
transform.DOShakePosition (2f);
DOShakePosition(平行移動)以外に、DOShakeRotation(回転)、DOShakeScale(拡大縮小)が提供されています。
シンプルなジャンプ
この記事を書きながら知ったのですが、ジャンプ運動をさせることが出来ます。ただ指定するプロパティ的にあまり複雑なジャンプは難しそうです。
あまり重要でないときや、モック時にサクっと実装できて良いかもくらいに捉えておくと良いかもしれません。
transform.DOJump (new Vector3 (-3f, 0, 0), 3, 3, 3f).SetEase (Ease.Linear);
ゴール値ではなく初期値を使う方法
今までのサンプルは以下のように第1引数にゴール地点を代入していました。
transform.DOLocalMoveX (3f, 1.5f);
ゴール値ではなく初期値を代入して現在の状態にアニメーションさせる方法もあります。
// 現在の座標がx:0だった場合 transform.DOLocalMoveX (3f, 1.5f).From();
このようにFrom関数を実行すると、(x : 3)からアニメーションが始まり、現在座標(x : 0)にアニメーションします。
知ってて損はないテクニックです。
まとめ
フロントエンドエンジニアにとってTweenはプロダクトに命を吹き込む大事な道具です。
今回は使用頻度高めのTransformに限った内容で紹介してきました。
とても簡単な印象を持たれたのではないでしょうか。
DOTweenを知ってしまった今は他のエンジンを使う気になりません。
Transform以外のTweenもやりたい！！！
例えば文字列をTweenさせることもDOTweenでは簡単に実装可能です。
こちらの記事で紹介していますので、是非読んでみてください。眺めるだけでも雰囲気がつかめると思います。
アニメーションを深掘りする第1歩として役に立った本
