uGUIでのDOTweenの活用について
前回はDOTweenの使い方としてTransformでの使用方法についてまとめましたが、UIアニメーションでの利用の方が使用頻度が高いので、今回はその実装方法について載せていきます。
uGUIで使用するメリット
これはあくまで個人の主観ではありますが、タイトル画面など何かしらの選択画面が表示される際、UIが静止画のままだと、プレイヤーはゲームの世界観に没入しづらいと感じるかもしれません。動きを加えることで、プレイヤーが見ていて楽しく、ゲームへの引き込みを強める効果が期待できると思います。そのため、UIの動きはゲーム体験において非常に重要だと考えています。
DOTweenのuGUIの基本処理
DOAnchorPos
uGUIを移動させるための処理です。
uGUIの移動にはDOLocalMoveも利用できますが、uGUIにはアンカーという配置の基準点が存在します。なのでアンカーを考慮せずに移動させると、想定外の動きになる可能性があるため、アンカーを基準とするDOAnchorPosを使用します。
//アンカーを考慮して(0,100)に移動
_target1.DOAnchorPos(new Vector2(0, 100f), 0.6f)
.SetEase(Ease.OutBack);
DOColor
色を変化させる処理です。
ImageやTextの色の変化にも利用できます。
//1.5fかけて黄色に変化させる
_target2.DOColor(new Color(1f, 1f, 0), 1.5f);DOFade
透明度を変化させる処理です。
ImageやTextの透明度のみを変更できます。
シーンの切り替えなどに使える。
//1.5fかけて透明に変化させる
_target2.DOFade(0, 1.5f);DOFillAmount
画像の端から端まで埋めるような処理ができます。
ドーナツ型や線状のUIなど、幅広い形状に利用ができます。
HPゲージなんかに使用できそうです。
//1.5fかけて画像を埋める
_target3.DOFillAmount(1.0f, 1.5f);DOText
テキストに関する処理ができます。
テキスト関連の動きは種類が多いので、今後別途まとめる予定です。
//1.5fかけてテキストを表示する
_target5.DOText("ペンギンは勇敢な鳥である", 1.5f);DOCounter
数字をカウントする処理です。
スコア表示やパラメーターアップ時の演出に使えるかも。
//1.5fかけて0から100までカウントアップする
_target5.DOCounter(0, 100, 1.5f);まとめ
uGUI関連のアニメーションについて一部をご紹介しました。どんなゲームでも、シーン遷移やテキストのアニメーションはゲームの印象を大きく変えるものです。
これらの機能について理解を深めて、ゲームに合わせた演出を追加していくことで、より魅力的な体験を提供できると考えています。紹介した機能はほんの一部であり、特にテキストのアニメーション関連は有料版で多機能なものが提供されていますので、今後使用する機会があれば改めて載せれればと思います。