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

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

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

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

受講スキル

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

得られる知見

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

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

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

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

※画像は開発中のもの

～Unity Timelineの追加トラック～

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

～全体の大まかな構成～

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

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

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

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

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

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

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

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

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

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

～配信データの中身～

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

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

～音声データの中身～

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

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

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

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

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

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

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

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

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

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

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

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

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

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

など

藤本 誠人さん

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

<講演者プロフィール>

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

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

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

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

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

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

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

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

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

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