【Unity】DOTweenのDOVirtualを使おう

ストレッチ

リングフィットアドベンチャーは最初のストレッチの段階で疲労してしまう皆さんこんにちは。ストーリーモードをプレイするとリングコンをお腹に押し当てる「腹筋ガード」を異常にやらされるのでお臍の辺りが筋肉痛で辛いです。

インプレッション数

毎回ブログを更新するとTwitterの方に告知をするのですが、前回記事の告知ツイートが何故かリツイートされてインプレッション数がいつもとは桁違いでした。
最初は冒頭に載せているゲームの進捗画像が注目を浴びたのか、と喜んでいたのですが、良く調べるとブログの記事がアセット紹介だったのでUnityのアセットストア公式アカウントが記事に反応してリツイートしてくれたおかげでした。ありがとうございます。次は自力でバズれるように頑張ります。(本当にありがとうございます。)

DOTween

今更紹介するまでもないのですが「DOTween」というアセットはオブジェクトの移動や回転、拡大縮小を簡便に行えるアセットで、例えば「地点Aに1.5秒で移動する」といった動作(Tween)はAPIコール1つで実装することができます。

assetstore.unity.com

ただ、「1.5秒間でオブジェクトが拡大(縮小)し、最初の大きさに戻る」といった動きをしたい場合は、Sequenceというクラスに「拡大する動作(Tween)」と「もどの大きさに戻る動作(Tween)」をそれぞれ登録してSequenceを実行する(Playメソッドをコールする)必要がありました。

まぁ、そのような実装方式で作業を進めても問題ないのですが、「いったん大きくなって元に戻る」といった単純な動作にわざわざSequenceを使うまでもないかなぁと個人的に思っていて、そういったときはDOTweenのToメソッドを使った方式で実装していました。
この手法についてはかなり前に記事にして紹介しています。

www.karvan1230.com

アニメーションカーブを使う

上の記事では拡大縮小の計算にsin,cosの三角関数を使用していますが、もうちょっと拡大縮小の動きに自由度のある方法がないかと考えた時、アニメーションカーブを使う方法が良さそうに思います。
アニメーションカーブはスクリプト内にAnimationCurveクラスを定義するだけでInspector上にアニメーションカーブを編集できるエディタが表示され、任意の形のカーブを編集する事ができます。

public AnimationCurve _customEasing;

今回は「いったん大きくなって元に戻る」という変化を表すカーブを作りました。
縦軸が変化量で横軸が経過時間を表し、どちらも0～1の値をとります。

縦軸の値は以下の関数から取得できるので、

/// <summary>
/// アニメーションカーブから値取得
/// </summary>
public float GetCurveValue(float time)
{
    return _customEasing.Evaluate(time);
}

timeの値をTweenさせたい時間で0～1に変化させればアニメーションカーブに応じた変化量が取得できます。

DOVirtual

上の記事のようにDOTweenのToメソッドを使ってtimeの値を変化させても良いのですが、その場合、変数timeはグローバル変数である必要がでてくるので、もっと手軽にローカル変数のみで実装したい場合は、DOVirtualを使用した方がコード的にもスッキリした形で実装できます。

DOVirtual.Float(開始の値, 終了の値, 時間, コールバック); 

DOVirtual.Floatに渡す第三引数がコールバック関数で、そこにアニメーションカーブに応じた変化量を渡して

/// <summary>
/// ジャンプ動作終了
/// </summary>
public void OnComplete_JumpMove()
{

    DOVirtual.Float(0.0f, // 開始の値
    		1.0f, // 終了の値
    		0.6f, // 時間
    		value => ChangeScale(GetCurveValue(value))); // コールバック

}

/// <summary>
/// スケールの変換
/// </summary>
/// <param name="value"></param>
public void ChangeScale(float value)
{
    this.transform.localScale = new Vector3(OriScale.x + value,
                                            OriScale.y - value,
                                            OriScale.z + value);

}

縦、横のスケールを変化させるようにします。
下の動画では各ペンギンのジャンプ動作が終わったタイミングで縦、横のスケールを変化させています。