アドリブ全開、観客とのコール&レスポンスも。『プロセカ』コネクトライブの演出コンセプトを支える高度なオペレーションと配信基盤技術【CEDEC2022】

2022.08.30
注目記事ゲームづくりの知識しくみをつくるゲームの舞台裏講演レポート公開資料まとめCEDEC2022
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

国内最大規模のゲーム業界カンファレンス「CEDEC2022」が、2022年8月23日(火)から8月25日(木)までの日程で開催されました。開催初日となる8月23日には、Colorful Paletteの山口 智也氏、磯田 泰寛氏、藤本 誠人氏が登壇し、「『プロジェクトセカイ カラフルステージ! feat. 初音ミク』 リアルタイム配信型バーチャルライブの開発事例」と題した講演が行われました。

プロジェクトセカイ カラフルステージ! feat. 初音ミク』 内で配信された「コネクトライブ」における、リアルタイムであることを強化するライブ配信オペレーションやユーザー参加機能、それを支える配信技術と、360度のバーチャル空間ゆえの演出や設計などについて解説された本講演をレポートします。

TEXT / 田端 秀輝
EDIT / 神山 大輝

目次

『プロセカ』「コネクトライブ」機能の概要とコンセプト

『プロジェクトセカイ カラフルステージ! feat. 初音ミク』 (以下、『プロセカ』)は、セガとColorful Paletteの協業による、スマートフォン向けリズム&アドベンチャーゲームです。リズムゲームの他、3Dキャラクターによるライブを他のユーザーと一緒に楽しむ「バーチャルライブ」も実装されています。

今回のセッションで解説された「コネクトライブ」は、アプリ内でリアルタイム配信でのライブを行うという新形態の機能です。フルサイズの楽曲の披露や、リアルタイムでのダンスやトークが行われ、さらにユーザーのコールやメッセージに対してキャラクターがその場で反応するというライブ感あふれる体験を実現しています。講演時点では、2022年6月11日に「コネクトライブ Vivid BAD SQUAD 1st CRASH」が開催されています。

リアルタイムの360度ライブだからこそのコンセプトデザイン・演出制作

冒頭で、アニメーターの藤本氏から「コネクトライブ」でのコンセプトデザインや演出制作について解説が行われました。

ライブ演出アセットはColorful Paletteのアニメーション演出班4名の手で、UnityTimelineで制作されています

「コネクトライブ」の要件の確認

演出制作の最初の工程としてキックオフを行い、以下のような「コネクトライブ」における要件が確認されました。

  • ゲーム内からリアルタイム配信でライブを届ける
  • ゲーム内で参加できる通常のバーチャルライブ機能との差別化
  • ユーザーが360度ステージで自由に動ける

ライブに必要な要素について、早い段階から制作陣がプレイして確認できるように、ステージのモック制作が行われました。

モックでの確認項目は「ステージを構成する要素」「ユーザーからの視点」「キャラクターの移動範囲」「モニターのサイズや位置」「ライトの数」など

「コネクトライブ」ならではの演出の模索と制作

演出の本制作に入る前に、モックステージの静止画上にレタッチを加え、各シーンで演出を入れた状態での見た目を模索する工程が設けられました。この段階でクオリティラインを定め、この状態を再現するために必要なアセットを洗い出す作業が進められました。

左の画像がモックステージの静止画。これに右の画像のようにレタッチを行い、演出を加えたらどのようになるかを模索した

楽曲の流れに沿って、暗転時、通常時、間奏時、サビ時、転調で会場全体を白飛びさせた時、ラスサビ時の演出の状態を静止画で作っておくことで、クオリティラインを定めた

これらの演出クオリティの実現に必要なUnityのTimelineのトラックとして、ポストエフェクト、ライティング、アセット、BGM、SEなどの仕様が決められました。

ポストエフェクトのトラックで行ったのは、会場全体の空気感を作るフォグの、全体の明るさ、影の向き、遠近感といった項目の制御

ステージやキャラへのライティングの設定トラックでは、ステージアンビエントやポイントライト、キャラクターアンビエント、キャラクターリムライト、フレアといった項目を制御している

アセットのトラックで扱っているのは、アニメーションするアセットとして、エフェクトのパーティクル、スポットライト、サーチライト、ネオンライト。楽曲によって登場する固有3Dモデルや、モニターで流す動画についてもここで設定している

さらに、BGMやSE、オーディエンスにまつわる音のトラックや、観客(アバター)のアクション、ペンライトカラー、コール&レスポンスを制御するその他のトラックについても仕様を決めていった

演出の仕様が決まったところで実際の制作に進みます。いきなり全ての楽曲についての演出制作を行うのではなく、まずはベンチマークとなる1曲にアセットを一通り実装し、実機上でのクオリティラインの確認を行っています。

ベンチマークを元に他楽曲の演出の量産体制に入り、全7曲の演出が完成した段階で全体の流れを通して確認する作業が行われました。

ベンチマーク曲を踏まえて他楽曲の演出を制作した際に意識した点として、「見え方の違い(自由に視点移動できることを考慮したライティング)」「フォグとフレア(天井周辺の色、会場全体の明るさ)」などが挙げられました。

ユーザーが自由に視点移動ができるため、最前列、中段列、またカメラズームをしたときなど、どのような視点でもステージ上のキャラクターを遮らないようなライティング。サーチライトや、ひとつひとつのサイズが大きなパーティクルエフェクトがキャラクターに被るなどを避けるようにした

フレアで天井周辺の色や濃さを調整、フォグで会場全体の明るさや色合いを調整。楽曲によって色合いを変えている

コネクトライブと既存のバーチャルライブとの差別化として「360度のユーザー視点」「リアルタイムモーション」「ライブ演出特化のライティング」「フル尺での演出」などを意識して演出を制作した

リハーサルを踏まえてのブラッシュアップ

全体のアセットが揃った段階で、技術検証として本番想定の環境やアセットでの実機確認を行う「テクニカルリハーサル」が実施されました。演出チームとしては、主に「演出を含むライブ全体のクオリティ」「アセットや機能の不足点」の2点について重点的に確認を行ったそうです。

演出についてもこの段階で本番に適用するかを決めており、例えばメンバーの入退場などに用いる昇降機などはNGになっています。また、テクニカルリハーサル後の課題として、既存のバーチャルライブと比較してリアルタイム感が少ないという状況が確認できたため、観客側のリアクションとしてコール&レスポンスに関するトラックが追加されています。

テクニカルリハーサルでの意見を踏まえ対応した改修項目としてあげられたのは「ライティングやエフェクトなどの見た目を盛る」「負荷軽減」「アセットのバグ修正」

メンバーの入退場などに昇降機を使う演出案もあったが、クオリティやリアルタイムでやるリスクを考えて、テクニカルリハーサルの後にNGになった

テクニカルリハーサルを行った結果、通常のバーチャルライブと比較してもリアルタイム感が無かったという。そのため、観客がリアルタイムでリアクションできる、コール&レスポンスを追加した

テクニカルリハーサル後の課題対応の後も、公演までひたすらバグ対応やクオリティアップといった調整を行い、本番を迎えたそうです。

演出班もコネクトライブ当日はステージ照明操作やキャラクターの衣装変更、ステージのステータス切り替えといったオペレーションを担当したとのこと。

コネクトライブの演出制作の難しかった点

アドリブによるリアル感を生むスタジオオペレーション

次に、『プロセカ』のサウンドディレクターであり、「コネクトライブ」ではオペレーションの進行監督を務めた磯田氏から、配信スタジオでのオペレーションについて解説がありました。

協力してアドリブを生み出すオペレーションチーム

配信オペレーションはモーションチーム、表情操作チーム、ステージ演出チーム、音響のチーム(主にPAとマニピュレーション)、キャラクターボイスと台本の管理を行うチーム、エンジニアなど配信システムを管理するチーム、進行など様々なチームによってオペレーションチームが構成されています。スタッフは社外スタッフあわせ約50名だったとのこと。

コネクトライブにおけるキャラクターのパフォーマンスは、視聴者のアクションへのレスポンスも含めて全てリアルタイム収録・操作により実現しています。

  • ボイスキャストによる、アドリブたっぷりのトークボイス
  • モーションアクターによる、ダンスだけでなくアドリブトークにも対応したモーション
  • 表情操作チームによる、ボイスと動きにあわせた表情コントロール

ボイスキャスト(声の演技)には「アドリブを多く入れて欲しい」という指示を出しており、百戦錬磨のモーションアクターチームがアドリブに合わせたモーションをリアルタイムに収録していきます。

実際の配信スタジオの様子。アプリ内でのコネクトライブと同様、モーションアクターがパフォーマンスするのも360度の円形ステージ。四方には実際の配信映像や台本を表示するモニターもあり、耳に装着したイヤーモニターを通じてスタッフから動きの指示が出される

キャラクターのモーションは、モーションアクターによるモーションをリアルタイムでキャプチャし、それを配信している。キャラクターボイスに関しても同じくリアルタイムで収録され、ボイスキャストには特にアドリブをたくさん行ってくださいという依頼がされていた。モーションアクターチームが百戦錬磨だったこともあり多少無茶なボイスのアドリブに対しても臨機応変に対応したモーションが行われた

6月11日のライブでは1日3回の公演が行われました。セットリストは共通でしたが、公演ごとにMCパートのアドリブやモーションに違いを作ることができたので、公演ごとに特徴のあるライブにすることができたとのことです。

事前のMCパートを踏まえて、公演ごとに楽曲「シネマ」での東雲彰人のソロパートの動きも変わった

キャラクターの表情も、MCボイスやモーションにあわせてリアルタイムで操作して、キャラクターが生き生きとしている様子を実現させています。リップシンクについては、音源にあわせて口が自動的に開閉するシステムになっています。

表情操作の様子。コントローラーの各ボタンに異なる表情が割り振られて、状況に応じて表情操作チームがボタンを押すことで変化する。瞬きも手動操作だ

指をさす動きにあわせて客席をのぞき込む小豆沢こはね

リアルタイムライブを活かすデータ配信と制御のタイミングの組み合わせ

ライブ中はキャラクターだけでなく、ステージ照明や楽曲中の演出、MCの音声やガヤの歓声などがライブの進行にあわせてリアルタイムに変化していきます。

「コネクトライブ」は、360度のバーチャルライブ会場で視点を移動して観覧できるため、固定視点での映像を配信するのではなく、キャラクターのモーションや音声、ステージ演出などのデータをそれぞれ配信し、アプリの中でまとめる形になっています。

しかし、全てのデータがそのまま配信されるのではなく、アセット自体は事前に実装して配信されているパターンと、リアルタイムで配信されているパターン(以下の③)の組み合わせで成り立っています。また、事前配信されているアセットも、一度動かすとその後は自動的に特定の挙動が実行されるような制御のパターン(以下の①)と、都度ひとつひとつを配信スタジオのコントローラーで手動制御するパターン(以下の②)があります。

パターン①:実装済データの、LTCによるによる演出制御

前述のとおり、楽曲のステージ演出全般や、楽曲中の歓声等の音響演出はあらかじめアセットが組まれています。これらは、楽曲頭にマニュピュレーターからのLTC送出によってUnityのTimelineがスタートするようになっています。

※LTC:Linear Timecode。音声信号によって送信される、各機器の映像や音を同期させるタイムコード。UnityでLTCを扱う方法も検索すればヒットする

パターン②:実装済データを用いた、リアルタイムのコントローラー操作による演出

キャラクターの表情や、キャラクターの入り・はけ、MCパート等の会場照明、MCパート等のガヤ音声や楽曲の入りなどの音響演出が該当します。アセットは事前に配信していますが、アドリブなどのリアルタイム性を担保するために、制御はスタッフによるコントローラーによりリアルタイムで行われています。

このような自動制御と手動制御の組み合わせは、昨今の(CGキャラクターではない)リアルアーティストのライブのステージ演出制御と変わらない構造になっていると磯田氏は付け加えました。

パターン③:リアルタイム配信による演出

キャラクターのモーションや、音声とそれに紐づくリップシンクは、事前にアセットを組むのではなく、完全にリアルタイムで配信しています。また、初音ミクたちピアプロキャラクターのボイスも、DAW(Digital Audio Workstation)からサンプラーでPA側に送出して、リアルタイムで配信をしています。

ライブ体験を担保するライブ配信システムと技術的工夫

続いて、エンジニアの山口氏からライブ配信システムの開発実装について解説がありました。

コネクトライブの配信システムは、ライブ配信スタジオからアプリに配信データを送る「ライブ配信基盤」と、アプリでのユーザーの反応をライブ配信スタジオとやり取りする「リアルタイム通信基盤」という2つの基盤から成り立っています。

ライブの配信データは、リアルタイム収録を行っているライブ配信スタジオから「ライブ配信基盤」を通してアプリに配信される(左上)

ユーザーが送信するメッセージ等のアクションは、アプリから「リアルタイム通信基盤」を通じてライブ配信スタジオで受信している(右下)

ライブ配信システムの詳細は、下図のような構成になります。

配信スタジオにはモーションキャプチャシステムと音響システム、キャラクター管理端末と配信管理端末が接続していて、ライブ配信データは配信管理端末から管理ライブ配信基盤を通してアプリにリアルタイム配信されます。

キャラクター管理端末はモーションキャプチャと音響システムからキャラクターのモーションや声の情報をキャラクター個別に受け取っており、キャラクターの声から生成したリップシンクやコントローラーでの表情の操作等を反映したキャラクターの情報をそれぞれ配信管理端末に送信している

配信管理端末では別途、配信に載せるためのキャラクターの声がミックスされた音声や、事前にアセット化している楽曲音源などを再生するための信号の受信も同時に行っている。さらに配信管理端末に接続されたコントローラーを通してステージのライトなどのライブ情報が操作される

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

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

アプリ側は配信基盤に初回の接続をした際に、配信基盤に蓄積された過去数秒分のデータを受信し、その後はServer-Sent Eventsを通して配信端末から送信されたデータを順次受信します。数万人単位のユーザに安定して高速にデータを配信するために、いちど配信したデータはクラウドフロントのCDNにキャッシュしています。

リアルタイム通信のシステム構成は下図のような構成になっています。ライブ会場の開場・閉場などといったライブの状態管理も、このリアルタイム通信基盤を通して行っています。

各ユーザのアプリはリアルタイム通信基盤に接続しており情報が各情報が同期されている。また配信管理端末では、リアルタイム通信基盤を通してアプリで行ったメッセージ等のアクションを収集して、配信スタジオで表示している

リアルタイム配信を実現する配信データの中身とデータ量削減の工夫

コネクトライブで配信しているデータは、各キャラクターのモーションと表情に関する「モーションデータ」、「音声データ」、ライブやステージの情報をアプリで同期するための「ライブステージデータ」の3つに分けられます。

キャラクターのモーションに関するデータには、各キャラクターのモーションを構成する「各ボーンの角度」「ルートボーンの位置」「ルートボーンの角度」のデータが含まれています。配信されているデータの容量の大部分を占めているのがこのモーションデータであるため、配信容量の削減を目的とした工夫が施されています。

  • モーションのディテールが許容範囲まで再現できる程度のモーションのフレームレートを落とす
  • キャラクターの各ボーンのデータの精度をfloat型からhalf型に変更

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

ライブステージデータは、「各キャラクターが登場しているかどうか」「ステージのライトの明るさ」「アプリから再生させる楽曲やSEの情報」など様々な種類のデータがあり、基本的にライブの演目の進行の同期はこのデータが担っている

各種データは独自のシリアライズを施すことで汎用シリアライザによる冗長なデータの生成を抑え、gzip圧縮したデータをサーバに配信することで、可能な限りデータサイズを削減しています(音声データはgzip圧縮ではなく、CRI・ミドルウェアの音声コーデック「HCA」でエンコードされています)。

再生タイミングの同期処理

各ユーザーが受信した配信データが再生されるタイミングがなるべくずれないように、配信端末でモーションや音声などのデータを作成する際にタイムスタンプを付与しています。

アプリでは、タイムスタンプが付加されたデータを受信したタイミングでバッファに格納して、バッファの先頭のデータから順に再生タイミングを評価してデータの再生を行っています。

モーションのように連続するデータは、受信した2つのデータの間の値はタイムスタンプを使い線形補完で求めることで、フレームレートを落としてもスムーズな動きを実現している

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

コネクトライブでは、「キャラクターがユーザからのアクションにリアルタイムに反応」「キャラクターからの問いかけに対してペンライトで投票できるペンライトトーク」といったリアルタイムならではの体験に向けた機能が実装しています。

ユーザーからのメッセージにキャラクターが反応してくれる仕組みについて、アプリはリアルタイム情報基盤の中の100人程度のユーザーで構成される「Room」に接続されており、アプリ側から送信されたメッセージ等のアクションはそのRoomで同期されます。

複数のRoomは「Group」に紐づいていて、複数のGroupの情報を集約することで、配信スタジオでユーザーからのメッセージを確認することができます。

複数のRoomは1つのGroupに紐づいており、Room内の代表ユーザーがRoom内で同期されたメッセージをGroupに送信し集約している

配信スタジオにあるライブ管理端末は、リアルタイム通信基盤の中にある複数のGroupグループに順次接続をすることで、ライブを視聴している全Roomの情報収集することができる

ペンライトトーク機能については、ライブの進行に合わせてペンライトトークの開始イベントを発行する必要があるため、配信スタジオにあるライブ管理端末を使っての進行に合わせて手動で開始イベントを発行しています。

ライブ管理端末から発行されたペンライトトークの開始イベントは、リアルタイム通信基盤上の、ライブを視聴している全アプリが接続している「NoticeGroup」と言うシステムを通してアプリに通知される。アプリでは開始イベントを受け取ったタイミングでUI上にどちらのペンライトの色を振るかという選択肢を表示させる

ユーザーがアプリのUI上でペンライトカラーの投票を行うと、自分が持っているペンライトの色が選択した色に切り替わります。同時に、投票行動はメッセージと同様リアルタイム通信基盤上のRoomに送信され、Groupを経由して、配信スタジオのライブ管理端末で集計され、ライブのMCなどに反映されます。

ユーザが投票した結果を体感することができるように集計した結果はNoticeGroupを通して各アプリに配信され、集計結果に応じて随時ステージの観客のペンライトカラーに反映される

これらのリアルタイム通信基盤を用いた技術により、ユーザーは自分のステージ全体の観客数、モブの観客も含めてライブ全体の雰囲気や熱量を感じることができています。山口氏はコネクトライブならではの体験を実現した実装面の総括として、以下3点を挙げました。

  • リアルタイムで展開されるボイスやモーション、表情、音響による「アドリブ」感の演出
  • データサイズの最適化などを行った独自の配信基盤の開発
  • リアルタイム通信基盤による、ユーザのアクションにリアルタイムで反応できるバーチャルライブの実現

そして、最後に「コネクトライブの開発チームは今後もユーザの皆様に多くの感動と驚きを与えられるように鋭意開発を進めていきます」と語り、本講演を締めくくりました。

CEDEC2022「『プロジェクトセカイ カラフルステージ! feat. 初音ミク』 リアルタイム配信型バーチャルライブの開発事例」セッションページ『プロジェクトセカイ カラフルステージ! feat. 初音ミク』公式Webページ
田端 秀輝

「ゲームと社会をごちゃまぜにして楽しんじゃえ」がモットーの、フリーのコンテンツ開発者。節電ゲーム「#denkimeter」やVRコンテンツ、体験型エンタメの開発をしています。モニター画面の中だけで完結しないゲーム体験が好きで、ここ十数年注目しているのはアイドルマスターです。

関連記事

シリーズ初の3Dアクション『星のカービィ ディスカバリー』におけるカービィらしさと遊びやすさ、そして現実世界との融合を目指したアートディレクション【CEDEC2022】
2022.12.28
モデラーとしてコンセプトアートと徹底的に向き合う『ELDEN RING』におけるキャラクターモデルへのアプローチ【CEDEC2022】
2022.11.30
『星のカービィ ディスカバリー』プロシージャル地形生成への取り組みから見るアーティストとエンジニア、レベルデザイナーの協力体制【CEDEC2022】
2022.11.10
『ヘブンバーンズレッド』のゲームデザイン――ADV、フィールド、バトルパートの全てにおいて「切なさ」を演出【CEDEC2022】
2022.11.09
“フル”クラウド開発の第一歩は新人研修から。バンダイナムコスタジオによるリモート環境でのゲーム開発インフラ整備【CEDEC2022】
2022.11.07 [PR]
AIによるアセット自動生成、ビルド時間の短縮――『FORSPOKEN』事例から見るマイクロソフト&Luminous Productionsの開発効率化【CEDEC2022】
2022.10.25 [PR]

注目記事ランキング

2024.11.28 - 2024.12.05
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

レンダリング(Rendering)
レンダリング コンピューターグラフィックスにおける、各種データ(3Dモデルなど)をプログラムを用いて計算し、画像として表示すること。レンダリングを行うプログラムをレンダラー(Renderer)と呼ぶ。
VIEW MORE

Xで最新情報をチェック!