どうもharutoです🐒
前回の続きからの其の弍の記事です。Riveの使い方は慣れてきましたか？🐒
其の弍
早速、其の弍『ステートマシーンを使って実装してみよう』に移っていきます。
ここからRiveの特徴的な機能のステートマシーンの説明に入っていきます。
まずはどんな遷移をさせたいのか全体像のイメージを描いてみます。
全体像を描く前に作っていくと意図せぬ挙動が後々入って一から組み直しとかもあるので、ある程度全部を描いてから取り組むのがおすすめです。
今回のサンプルアニメーションの全体像
上の図の遷移を作るために以下のステートマシーンとタイムラインを用意しました
・ステートマシーン：最終的にタイムラインを合わせて遷移をつけるための場所
・タイムライン（ノーマル）：手を振り続けるだけのアニメーション
・タイムライン（スリープ）：眠ってしまって、ハッと起きるアニメーション
・タイムライン（トーク） ：お話ししているアニメーション
データの作りについてはまだ模索中なところがあるので最適解ではないと思うのですが、
特定のタイムラインで表示したい要素はSolo機能を使ったり、不透明度を特定のタイムラインでは100%それ以外では0%のように調整する形で1つのアートボードで収める形で作成しています。
Riveコミュニティのファイルから自分がやりたいことと近そうなものを探ってファイルの構成などを参考にするとうまく調整できるのでおすすめです。
▼ Riveコミュニティファイル
必要なタイムラインが揃ったらステートマシンで実際に遷移を作っていきます。
最終的なイメージは⇩のような形で、こんな感じになるんだな〜くらいに今は見ておいてください👀
完成時の遷移
まずは、ノーマル（手を振り続けるだけのアニメーション）からスリープとトークに遷移するための設定をしていきます。
ノーマルの画面
作成前に今回の仕様について言語化すると以下のようになります。
[仕様]
・ノーマルの時はずっと手を振り続ける（ループ再生）
・SLEEPのボタンを押したらスリープのアニメーションが再生される
・TALKのボタンを押したらトークのアニメーションが再生される
・スリープとトークのそれぞれのアニメーションの再生が終わったらノーマルに戻ってくる
やること
上記の仕様を満たしていくための手順は以下の通りになります。
Listeners？Inputs？なんなんじゃそりゃという感じだと思うので一つづつ説明していきます。
まずは、①のボタンのクリックを検知するための設定を行なっていきます。Listenersという機能を使うと特定のオブジェクトに対してのクリック・ホバー・マウス移動の検知ができるようになります。
該当箇所
今回は、SLEEP・TALKボタンがクリックされたかどうかを検知するために設定をしようと思います。
まずは、アニメイトモードでステートマシーンを開き、画面左下のListnersを展開して"＋"をタップします。
次に、作成したListnersをタップしてから画面右下のパネルで設定を行います。
アクションはPointer moveなどありますが今回はclickを選択します。
Input Changesなどのリスナーのアクションは次のInputsと合わせて行うので今は無視して問題ないです。
Listenersの設定画面
Listenersでアクションを設定する対象の付け方について最初自分は全然分からずで30分くらい格闘した記憶があるのですが、画像のListenersの設定の一番上のところからの設定ができます。
一番上のものを選択すると画面のフレームが青色に変更されます。
その後、左上のヒエラルキーパネルから該当するオブジェクトをクリックするとそれに対してアクションを設定することができます。
ターゲット選択のイメージ
▼ リスナーとは？についてはこちら
①のListenersを設定では「ボタンがクリックされた！」検知ができる設定までできました。
次のInputsの設定では、「ボタンがタップされた！じゃあスイッチをONにしよう！」ということができるようにイベントが発火するように設定をしてあげます。
イマココ
画面右下のListnersの隣の画面左下のinputsを展開して"＋"をタップします。
このときinputsに3種類選択肢が出てきますが、以下のイメージ使い分けます。
Boolean
True or Falseのいずれかの値をもてるもの
Trigger
Booleanと少し似ているが短時間のみTrueになるもの
Number
任意の整数を入力できる数値ボックス
今回はずっとTrueになっていて欲しいわけではなくクリックした瞬間だけTureになって欲しいのでTriggerを採用しました。
このInputsの名前はアプリ/ウェブでの実装時に連動したりする部分でもあるので、命名についてはある程度誰が見てもわかる命名にしておくのが吉だと思います。
そして、inputsを作成したら先ほど作成したListnersと紐付けていきます。
今回、Listenersの名前を"tap_sleep_button"、Inputsの名前を"sleep"とした場合、
・"tap_sleep_button"でクリックが検知された
・"sleep"というイベントを送信してボタンがタップされたことを伝えたい
というイメージで設定を行なっていきます。
まず①で作成した"tap_sleep_button"のListnersの設定を開いて、"＋"ボタンをタップします。
このとき、3種類選択肢が出てきますが、以下のイメージ使い分けます。
Input Change
設定された値を変更できる機能でき、数値の制御などに使用します。
Align target
マウスカーソルに合わせて対象物を移動させるときに使用します。
Report Event
開発者や他の画面に信号を送信するときに使用します。
今回はInput changeを使用してSLEEP・TALKのボタンそれぞれがボタンがタップされたタイミングで"sleep"・"talk"のイベントを発火するように設定が完了しました。
ちゃんと自分が設定したListners・Inputsが機能してるかな〜と確認したい場合、画面右下のconsoleからクリック等をしたときにちゃんとイベントが発火しているか否かを確認することができます
▼ インプットとは？はこちら
イベント周りの設定ができたら最後に条件分岐をつけてあげます。
イメージとしては、②で設定したイベント（SLEEPボタンをクリックしたら"sleep"、TALKをクリックしたら"talk"と何がされたかを報告）を使って、sleepが報告されたらsleepのタイムライン・talkが報告されたらtalkのタイムラインに繋ぐよという設定をしてあげます。
イマココ
ついによく分からないパネルが登場します。
まずstate machineを開いたらタイムラインをドラックアンドドロップで全て出します
こんな感じで出せればOK
次に、下の画像のようにはじまりのタイムラインから終わりのタイムラインに向けて繋げていきます。
ここまでできたら、実際に繋げたときに表示される矢印ボタンをタップして遷移時の条件をつけていきます。normalからsleep・talk向きの矢印を選択して右側に表示されるconditionsから"+"ボタンを押して、それぞれsleepとtalkをつけてあげます。こうすることで、イベントが報告されたタイミングでそれぞれのタイムラインに遷移するという設定をつけてあげることができます。
▼ ステートとは？はこちら
③までできればほぼ完成！
ですが、最後にTransitionやinterporationをつけることで綺麗な遷移などを作ることができます！
最後までこだわりたいって方はここまでやりましょう🎵
▼ トランジッションとは？はこちら
完成！お疲れ様でした🍵
ここまでやると其の壱の冒頭で触っていただいたような⇩のアニメーションを作ることができます
今回の記事を読んだだけだと「おそらくボタンを押したりホバーしたりするものが使えて、それを使って条件に応じて切り替えができるんだろうな？」くらいの解像度だと思います。
ですが、できそうなことの解像度が上がることでこんなことできるかなを元にRiveのコミュニティで近いものをみて実際にそのアニメーションの作りを見てみて真似て作ってみるということを1度でもすると格段に理解度が上がるのでぜひコミュニティファイルから一つ真似してみることをおすすめします🌟
▼ コミュニティファイルはこちら
それでも何ができるかわがんね。って方はぜひメッセージ等お待ちしています📨
ここまでお読みいただきありがとうございました！
其の参では、作ったアニメーションをwebやアプリで使うときの注意点をまとめていきます。
とりあえず作れればいい！って方はここまでお読みいただければOKです、お疲れ様でした🍵
▼おまけ
最後にRiveのステートマシーンでできる系の特徴的な機能についてまとめます
作りながらこんなことできるっけと眺める用に残しておきます📕
💡Layers
単一アートボードに対して複数のインタラクションをつけたい場合に使うらしいです👀
そこまで複雑なものを作ったことがなく使ったことがないので使ってみたい
▼ 機能の説明はこちら
💡Audio Event
ボタンタップのときにカチッという音をつけたり、BGMを入れたりすることができます。
音も出してリッチに作り込みたい時はとても便利
▼ 機能の説明はこちら
其の壱・其の参はこちらから💁♂️
Discussion