Mirrativ Tech Blog

株式会社ミラティブの開発者(バックエンド,iOS,Android,Unity,機械学習,インフラ, etc.)によるブログです

Mirrativ のアバター活用事例を紹介します!

こんにちは、バックエンドエンジニアの平松です。今回は Mirrativ でのアバター(エモモ)を活用した機能開発事例を紹介します。

Mirrativ のエモモ

Mirrativ にはエモモと呼ばれるUnityで動く独自の3Dアバター機能が存在します。 エモモはユーザが自身の好みに合わせて自由にカスタマイズ可能なアバターであり、 Mirrativ では定期的に開催しているイベントに合わせて様々なパーツや衣装などのカスタマイズ用のアイテムを多数リリースしています。

カスタマイズ用のアイテムの追加のみではなく、エモモを活用した様々な機能の開発・リリースも行っています。 本記事ではこれまで開発してきた機能について紹介していきたいと思います。

なお、エモモがどのようにして動いているのかの詳細については今回は割愛しますので、興味のある方はこちらの記事をご覧ください。

tech.mirrativ.stream tech.mirrativ.stream

エモモの表示による演出

コラボ通話と連動したエモモ表示

コラボ通話時のエモモ表示

Mirrativ にはコラボ通話と呼ばれる機能があり、配信者に対して最大3人までの視聴者が参加して同時に音声通話する事ができます。 コラボ通話機能の実装当初はコラボ通話に参加する視聴者は音声のみの参加で画面上には配信者のエモモだけが表示される状態でした。

本機能の導入 により、コラボ通話時にはコラボ参加者のエモモが配信者のエモモと並んで表示されるようになりました。 これにより、配信者とコラボ参加者はより没入感が増し、視聴者も配信者とコラボ参加者が会話しているという状況をより直感的に認識できるようになりました。

ゲーム配信時のエモモのワイプ表示

ゲーム配信時のワイプ表示

Mirrativ では配信者側の画面をOSの機能を使って録画したものを Mirrativ の配信サーバ経由で視聴者側の Mirrativ アプリに表示するという形式をとっています。 なので、配信者が Mirrativ アプリ上に自身のエモモを表示している状態であれば視聴者から配信者のエモモを見る事ができますが、他のゲームアプリ等を表示している場合には配信者のエモモを見る事ができませんでした。

本機能の導入 により、ゲームプレイ時などの配信者が Mirrativ アプリで自身のエモモを表示していない状況では視聴者側の画面上に配信者及び視聴者のエモモを表示されるようになりました。 これにより、視聴者は配信者が視聴者と一緒に仲良くゲームをプレイしている様子をイメージしやすくなりました。

視聴者のエモモとのグループショット

グループショット

Mirrativ では視聴者からギフトを贈られたタイミングや、イベントの衣装を獲得して着替えたタイミングで記念としてスクリーンショットを撮るユーザが一定数存在していました。 そういった行動を機能としてサポートしたのが 本機能 です。

この機能では、配信者は最大3人までの視聴者とともにエモモで記念撮影をする事ができます。 イベント開催時にはイベントに合わせた背景と衣装でより思い出に残る写真を撮影する事もでき、撮影した画像をそのまま配信のサムネイル画像に設定するなどの Mirrativ 内でのスムーズな利用などもサポートしています。

視聴者のエモモが登場するギフト演出

エモモによるギフト演出

Mirrativ では配信を盛り上げる機能の一つとしてギフト機能を実装しています。 ギフトは視聴者から配信者に対して贈るもので、ギフトが贈られると配信者側の画面に対応した演出が表示されます。 通常のギフト演出はネイティブクライアント側で実装されたアニメーション演出ですが、一部のギフトではUnity側のエモモと連動した3Dでの演出が可能になっています。

特に以下の記事で紹介している季節限定ギフトでは、ギフトを贈った視聴者のエモモも登場するリッチな演出が作り込まれており、配信におけるコミュニケーションの一つとして大いに活用されています。

tech.mirrativ.stream

エモモを動かしてゲーム

エモモフラッグ

エモモフラッグ

配信中に楽しめるちょっとしたミニゲームとして、エモモが旗揚げをするゲーム を実装しました。 画面上にテンポよく表示される指示に合わせて左右のフリックで対応する旗を上げ下げするシンプルなゲームです。

一定期間毎に開催されているハイスコアランキングに挑戦したり、配信中の話題の一つとして視聴者と一緒に楽しんだりできるゲームになっています。

エモモRUN

エモモRUN

エモモRUNは Mirrativ 内で定期的に開催されるイベントの一つとして運用されているもので、配信者が自身のエモモを操作して障害物を避けながら走行距離を競い合うランゲームです。

視聴者がエモモRUN専用ギフトを贈る事で配信者がプレイを有利に進められるアイテムなどを獲得できる仕組みもあり、視聴者が配信者を応援する形で楽しめるゲームになっています。

エモモバトルドロップ

エモモバトルドロップ

エモモバトルドロップは前述のエモモRUNと同様、 Mirrativ 内で定期的に開催されるイベントの一つとして運用されているゲームです。 配信者が視聴者を誘ってチームを組み、他の配信者チームとフィールド上で落としあいをするマルチプレイゲームである事が特徴です。

配信者と視聴者が直接一緒に遊べるゲームとして、配信内でのコミュニケーションに活用されています。

Unity連携機能開発における課題

実装初期のエモモは表示するパーツと衣装の組み合わせをネイティブクライアント側からUnity側に一方的に渡し、Unity側は受け取ったパラメータに従って描画するのみというシンプルなものでした。 ですが、様々なUnity連携機能を追加するに従い、ネイティブクライアント側でUnity側の処理結果を受け取ったり、Unity側でのイベントをトリガーとしてネイティブクライアント側の処理を呼び出すといった要件が生じ、Unity側のフレームワークとしての機能が随時拡張されていきました。

Unity側との双方向のやりとりも含め、複雑な機能を実現するようになっていった結果、いくつかの課題も発生しました。

機能設計の複雑化

バックエンド、ネイティブクライアント、Unityの3階層の構造となるため、機能全体のデータや処理のフローの設計が複雑になりました。 加えて、エモモの複数表示やマルチプレイ時における複数端末での同期処理などを実現しようとすると、Unity側で必要なリソースをロードする際の処理時間や容量制限などの様々な制約も考慮して設計する必要がありました。

音声関連機能の相互干渉

ゲームを作る際にSEやBGMといった音声は欠かせない要素であり、本記事で紹介したゲームにおいても音声を扱っています。 ですが、 Mirrativ の主機能である配信においても、配信そのものや配信時のコラボ通話などで音声を扱います。 ゲームの音声はUnity側で制御し、配信関連機能の音声はネイティブクライアント側で制御する事になるのですが、それらが相互に干渉して上手く制御できなくなるという事がありました。

おわりに

エモモは Mirrativ の大きな特徴の一つであり、エモモを活用した様々な機能によりユーザ同士のコミュニケーションの幅を広げてきました。 エモモの活用の可能性はまだまだ無限大であり、今後もエモモを活かした機能を企画・開発していきたいと考えています。

We are hiring!

ミラティブではエモモを活用した機能を一緒に開発してくれるエンジニアを募集しています。

www.mirrativ.co.jp

speakerdeck.com