#56 「FeelでUIアニメーションを作った話」
こんにちは！デザイナーの森です。
さて今回は、『リトルリコレクター』のUIアニメーションについての取り組みを紹介しようと思います。
リトルリコレクターで使用したアニメーションツールは、Unityのアセットストアで販売されている「Feel」アセットです。1つのコンポーネントだけで以下のような動きを一括で制御できる便利ツールです。スクリプトを一切使用せず複雑な動きを実現出来るので、2Dデザイナーにとってありがたいツールです。
- カメラ・UIの揺れ
- 音・エフェクトの発生
- 時間制御
- ポストエフェクトの操作
- オブジェクトのスケール・回転・色変更
完成したUIアニメーション
遺跡で集めた素材を売却、交換したり、拠点を強化する役割の画面になります。アイコン的でなく物質的なモチーフが多いため、動きについても少しリアル感を持たせたものをイメージしました。
※映像は開発中のため変更の可能性があります。
初稿のUIアニメーション
動きをイメージしながらデザインを作成したため、アニメーション自体で悩むことはありませんでした。
ただ、完成と比較するとかなりもっさりしているのがわかると思います。ディレクターの笹口さんと清水さんに｢ボタンを押してすぐ反応するほうが手触りがいい｣と全体的に早めるフィードバックをいただき、1.2倍ほど早くする修正を行いました。
リザルトの結果表示といった見せ場の場合は緊張のニュアンスで溜めが必要ですが、遷移アニメーションは何度も行き来することになるためストレスを感じない長さが理想です。画面遷移時のアニメーションが0.8秒以内、戻るアニメーションはより早く0.5秒以内に収めるとストレスは少ないように思います。
再生順序についても、画面遷移時のアニメーションが2～3ステップ、戻るアニメーションが1ステップで完結するものが良いです。段階が分かれすぎているとバラバラでまとまりがないイメージになってしまいがちなので、ヘッダー・フッター・選択ボタンなどグルーピングするとバラバラ感が少なくなります。
絵を描くことにも言えることですが、今回の私のように一人で作っていると、客観的視点を見失いがちです。そういったときは遠くから薄目で見てみたり、録画してSNSの自分のトークに貼ってみたり、休憩を挟むとおかしな点に気づきやすくなります。
データ作りにおける注意点
始まり・選択中・終わりと個々にアニメーションを作って実装してみると、いろいろ不具合が出てきてしまいました。その1つが『相対座標で動かしたことによる不具合』です。
｢現在地点→縦横〇px移動｣という風に組んでいたため、別のアニメーションで現在地点が変わると目的地まで変わってしまいます。結果、どこか想定外の位置へピューンと飛んでいってしまうわけです。
なので、｢画面上の縦横〇px地点→縦横〇px地点に移動｣というように、絶対座標で動かすことにしました。
これで、変化に耐えられるつくりになりました。
工房遷移後アニメーションの設定項目
このように便利なアセットですが、『できることが多い＝設定項目が多い』ということなので、理解するのに大変苦労しました。これからも手触りが良くなるように鋭意制作中です！
製品版が出た際にはぜひプレイしてみてください。
それではまたお会いしましょう！
