【Unity】MirrativのギフトとUnityを活用したリッチな演出の紹介

こんにちは、Unityエンジニアの菅谷です。今回はMirrativのギフト機能について紹介します。特にMirrativ内のアバター（エモモ）を利用したMirrativ特有のギフトについて解説します。

Mirrativのギフト

ギフトは配信を盛り上げるための機能の一つで、視聴者がギフトを贈ることで配信者の画面に演出が表示されます。代表的なギフト演出を仕組みごとに紹介します。スタンプギフトやシンプルなアニメーションギフトでは、Lottieライブラリ（iOS/Android）を利用してギフトの画像をアニメーションさせています。 LottieはAfter Effectsから出力したJsonファイルをそのまま利用することができます。

スタンプギフトは画面上にアイコンやアニメーションを表示します。ギフトは30種類以上あり、様々なシチュエーションに合わせて贈られています。

また、エモモと連動したギフトではUnityを活用しており、配信者のエモモにアイテムを渡すギフトや季節限定のギフトなどがあります。 Lottieでのアニメーションと比べると、3Dでの演出が可能になります。演出のために専用のモーションや3Dモデルを作成する必要があり、手間はかかりますが表現に大きな幅を持たせることができます。

ギフトにより贈られたアイテムを使ってエモモがリアクションを返します。

季節限定ギフトではギフトを贈った視聴者のエモモが登場し配信者と一緒になって配信を盛り上げます。

今回はUnityの機能をフルに活用した季節限定ギフトの作り方について紹介します。

エモモの着せ替えとUnityでの演出の作り方

エモモは顔や衣装、帽子などのアイテムを組み合わせることで自分だけのアバターを作ることができます。アイテムはイベントで毎週追加され、すでに5000種類以上あるため組み合わせは無限大です。季節限定ギフトでは視聴者も自身のエモモをギフトの演出として配信に登場させることができます。そのため配信者と衣装を合わせたり、演出のシチュエーションによって衣装を変えたりしてエモモを通じたコミュニケーションが行われています。

季節限定ギフトは独自のエモモの着せ替えの仕組みに加えて、UnityのTimelineとCinemachineを活用することで実現しています。 Timelineはオブジェクトのオンオフやアニメーションの再生をシーケンス形式で管理することができるため一連のカットシーンの利用に向いています。季節限定ギフトの演出もカットシーンなためTimelineとCinemachineを採用しました。

Timelineでのシーケンス制御

Timelineでは主に以下を制御しています。

エモモのアニメーション
エモモ以外に演出中に登場する小物、パーティクル、背景
小物に紐付けたAnimator用のTrigger
カメラの切り替えとブレンディング

Timelineは内容が変わらないアニメーションを再生することに長けていますが、登場するエモモは衣装やアクセサリーなどユーザーによって様々です。そのためエモモは既存の衣装着せ替えの仕組みを使って表示し、Timelineのトラックに後から紐付けることで着せ替え機能と専用のアニメーションとを両立させています。

具体的な紐付けの処理は以下となっています。

PlayableDirectorのトラック名を元に名前検索によりエモモに対応するトラックを取得する。
PlayableDirectorのSetGenericBindingによりエモモのAnimatorとトラックのAnimatorを紐付ける。
エモモがTimeline上で操作できるようになるため、アニメーションはトラック内に配置したAnimationClipで指定する。

var binding = playableDirector
                  .playableAsset
                  .outputs
                  .First(c => c.streamName == avatarTimeline.animationTrackName);
playableDirector.SetGenericBinding(binding.sourceObject, avatar.GetComponent<Animator>());

トラックに名前を設定しておく（streamName）

インスペクタで取得したいトラックを指定する（avatarTimeline.animationTrackName）

Timeline上のAnimatorとエモモ（Avatar_40）のAnimatorを紐付ける
AnimationClipはTimeline上で指定する

Cinemachineでのカメラ制御

Cinemachineは複数のカメラの切り替えを行う仕組みです。カットシーンにおけるカメラのブレンディングがスムーズに行えます。10個以上のカメラをTimelineにより切り替えることで演出に広がりをもたせています。また、Timelineのレコーディングモードを利用しUnity上で実際にカメラを動かしながらアニメーションをつけることもあります。Unityでカメラワークが作成できるためトライアンドエラーや細かい調整が高速に行えます。

運用の効率化のために

演出データはアセットバンドル化することでアプリを更新せずに追加できます。また、デザイナーだけで演出が作れるように基盤を整えることで運用の効率化を行っています。ただし、Timelineでの演出作成は自由度が高いため、アセットサイズが大きくなり端末の負荷も高くなりやすいです。そのためエンジニアは演出のデータ構造や負荷に問題がないかをチェックしてからリリースしています。また、アセットバンドル内に不要なアセットがないかや、アセットバンドル間の依存関係をチェックするツールを作成しより効率良く運用できるよう日々改善しています。