こんにちは。dely株式会社のプロダクトデザイナーの、harutoです。
この記事では、社内イベントで使用したガチャガチャのアニメーションの作成手順と参考になったものをご紹介します。まだRiveを触ったことがないという方でもどんな手順で進めるのかわかるようにまとめていきたいと思います！
なお、この記事は3部作の第3部としてお届けします。
【目次】
・第1部：Riveはデザイナーにもエンジニアにも優しい神アニメーションツール
・第2部：Riveは開発コストを平均5時間以上削減してくれる神ツールになった
・第3部：Riveを使って実装なしでも遊べるアニメーションを作る方法（この記事💡）
今回作成したアニメーション
▼ こちらから実際に遊べます
※rerunで引き直せます
▼ ガチャガチャの要件
- 通常演出・確定演出の分岐を意図した確率で出し分ける
- 出てくるガチャガチャは4色ランダムに出現させる
- 「ハズレ」「トッピング+1」「アイス+1」の結果を意図した確率で出し分ける
これらの要件を満たすアニメーションの機能を作りたいとなった時、lottieなどで作る場合、「ガチャが回転するアニメーション」・「カプセルがランダムに出現するアニメーション」・「結果画面のアニメーション」をそれぞれ作成して、実装側でそれぞれのリソースファイルを繋ぐように実装する必要があるのですが、Riveでは
- アニメーションへの入力動作を検知する：Inputs
- イベントを感知して反応する：Listeners
- 条件に基づいて動作を制御する：Conditions
- ランダムな変化をアニメーションに追加する：Randomization
などの機能を使って、遷移〜確率の設定まですべて作ることができます。
では、実際に今回はどのようにアニメーションを作成したのかご紹介します！🧸
作成手順
①素材をillustrator・Figma等を使って作成 + Riveに取り込み
②まずは要素要素でアニメーションの動きをつける
この先は勉強しつつ試行錯誤しながら作ったので、ベストではない可能性があるのはご了承ください🙊
まずは、ボタンのタップ時のアニメーション、ガチャガチャのアニメーション、確定演出時の背景の3つの要素にアニメーションを追加していきます。
この時点でどのアクションでイベントを発火させるか、どのイベントを受け取ってアニメーションを再生させるかなどをある程度イメージ作成しないと後々組み合わせができなくなってしまうので、作成前にあらかじめ全体設計とどう繋ぎ合わせるかを考えてから作るのがおすすめです🙆
（自分は手探りで進める前提であまり考慮しなかったため２回ほど初めから設定し直しました🪦）
ふわっと全体のイメージができたら③でそれぞれのアニメーションを接続できるように、ListnersやInputsなど画面の入力情報を検知したりイベントを発火・受け取りする機能などを使用して、条件分岐や制御を行なっていきます。（この段階で全体を繋ぐ想定でイベントの設定等ができているのが理想的だと思いますが、この段階ではまずそのアニメーションの動作が完結できるような設定にし、③で具体的に繋げながら適宜調整していく形が良いと思います💭）
▽ボタンのアニメーションの作成例
Riveには、Randomize exitという設定した数値の比重に合わせて遷移を確率でランダムに割り当てることができる機能があります。
今回のアニメーションでは、ガチャガチャが出現する時の色・結果画面・確定演出など至る所でランダムの条件分岐を使用しました。ガチャガチャの出る色が変わるという実際の実装では大変になる仕様もRiveを使うことで簡単に実現できるので、実装するよりもデザイナーの思い通りにリッチにできる点がとても神です👼
③それぞれのアニメーションを合体させる
それぞれのパーツが出来上がってきたら組み上げていきます
▼ 接続イメージ
・ ボタンのタップでtap_buttonを発火させる
・ tap_buttonを検知してガチャのアニメーションが始まるようにする
・ ガチャのアニメーションの再生が終わったらgacha_endのイベントを発火させる
・ gacha_endを検知して結果画面を表示する
・ 結果画面になったらstart_resultを発火させる
・ 実装側でstart_resultを検知してTOPに戻るボタンを表示してもらう
・ それぞれの遷移をランダムに意図した確率になるように調整する
今回のアニメーションでは実装側と組み合わせるイベント発火は「TOPに戻るボタンを表示」だけだったため命名や作り方自体は割とラフに作っていますが、実装側との組み合わせが多くなる場合は適宜エンジニアの方と連携が必要になります
▼ 参考アニメーション
ボタンタップ〜再生開始など繋ぎ合わせ等は下の2つのコミュニティファイルでこの関係性はどう繋がっているんだろうとステートマシンをぽちぽちしながら勉強したので具体的な繋ぎ合わせ方法を知りたい場合はこちらがおすすめです📝
④BGMやSEを追加してみる
ここまで繋ぎ合わせればほぼ完成なのですが、せっかくなのでRiveが提供しているAudio機能を使ってBGM・SEを追加してみました🎇
今回、夏祭りがテーマだったため夏っぽいBGMやガチャガチャを回す時・カプセルが出る時などのSEを追加してみました。音声ONにしてみるとちゃんと出るはずなのでお試しください💫（BGMについては権利の範囲の都合上取り除いています）
▼今回使用した音源サイト
今回使用したSpringin'さんのSEは商用無料+高クオリティで大満足だったのでおすすめです🎵
⑤隠し機能を追加してみる
ついに完成！したのですが、確率を変えたり、結果画面のバリエーションを変えたモードチェンジもできるようにしたいよねということでミラクルモード・たこ焼きモードなど隠し機能なども搭載して完成しました！🐙
BGMを入れたり遷移をモリモリにしたりしても、最終的なファイルサイズは900KBとかなり軽めに作成することができました。
せっかくなので、最後にもう一度ガチャガチャ引いてみてください🧸
※rerunで引き直せます
まとめ
このアニメーション実装的にきついかも...リッチな挙動を入れたいけど実装工数やファイルサイズの軽量化を取ってミニマムにするしかないかも...となっていたところからアニメーションの遷移、イベントの発火、SEの追加などなどリッチにしても実装的には以前より楽になるだけでなくファイルサイズもかなり軽量で扱える神的アニメーションツールであるRiveはぜひみなさんに使ってみてほしい機能です🧑🎨
Audioの再生などでBluetoothをガン無視して本体から爆音再生されるバグがあったり（今は直りました）、音楽の再生の長さをうまくコントロールできないなど、まだまだ痒いところに手は届ききっていなかったりするものの爆速で改善や開発が進み、デザイナーとエンジニアのコラボレーションを促進してくれる素晴らしいサービスなのでぜひ一度お試しいただきたいです📨
全部で3部構成と長めのシリーズ記事でしたが、最後までお読みいただきありがとうございました！🌞
Discussion