INDEX

UnityでTweenの実装

関連ページ
Unityで演出を作成するには、AnimationやAnimatorを使った方法や、TimeLineを使う方法などがある。
ただこれらはどちらかと言うとスクリプトを書けないデザイナ向けの機能。
スクリプトが書けるならTweenという機能で演出を作った方が、作り始めは多少骨だが、改修や微調整がしやすい。
Unityでゲーム制作する際には、このTweenによるコーディングがほぼ必須のスキルと言っていい。
Tweenを使っていない現場は見たことがない。 Tween機能はUnity公式の機能ではないので、AssetStoreからインストールする必要がある。
UnityのTweenで最も有名なライブラリはDOTweenで、これは無料版とPro版がある。
無料版でも必要十分な機能が揃っている。というかPro版は使ったことがないのでよく分からない。
・無料版 ・有料版 DOTweenで出来ることは、主にGameObjectの拡大縮小、移動、回転、UIコンポーネントの色やalphaの変更など。
DOTween単体では、例えば シェーダー のように画像を歪ませたりモザイクをかけたりなど複雑なことは出来ない。
下の動画は、基本機能のみで作った演出の一例。

ただDOTweenはTween以外の機能と連携させる事が可能で、シェーダー演出もTweenを活用した方がより簡単に実装できる。
下の動画は、Tweenの基本機能+ 発光シルエットシェーダー で作った演出の一例。

まずAssetStoreからDOTweenをインポートした後、スクリプト内にusingを追加する。 これでTweenの機能を使うことが出来る。 transformの拡張メソッドとして提供されている。
例として星の画像を2倍にするコードは下の通り。第1引数が最終的にサイズ、第2引数がサイズ変更にかかる時間。

transformの拡張メソッドとして提供されている。
星の画像を右に500動かすコードは下の通り。第1引数が目的地の座標、第2引数が移動にかかる時間。

座標移動系の関数は他にもいっぱいあって、例えばワールド座標を基準にして動かすDOMoveや座標を往復するDOJumpなどがある。
transformの拡張メソッドとして提供されている。
星の画像をz軸に180度左回転させるコードは下の通り。第1引数が最終的な角度、第2引数が回転にかかる時間。

ワールド上での角度を基準にしたDORotateという関数もある。 色変更系の関数は、TextやImageなど色を指定できるuGUIのコンポーネントに対する拡張メソッドとして提供されている。
DOFadeに関してはCanvasGroupに対しても使用可能。
星の画像のカラー設定を赤色にするコードは下の通り。第1引数が最終的な色、第2引数が色変更にかかる時間。

現実の物理では、物体は常に重力や摩擦の影響を受けるので、移動や回転が同じ速度で動きつづけることは少ない。
Ease機能を使うとより現実に近い自然な挙動を再現できる。
DOTWeenで用意されてる Easeの設定は32個 あり次の動画はその一部。

Easeの識別名は概ね傾向がある。 最初に徐々に加速は「In～」、最後に徐々に減速は「Out～」、加速と減速両方実行するのは「InOut～」。
LinearはEaseをかけない等速運動のこと。 後ろにSetEaseとつけることで対象の動きにEaseを付けることができる。例えばOutQuartのEase設定だと次の通り。 なおDOTweenではデフォルト設定がOutQuadなので、SetEaseを使わない場合はLinearではなくOutQuadになる。
DOTweenが用意しているEase設定を使わずに、自分で作った独自のAnimationCurveを設定することもできる。
これらのEase設定は、座標移動だけではなく拡大縮小や回転など他のあらゆるTweenでも設定が可能。 後ろにSetDelayとつけることで簡単に遅延処理を実装することができる。

見ての通り、下の星はボタンをタップしてから0.2秒後に移動を開始している。 DOTweenでは、後ろにOnComplete関数を付けてその引数にコールバックを仕込むことができる。
見ての通り、最初の右に500動くTween処理が完了するのを待ってから、下に200動くTween処理を実行している。 DOTweenが公式サポートしていないコンポーネントに対しても、ユーザーが自由に紐づけてTween処理が実装できる。
これにはDOTween.Toという汎用性の高い関数を使う。
実のところ今までのDOTweenの関数は、内部的には全てDOTween.To関数を使っている。DOColorは内部的な処理は次の通り。 DOTweenはMatarialやShaderに対する拡張メソッドはほぼ用意していないので、DOTween.Toを直接触っていく。
例えば シルエットシェーダー を用いて、starの画像を1秒かけて灰色にシルエット化したいとする。
このシェーダーは_BlendRateという変数でシルエット率を制御できるので、DOTween.To内でそれを操作することでアニメーションを実装する。 DOTween.Toは4つの引数を指定する必要がある。
第1引数は操作したい変数に対するgetter、第2引数は操作したい変数に対する代入処理、第3引数は最終的な値、第4引数は変更にかかる時間。 ここではシェーダーに対する連携を行っているか、別にDOTween.Toはシェーダーに限らずあらゆる機能と連携が取れる。
たとえばTweenを使って徐々にBGMの音量を高くすることも可能。