【Unity】DotweenのToを使ったオブジェクトの伸縮 - 原カバンは鞄のお店ではありません。

衣替え

曇り続きならがらも蒸し暑かった夏も終わって朝夕は肌寒いほどとなってきました。衣替えの季節と言えますが、タンスにしまっていた秋冬用のズボンを取り出したら何故か縮んでいてウエストが閉まらない、という経験をした皆さんこんにちは。

私はカッターシャツのボタンが閉まりませんでした。縮んですねカッターシャツって。

DotweenのToってやつ

さて、DotweenにはDOMoveやDOJump、SequenceなどObjectのtransformに関しては様々なTweenメソッドが用意されていますが、任意のプロパティとかクラス変数などをTweenしようと思うとToメソッドを使うことになります。

iTweenのValueToと同じような機能なんですが、Hashtableを使うiTweenとは異なりDotweenではラムダ式での指定となるので慣れないとちょっと分かりづらいです。
「Number」というクラス変数を1秒で0～100に変化させたい場合の指定は以下のようになります。

float Number = 0.0f;
float TargeValue = 100.0f;
float TweenTime = 1.0f;

DOTween.To 
(
	() => Number, 		//何に
	(x) => Number = x,	//何を
	TargeValue,		//どこまで(最終的な値)
	TweenTime		//どれくらいの時間
);

変化させたい変数はVector3とかでも可能なのでかなり便利なメソッドなのですが、意外に必要となる場面は少なくてネットを漁ってもImageやMaterialのColorやAlphaを変える使用例ぐらいしか見当たりません。
なので、ちょっと強引ですがtransformにDotweenのToを使った使用例を考えてみました。

オブジェクトの伸縮

今回は下の動画のようなJumpするキャラクターに変化を加えます。

f:id:Karvan:20191015211627g:plain

キャラクターのJumpはDOJumpを使って動かしているのですが、それに合わせてキャラクターのlocalScaleを変化させます。
ジャンプ中は縦(Y)方向に伸びて横(XZ)方向は縮むように、逆に着地後は横に伸びて縦は縮むようにします。

// 縦(Y)方向に伸びて横(XZ)方向は縮む
this.transform.localScale = new Vector3(
    1.0f - 0.40f * Mathf.Sin(amountVal * Mathf.Deg2Rad),
    1.0f + 0.40f * (Mathf.Sin(amountVal * Mathf.Deg2Rad)),
    1.0f - 0.40f * Mathf.Sin(amountVal * Mathf.Deg2Rad));

// 横(XZ)方向に伸びて縦(Y)方向は縮む
this.transform.localScale = new Vector3(
    1.0f + 0.45f * Mathf.Sin(amountVal * Mathf.Deg2Rad),
    1.0f - 0.45f * (Mathf.Sin(amountVal * Mathf.Deg2Rad)),
    1.0f + 0.45f * Mathf.Sin(amountVal * Mathf.Deg2Rad));

単純な処理なんですがsin関数を使った単振動なので「amountVal」を0～180に変化させれば、localScaleは最終的に元に戻ってくれます。便利。

よって、この処理にDotweenのToを使って「amountVal」を変化させてやることになります。
なお、Dotween.Toでは変化中のコールバック(OnUpdate)が指定できるので、ジャンプ中と着地後それぞれでコールバックを指定して、その中で上の処理を使ってlocalScaleを変更させます。

public float amountVal = 0;

public void JumpCharactor()
{
    // ジャンプ処理
    Vector3 dispPos = this.transform.position;
    this.transform.DOJump(dispPos, 1.0f, 1, 1.0f)
                        .OnComplete(OnComplete_Jump);
	
    // amountValの変化
    DOTween.To( () => amountVal, 
                (x) => amountVal = x, 
                180.0f, 
                1.0f)
              .OnUpdate(CallBack_ChangeValues);
}

// コールバック：ジャンプ中のamountValの変化
public void CallBack_ChangeValues()
{
	// 縦(Y)方向に伸びて横(XZ)方向は縮む
	this.transform.localScale = new Vector3(
	    1.0f - 0.40f * Mathf.Sin(amountVal * Mathf.Deg2Rad),
	    1.0f + 0.40f * (Mathf.Sin(amountVal * Mathf.Deg2Rad)),
	    1.0f - 0.40f * Mathf.Sin(amountVal * Mathf.Deg2Rad));
}

// コールバック：Jump完了後
public void OnComplete_Jump()
{
    amountVal = 0.0f;
	
    // amountValの変化
    DOTween.To( () => amountVal, 
                (x) => amountVal = x, 
                targetVal, 
                1.0f)
              .OnUpdate(CallBack_AfterJump);
}

// コールバック：着地後のamountValの変化
public void CallBack_AfterJump()
{
	// 横(XZ)方向に伸びて縦(Y)方向は縮む
	this.transform.localScale = new Vector3(
	    1.0f + 0.45f * Mathf.Sin(amountVal * Mathf.Deg2Rad),
	    1.0f - 0.45f * (Mathf.Sin(amountVal * Mathf.Deg2Rad)),
	    1.0f + 0.45f * Mathf.Sin(amountVal * Mathf.Deg2Rad));
}

で、実際に動作させるとこんな感じ

f:id:Karvan:20191015211954g:plain

単純なJumpより楽しい動きになったのではないでしょうか。
あまり使用されないDotween.Toですが、意外と使い勝手は良いですね。