ゴイサギ日記

東京でエンジニアとして頑張って何とか生きてます。。ゆる~く更新していきます

【Unity】UI開発 Part 3 Tween編

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

Tween

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

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

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

DOTween

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

  1. // !!初回起動時に1回だけ呼ぶ必要あり.
  2. DOTween.Init();
  3. // 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知.
  4. Tweener twr = this.transform.DOMove( targetPos, 2.0f );
  5. twr.SetEase( Ease.Linear );
  6. twr.onComplete = OnComplete;
  7. // 中断.
  8. twr.Kill( complete:true );
  9. // 一時停止.
  10. twr.Pause();
  11. // 再開.
  12. twr.Play();

LeanTween

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

  1. // !!初回起動時に1回だけ呼ぶ必要あり.
  2. LeanTween.init();
  3. // 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知.
  4. LTDescr dsc = this.transform.LeanMove( targetPos, 2.0f );
  5. dsc.setEase( LeanTweenType.linear );
  6. dsc.setOnComplete( OnComplete );
  7. // 中断.
  8. LeanTween.cancel( dsc.uniqueId, callOnComplete:true );
  9. // 一時停止.
  10. dsc.pause();
  11. // 再開.
  12. dsc.resume();

iTween

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

  1. // 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知.
  2. var hash = iTween.Hash( "position", targetPos,
  3. "time", 2.0f,
  4. "easetype", iTween.EaseType.linear,
  5. "oncomplete", "OnComplete" );
  6. iTween.MoveTo( this.gameObject, hash );
  7. // 中断.
  8. iTween.Stop( this.gameObject );
  9. // 一時停止.
  10. iTween.Pause( this.gameObject, includechildren:true );
  11. // 再開.
  12. iTween.Resume( this.gameObject );

Time.timeScaleの影響

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

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

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

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

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

DOTween

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

LeanTween

  1. dsc.setIgnoreTimeScale( useUnScaledTime:true );

iTween

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

おまけ

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

まとめ

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