リアルタイム配信型バーチャルライブの開発事例『プロセカ』 ｜CEDEC2022 レポ

8月23日～25日に開催されたCEDEC2022。楽屋でまったりで事前に行ったアンケートを元に、様々なセッションのレポートをお送りします。

今回ご紹介するのは、『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』 リアルタイム配信型バーチャルライブの開発事例について。ゲームアプリ内でどのようにライブコンテンツを制作したのか、リアルタイムライブの配信技術について知りたい方はぜひご覧ください！

『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』 リアルタイム配信型バーチャルライブの開発事例

受講スキル

1. ゲームアプリ内での大規模ライブコンテンツの制作に興味があるクリエイター
2. スマートフォンゲーム向けのリアルタイムライブ配信技術に興味があるエンジニア

得られる知見

1. アプリゲーム内でリアルタイム配信ライブを実現した実例
2. 3D空間上におけるライブステージ演出の制作事例
3. リアルタイムライブのコンセプトを実現するための仕組み

～プロジェクトセカイ「コネクトライブ」とは～

コネクトライブとは『プロジェクトセカイ』のゲーム内で、リアルタイム配信でのライブを開催したもの。ライブ中にユーザーがコールやメッセージを送るとキャラクターがその場で反応し、リアルなライブを体験することができるのが特徴です。

コネクトライブの演出アセットはUnity Timelineで制作しています。制作人数はColorful Paletteアニメーション演出班4名で行いました。

ライブ演出のスケジュールと制作の流れ

ライブ演出は下のスライドのように、楽曲の流れに応じてポイントを決めて見た目を描き起こしました。

※画像は開発中のもの

これらの作業を行った後は、描き起こした演出を実現するために必要なTimelineのトラックを追加していきました。

～Unity Timelineの追加トラック～

・ポストエフェクト
会場内のフォグを制御し、会場全体の空気感を作り上げた。

・ライティング
会場全体の明るさやキャラクターごとの光源設定を行った。

• ステージアンビエント：会場全体の明暗を決める
• ポイントライト：ステージの床の一部にライトを当てる などの演出
• キャラクターアンビエント：キャラクターごとの明暗を設定する
• キャラクターリムライト：キャラクターのシルエットにリムライトを付ける
• フレア：スライド画像の会場上部の靄がかった演出を入れる

・アセット
ステージ上に用意するライトや楽曲固有の3Dモデルなどのトラックを追加し、アニメーションを作っていった。

・BGM/SE
音源やSEを制御、楽曲やSE、オーディエンスもトラックで設定した。

・その他
観客（アバター）関連の制御も実施。ペンライトのカラー、アクション（ペンライトを振る など）、コール＆レスポンスの設定をTimelineで実施した。

これらの要素を踏まえて、楽曲のクオリティラインを模索したり、アセットが一通り入った状態を実際に確認したりするためにベンチマークとなる曲を一曲制作しました。このベンチマークを元に他の楽曲を7曲制作して、楽曲が全てそろった段階で全体の流れを通しで確認しました。

ライブ演出を量産する際は、以下の2点を考慮して制作しました。

（１）360度ステージを考慮した演出
コネクトライブではユーザーの位置によって目線が変わる。そのため、自由に視点移動ができることを考慮したライティングやエフェクトにした。

（２）キャラクターの邪魔にならないような演出
サーチライトがキャラクターに被って見えなくなったり、パーティクルのエフェクトがキャラクターに被って見えなかったりすることがある。これらを可能な限り考慮して、キャラクターを邪魔しないように演出をまとめた。

・フォグとフレアの演出
フレア機能を使ってのステージ上部の色や濃さの調整、フォグ機能を使っての会場全体の明るさや色合い調整を実施。楽曲によって色合いを変えたり、ユーザーが視点を変えてカメラを引いた時の会場の空気感を考慮した。

・既存のバーチャルライブとの差別化
リアルタイムモーションやライブ演出に特化したライティングなど、既存のバーチャルライブとの差別化を図るために、様々な演出を工夫した。

～テクニカルリハーサルの実施～

7曲の楽曲を制作した後は、技術検証をするために本番想定の環境・アセットでの実機確認を行うテクニカルリハーサルを実施。演出を含むライブ全体のクオリティやアセット、機能の不足点を確認した。

テクニカルリハーサル後はブラッシュアップを行い、ライティングやエフェクトの見た目を盛ったり、配信環境に併せて負荷軽減を行ったりしました。負荷軽減には「オーバーロードチェッカー」を使用しています。この時、アセットのバグ修正も随時行いました。

また、リハーサルを通じて「リアルタイム感の無さ」が課題に挙がったため、コール＆レスポンス機能を実装してキャラクターの歌唱のタイミングに合わせて観客がリアルタイムでリアクションをするトラックを追加しました。

またクオリティやリアルタイムで実施する際のキャラクターへの干渉リスクを考慮し、ステージの昇降機システムの取りやめも決定しました。それから公演日までは、ひたすらバグやクオリティ部分を調整しましたね。

▼テクニカルリハーサル実施時のポイント

• 実際のアクターの動きに合わせて明暗を調整する
• ステージモデルのブラッシュアップを行う
• アセットのバグを修正する
• オペレーション時に発覚したバグを修正する

▼演出アセット以外の対応

• ステージ照明の操作
• キャラクターの衣装変更
• ステージのステータス切り替え

コネクトライブの制作上で大変だった点・難しかった点として、以下の4つがあります。

（１）当日のアクターの動きに合わせた演出づくり
「決められた動きや歌唱に合わせた動き」とは違いアクターがアドリブで動くため、それを想定してライティングを意識するのが大変だった。

（２）描画負荷軽減
アセット全体の容量、Timeline全体のクリップ数などがリアルタイム配信時に影響するため、楽曲全体を通して負荷を考慮するのが大変だった。

（３）フル尺での演出バランスの考案
アプリゲーム内ではゲーム尺で楽曲の演出を制作しているため、フル尺でどのように演出するかを考えるのが大変だった。

（４）バグの原因調査
リアルタイムで行った際に発覚するバグなど、制作上で見えなかったバグや原因が分からないバグと格闘しながら制作した。

配信スタジオでのオペレーション

コネクトライブの配信スタジオでは、様々なオペレーションチームに分かれてライブを実施しました。当日はカラフルパレットのスタッフだけでなく、多くの協力会社やパートナーの皆様に支えていただきました。この場をお借りして御礼申し上げます。

キャラクターモーションは、アクターによるモーションをリアルタイムにキャプチャして配信を行いました。アクターがモーションを行うステージは、360度全方位にパフォーマンスすることを想定した円形ステージを用意しました。

ステージの四方にモニターを設置して、実際の配信映像や台本を表示。アクターはイヤモニを装着して、送られた指示に対応した動きを行った。

また、キャラクターボイスもリアルタイムで配信し、ボイスはアドリブを多めに依頼。モーションアクターチームは百戦錬磨のため、多少無茶なボイスのアドリブに対しても臨機応変に対応したモーションをしていた。

前回のライブでは一日に三回の公演を実施しました。アドリブ満載のMCや楽曲中のモーションの差分を複数作ることで、同じセットリストであっても公演ごとに特徴あるステージングを実現できました。

～キャラクター表情のコントロール～

キャラクターの表情は基本的に手動操作。コントローラーの各ボタンに表情をアサインさせ、MCボイスに合わせてスイッチを切り替えて表情を変化させた。キャラクターの瞬きも手動制御で実施。

リップシンクはキャラクターボイスをPAからチャンネル別に送出させて受け取り、自動で口が開閉するシステムを採用しています。リアルタイムのモーションに対して目や眉などの細かな表情変化を実現することで、活き活きとした表現を生み出すことができました。

～ステージ演出の制御について～

リアルタイムでキャラクターの出入りに対する照明制御、MCなどのきっかけに対して最適なタイミングで楽曲をスタートさせました。

キャラクターの表示・非表示や会場照明の明転・暗転、会場内の客入れのBGM、ガヤなどはコントローラーによるリアルタイムの手動制御で、より臨場感のあるものになったそうです。

ステージ演出の自動制御と手動制御の組み合わせは、その他のリアルライブのステージ演出と変わらない仕様になっているそう。

～SEなどの楽曲以外の音響演出の制御について～

・台本/アドリブに対するSEなどの音響演出

キャラクターの表情やステージと同様に、事前に配信した効果音アセットをコントローラーによる手動制御によって、キャラクターのモーションやアドリブに合わせて演出しました。

主にMCパートにおける会場内のガヤ演出をリアルタイムで発火することで対応できるようになりました。

・ピアプロキャラクターボイスの発声

ピアプロキャラクターボイスについては、自然のアセット配信を行わずサンプラーでPA側に送出して、プロセカキャラと同様にリアルタイム配信するシステムを採用しました。

～配信オペレーションのまとめ～

（１）楽曲のステージ演出全般、楽曲中の歓声等の音響演出
ライブ演出は事前にアセットを実装して配信してあるものと、リアルタイムでデータを配信しているものとの組み合わせによって成り立っている。それらの実装済みのアセットを自動的に制御するパターンと、都度一つ一つをコントローラーで手動制御するパターン、これら二つの方法に分けて操作して動作させていった。

楽曲のステージ演出や楽曲中の歓声等は事前にアセットを仕込んであり、LTC送出によって操作した。

（２）コントローラー操作による実装済みデータを用いた演出
キャラクター表情や会場照明、MCでの効果音やガヤ音声などは、アドリブなどのリアルタイム性を担保するためにコントローラーで制御した。

（３）リアルタイム配信による演出
キャラクターボイスやモーション、リップシンクなど特にリアルタイム性、アドリブが求められるものは、事前にアセットを配信することなく完全にリアルタイムで配信した。

ユーザーコメントやペンライトによるユーザー投票など、ライブMC中に観客とのコミュニケーションも実現。ユーザーから沢山のコメントをもらった際は、モーションやボイスで都度ファンサービスを行ってお返しした。

コネクトライブは、プロセカで配信しているバーチャルライブにリアル感を追加させた進化版ライブです。このリアル感を生み出しているものは、ひとえにアドリブにあると思っています。

公演ごとに異なるモーション、アドリブなど自由度の高いキャラクターボイスMC、それらに合わせたリアルタイムでの微細な表情の変化、ガヤ……こういった音響効果の変化もあります。

演出の方で作り込まれた楽曲ごとのステージ演出に加え、それらの複数要素からなるアドリブの総合的な重なり合いによって、まるで目の前でキャラクター達がライブをしているかのようなリアル感のある演出を作ることができました。

ライブ配信システムの全体構成

コネクトライブの開発チームは協力会社様やスタジオ様と連携しながら、専用のリアルタイムライブの配信・視聴システムを構築しました。

～全体の大まかな構成～

ライブ配信スタジオではリアルタイムでライブ収録を行い、ライブの配信基盤を通してアプリにライブデータが送信される。各端末のアプリはリアルタイム通信基盤にメッセージ等のアクションを送信し、そのアクションは最終的にライブ配信スタジオで受信することができる。

キャラクターの管理端末は、モーションキャプチャと音響システムからキャラクターのモーションや声の情報をキャラクター別に受け取っている。

配信管理端末は、配信に乗せるためのキャラクターの声がミックスされた音声を受け取っている。また楽曲の音源などを再生させるための信号の受信も同時に行っている。

配信管理端末に接続されたコントローラーを通して、ステージのライトなどのライブ情報が操作される。

キャラクターの各種音声が揃っている状態になったら、配信管理端末はライブ配信基盤にデータを送信し、アプリに順次配信される。

～ライブ配信基盤のサーバーのバックエンドについて～

ライブ配信基盤はAWSクラウド上に構築。ライブ配信スタジオの配信端末は、WebSocketを通して配信基盤にデータを送信した。その送信を行ったタイミングでアプリの初回接続時に過去データを受信するためのデータがキャッシュされていく。

それに対し、アプリは配信基盤に初回接続した際に、配信基盤にキャッシュされた過去数秒分のデータを受信することができる。その後はServer-Sent Eventsを通して配信端末から送信されたデータを順次受信送信されたタイミングで受け取ることができる。

ライブは数万人単位の接続が予想されるため、安定して高速にデータを配信するために一度配信したデータはクラウドフロントのCDNにキャッシュしている。

リアルタイム配信を実現するための基礎技術

ライブの配信端末は、配信基盤のサーバーを通してアプリにデータを配信しています。WebSocketでデータを配信して、アプリではServer-Sent Eventsでデータを受信する形ですね。

これらを踏まえて、データを配信してアプリでデータを再生するための基盤技術について説明します。

～配信データの中身～

・モーションデータ
モーションデータの中には各キャラクターのモーションと表情のデータが含まれている。内容としては以下の通り。

多くのボーンの数がある中で、各ボーンの角度をそれぞれ同時に複数体分送る必要があるため、配信容量の大部分を占めてしまいます。そこで、配信容量の削減のために以下のような工夫を行いました。

• モーションのディテールが許容範囲まで再現できる程度にモーションのフレームをリダクションさせた
• キャラクター毎の各ボーンの角度データの精度をフロートからハーフにまで落として配信した

～音声データの中身～

データの本体、本体の長さ、音声のチャンネル数、サンプリングレートなどの情報が含まれている。配信した音声データをアプリ上で正しく再生するための最低限の情報が仕込まれている。

～ライブステージデータの中身～

ライブやステージの状態をアプリに同期するため、各キャラクターの登場・非登場、ステージライトの強度、楽曲情報、SE情報など様々な情報が含まれている。ライブの進行に必要な情報は、基本的にはここに集約されている。

～データのシリアライズ・圧縮～

一時間近くの長時間スマホで配信するため、可能な限りデータサイズの削減に努めた。汎用シリアライザを使用した場合に発生する冗長な部分の容量データを削減するため、独自のフォーマットでシリアライズ・gzip圧縮して配信を実施。それらをさらにgzip圧縮してディテールを詰めていった。

なお、音声データは高圧縮・高音質で安定した配信を行えるようにgzip圧縮はせず、CRIの音声コーデック「HCA」でエンコードして配信した。

▶参考：CRIのコア技術～ファイナルファンタジーにも採用された音声圧縮～

コネクトライブでは、受信した配信データを再生するタイミングがなるべくユーザーごとにズレがないように、タイムスタンプを付加しました。

ライブ体験を作るための技術的工夫

～ユーザーアクションへの反応～

ユーザーがアプリを通して送信したメッセージなどのアクションは「Room」というサーバーの中で同期されます。Roomは一つにつき100人のユーザーで構成されており、このRoomを繋げるために「Group」という概念が存在します。

配信スタジオのライブ管理端末は各Groupに接続しており、メッセージを受信・表示します。この仕組みで効率よくユーザーのメッセージを表示させ、それに対してキャラクターが反応できるようになりました。

～ペンライトトーク機能について～

ライブの進行に合わせてペンライトトークの開始イベントを手動発火。ここで発火された開始イベントは、ライブを視聴している全アプリが接続しているシステム「NoticeGroup」を通してアプリに通知される。

NoticeGroupは全ユーザーがそれぞれ接続しているため、ここで発火された開始イベントは全ユーザーが同時に受信することができる。

アプリの方では開始イベントを受け取ったタイミングで、UI上に「どちらのペンライトの色に変えるか」といった選択肢を表示させることができます。

またペンライトの色の投票結果によってライブの内容が変動する場合もあるため、集計場所であるライブ管理端末に表示（スタジオで表示）させるようにしました。ステージの観客のペンライトカラーにも反映されるため、ライブ全体の熱量や雰囲気を体感することができるになったと思います。

まとめ ～コネクトライブならではのライブ体験を実現するために行った工夫～

1. 360度バーチャル空間特有のステージ演出づくり
2. ポイントライト：ステージの床の一部にライトを当てる などの演出
3. リアルタイムで展開されるボイス、モーション、表情、音響による「アドリブ」感の演出
4. データサイズなどを最適化した独自の配信基盤の開発
5. リアルタイム配信基盤によってユーザーのアクションにリアルタイムで反応できるバーチャルライブの実現

など

今後も多くの皆さんに多くの感動と驚きを与えられるように鋭意開発を進めていきます。ご清聴ありがとうございました！

藤本 誠人さん

株式会社Colorful Palette　アニメーション・演出班　アニメーター

<講演者プロフィール>

イラスト受託制作会社にイラストレーターとして新卒入社後、アニメーション・演出をメインに担当するようになる。
モーションデザイナーとしてブラウザゲームの開発、モデラーとしてVライバーの配信プラットフォームなどの開発を経て、2019年にColorful Paletteへジョイン。
『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』 では、Live2D、バーチャルライブ演出などの制作を担当し、現在はアシスタントマネージャーとしてアニメーションチームのマネジメントを行っている。

<受講者へのメッセージ>

コネクトライブにおいてアニメーションチームでは、企画当初のライブ全体のコンセプトづくりから、ステージデザイン、ライブステージ演出などを担当しました。
ゲーム内におけるライブ演出の手法や考え方、作る上でつまづいた点などをクリエイター目線でお話しできればと思っています。

こちらの記事もチェック！

UIで面白さが変わる！ボードゲームのデジタル化への挑戦 ｜CEDEC2022 レポ

「自然に」じゃダメ！イメージを伝えるための言語化ポイント｜CEDEC2022レポ

UI開発スケジュール・タスク管理の成功／失敗例から理想的なモデルケースについて｜CEDEC2022レポ

▼学生向けLINEの登録はこちらから！

▼社会人向けLINE登録はこちらから！

GCG会員になると開催予定のスケジュールの確認やWEB会員証をゲットできます。