【Unity】UI開発 Part 3 Tween編

今回もUIです。UIアニメーションでよく使うTween関連です。

Tween

シンプルな動きはTween制御系Assetが便利です。有名な DOTween, LeanTween, iTweenの特徴とサンプルコードを貼ってます。

また、パフォーマンス比較はDOTween公式サイトにまとまってます。

ちなみに私はパフォーマンス重視なのでLeanTweenを使ってます。また、ゲーム仕様に依存する部分はこちらやこちらを参考に自前のTween制御を書いてます。

DOTween

無料版はパッケージにコードは含まれないです。(GitHubにアップはされている)有料版はTextMeshPro対応とEditor上でTweenを編集できます。

// !!初回起動時に１回だけ呼ぶ必要あり.
DOTween.Init();

// 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知.
Tweener twr = this.transform.DOMove( targetPos, 2.0f );
twr.SetEase( Ease.Linear );
twr.onComplete = OnComplete;

// 中断.
twr.Kill( complete:true );

// 一時停止.
twr.Pause();

// 再開.
twr.Play();

LeanTween

パフォーマンス重視のTweenです。コードは全て含まれてるのでカスタムしやすいです。

// !!初回起動時に１回だけ呼ぶ必要あり.
LeanTween.init();

// 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知.
LTDescr dsc = this.transform.LeanMove( targetPos, 2.0f );
dsc.setEase( LeanTweenType.linear );
dsc.setOnComplete( OnComplete );

// 中断.
LeanTween.cancel( dsc.uniqueId, callOnComplete:true );

// 一時停止.
dsc.pause();

// 再開.
dsc.resume();

iTween

iTween.cs だけのシンプルな作りです。

// 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知.
var hash = iTween.Hash( "position", targetPos, 
                        "time", 2.0f, 
                        "easetype", iTween.EaseType.linear,
                        "oncomplete", "OnComplete" );
iTween.MoveTo( this.gameObject, hash );

// 中断.
iTween.Stop( this.gameObject );

// 一時停止.
iTween.Pause( this.gameObject, includechildren:true );

// 再開.
iTween.Resume( this.gameObject );

Time.timeScaleの影響

上記3つのTweenの時間制御は Time.deltaTime を参照しています。こちらの値は Time.timeScale の影響を受けます。そして、これは演出系のUIアニメーションで問題になる場合があります。

例えば以下のような格闘ゲームのKO演出です。キャラ・背景は一時停止していますが、"KO"のUIはアニメーションしてます。

ゲーム全体のアニメーションを停止であればTime.timeScaleの値を変更すれば良いです。

しかし、このケースではUIアニメーションは影響を受けない設定が必要です。

以下に各TweenのTime.timeScaleの影響を受けない設定をするサンプルコードです。

DOTween

twr.SetUpdate( UpdateType.Normal, isIndependentUpdate:true );

LeanTween

dsc.setIgnoreTimeScale( useUnScaledTime:true );

iTween

// "ignoretimescale" に true を設定する.
var hash = iTween.Hash( "position", targetPos, 
                        "time", 2.0f, 
                        "easetype", iTween.EaseType.linear,
                        "oncomplete", "OnComplete",
                        "ignoretimescale", true );  // ←ここ.

おまけ

Tweenとは別ですがParticleSystemで作られたUIエフェクトは Delta Time を Unscaled にすると TimeScale の影響を受けません。

まとめ

Tween制御系Assetをまとめてみました。簡単なアニメーションはTweenはとても便利です。 より複雑なアニメーションは Animator, AnimationClip を使う感じですかね。