どうもharutoです🐒
前回の続きからの其の弍の記事です。Riveの使い方は慣れてきましたか？🐒
其の参
其の弍までで作成したアニメーションを実際にアプリやwebで使いたいよという場合に書き出しの設定やイベントの設定などを正しく行わないと表示されない...遷移できない...といったことがあるので、今回はその表示に関する注意点をご紹介します。
気をつけるべき4つのポイント
アニメーションをつけたRiveファイルを実装者の方にお渡しするときに気をつけてチェックした方が良い4つのポイントをご紹介します。（それぞれの実装方法に応じて取るべき対応も変わったりするので、実際には担当のエンジニアの方と擦り合わせて調整指定ことをおすすめします。）
ファイル名の設定についてこうでなければ絶対にだめ！ということでもないとは思うのですが、
・デザイナーがファイル名を適当につける
・エンジニアの方に渡してファイル名を置き換えて取り込み
・読み込まれない
ということが発生し、あらかじめ実装側で指定したい名前にファイル名を変えて書き出したものを取り込むと治ったということがありました。
ファイル管理をきちんとする上でも実装側と命名を揃えてあげるということは大切だと思うので、連携してファイル名を変更することをおすすめします（自分もできてないところがあるので修正していきたい気持ち）
次は、Listnersを使ったイベントの設定方法の注意点です。
Listnersを使ってクリックなどを検知した先で、イベントを発火させてアニメーションやアプリ内での状態変化をさせる設定ができるのですが、ここで下の説明画像にもあるInput ChangeとReport Eventでの使い分けに注意が必要です。
Input ChangeとReport Eventを使うとどちらでもRiveのステートマシンないの状態変化で適応することができるのですが、アプリなどで使いたい場合（例えば、ボタンのクリックを検知したらアニメーションを非表示にするなど）はInput chageだと検知することができずタップに対しての状態変化をつけることができないため必ずReport Eventを設定する必要があります。
（.rivファイルを取り込んだけどイベント検知できないなぁという場合はここを要チェックです）
また、アプリ側でアニメーション再生状態のリスナーを導入した場合にループ再生をしている場合play_startのようなイベントが毎週送られてしまう状態になってしまうということがあったりします。
そこで、アプリ側では再生状態のリスナーは導入せずにRive側から送ったイベントだけを受け取るようにする（開始のイベントを送りたい場合もRive側で指定する等）などの認識合わせが必要になります。
そのため、アニメーションでイベントを使って実装と連携したい場合は事前にどこからどこまでをRive側で設定してどこからどこまでを実装側で持つのかといった擦り合わせをした上で作成を進めていくことをおすすめします。
Listnersの説明はこちらから
1つのテキストボックスで複数のスタイルを当てることができたり、ボックス内の特定の箇所だけ動的な情報を入れ込むことができたりします。
（例えば、こんにちは"user_name"さんという形で"user_name"の部分だけ、haruto・moneky・sento…etc.の情報を人ごとに変えるアニメーションなど）
この、TextRunを用いて動的に情報を流し込めるようにする設定がなんともわかりにくいところにあり、動的に変えたいtext run部分を選択 > 右クリック > export nameにチェックをしてあげる必要があります。なので、textを動的に変えたいです！と実装者の方に渡して文字が表示されない！って時はここをチェックしてみてください。（わかりにくすぎる！！！）
また、export_nameは実装側でどのtext runに情報を入れるかの指定をするときに使うのでこちらも実装者の方と連携する必要があります。
textrunの説明はこちらから
最後に、exportをポチッとする前に必ずチェックすべき書き出し設定の注意点をご紹介します。
注意すべき点は、①ラスター画像の書き出し設定、②フォントの書き出し設定の2つがあります。
ここの設定が少し違うと圧倒的にファイルサイズが重くなったりしてパフォーマンスに影響を与えたりするので要チェックです。
① ラスターデータの書き出し設定
Riveでは、ベクターデータ以外にもラスターデータを扱うことができます。
ベクターデータは、特別な設定なしでアプリやウェブで使うときに表示することが可能なのですが、ラスターデータは書き出しの設定をきちんとしてあげないと表示されなかったりします。
書き出しの設定は、エディタの左側のHierarchyの隣のassetsから設定できます。
assetsの画面
書き出しの設定には以下の3パターンがあり、以下のような使い分けのイメージになります。
選択肢
Embedded
・特徴：アニメーションをファイルに直接埋め込み、単体で完結できる
・デメリット：ただし物によっては重くなる
Referenced
・特徴：.rivファイルと別書き出しをしてリンクして表示させる
・デメリット：実装側で設定をミスると表示されない
Hosted
・特徴：Riveサーバーにホストし外部から読み込む
・デメリット：Riveサーバーに依存するから、サーバーの状態に影響されやすい
こちらも実際に使用する環境の管理方法によって異なるため実装者の方と都度相談して書き出し方法を決めてあげる必要があります。
うまく表示されない。ファイルの容量が重すぎる。などがあればここからチェックすることをおすすめします。
② フォントの書き出し設定
最後にフォントの書き出し設定についてです。
フォントファイルは、特に重くなりやすいので要注意です👀
フォントファイルの書き出し設定についても画像同様にEmbedded・Referenced・Hostedの3種類があるのですが、これに追加してIncledという以下の3つの設定があるのでそこもチェックする必要があります。
All Glyphs
・特徴：フォントファミリーすべてのグリフを対象にする
・デメリット：余計なフォントも読み込むのでファイルが重くなりやすい
Glyphs used
・特徴：使用しているグリフのみを対象にする
・デメリット：動的な情報を入れたい場合、そのグリフ以外が出てきたときに表示されなくなる
Custom
・特徴：フォントファミリー内の特定のグリフのみを対象にする
・デメリット：表示させたいグリフの設定をミスると表示されなくなる
フォントを埋め込むのかそれともリファレンスにするのかについても実際に使用する環境の管理方法によって異なるため実際に実装者の方と連携する必要があります。
ただし、特定の組み合わせパターンで注意しておいた方が良いものがあり、Embeddedを使う場合、Glyphs usedの設定は動的に変更予定のないものにしか使えず、ファイルサイズを減らしつつ動的に変更したい場合はCustomeを使って使用予定のグリフを選択してあげる必要があるということを知っておくと良いかもしれません。
漢字を使う場合、フォントファミリーに漢字が含まれるとどうしてもグリフ数が多くなってしまいファイルが圧倒的に重くなるためEmbeddedではなく、Referenceの設定をすることをおすすめします。
フォントの書き出し設定についてはこちら
ここまで設定ができれば、作ったアニメーションを実装者の方とスムーズに連携して表示できるようになるのではと思います。
上で何度も記載しましたが、書き出し時の設定については結局は表示させる環境や管理方法次第で変わってくるものなので一番大切なことはどんなことがしたいか。どういう設定をするのが好ましいか。を密にコミュニケーションを取ることだと思います。
その上で、どんな機能があるのか・どんな書き出し設定があるのかを理解しているとデザイナ↔︎エンジニアお互いに、どんな実装ができそうか・どこの実現が厳しそうでどうすれば楽に解決できそうかのコミュニケーションがとりやすくなるので、そういった意味で理解しておくことをおすすめします。
虎の巻！と強そうにまとめてますがまだ使ったことない機能や上記以外の気をつけないといけないポイントはまだまだあると思うので、触りながら知見を深めてアップデートしていこうと思います。
超大作になってしまいましたが、最後までお読みいただきありがとうございました！🐯
其の壱・其の弍はこちらから💁♂️
Discussion