配信者 vs 視聴者多数！ライブ動画配信プラットフォームを活用した、非対称マルチプレイを実現するシステムの構築
12.9K Views
September 20, 22
スライド概要
CEDEC2022にて登壇した資料です。
Twitch Extensionsを活用して動画視聴者専用UIをブラウザ上に構築し、ゲームのライブ配信を見ている視聴者がゲームの世界に参加できるシステムを実現しました。
※登壇資料との違い：動画の埋め込みをYouTube URLに差し替えています
関連スライド
各ページのテキスト
配信者 vs 視聴者多数！ ライブ動画配信プラットフォームを活用した、 非対称マルチプレイを実現するシステムの構築 株式会社ヘッドハイ 一條貴彰 1
ゲーム開発者が、ライブ配信プラットフォームを活用して、 動画をもっとおもしろくする ● 「動画でゲームコンテンツを楽しむファン」へ新しい面白さを届ける ○ 動画視聴者へインタラクティブな体験を提供する ● ライブ動画をインタラクティブ化する ○ クラウドゲーミングを目指すわけではない ■ クラウドゲーミングは仮想マシンとプレイヤーが１対１ ■ 動画はブロードキャスト。配信システム一式につき、数万人の視聴者に届ける 2
講演アジェンダ ● ゲーム紹介 ● ゲーム配信と開発者の関係 ● ゲーム配信における活用事例 ● 技術解説 ○ システムオーバービュー ○ クラウドサーバー側 ○ ブラウザ側 ○ Genvid SDK側 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 3
自己紹介：一條貴彰 ● 小規模インディーゲーム開発者 ○ 「Back in 1995」 ■ Steam, PS4, Switch, Xbox One向けに配信 ● 株式会社ヘッドハイ 代表取締役 ○ 国内ゲーム開発者向けビジネスのサポート ■ ゲーム産業特化のDevRel事業 ○ 著著 ■ 「インディーゲーム・サバイバルガイド」技術評論社 ■ 「Unityサウンド エキスパート養成講座」ボーンデジタル 4
● ゲーム紹介 ● ゲーム配信と開発者の関係 ゲーム紹介 ● 過去事例 ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 5
「デモリッション ロボッツ K.K.」（開発中） ライブ配信において、視聴者がゲームに介入できる専用UIを表示 ©2022 Valve Corporation. Steam and the Steam logo are trademarks and/or registered trademarks of Valve Corporation in the U.S. and/or other countries. ※Nintendo SwitchのロゴおよびNintendo Switchは任天堂の商標です ※画面は開発中のものです 6
ゲーム概要: あなたは街を解体する会社の従業員です ● ４人対戦アクションゲーム ● 巨大ロボがパンチでビルを壊す ● ビルをたくさん壊したロボが勝利 ○ ロボ同士は戦わない ○ 他のロボをパンチすると減点 ○ ステージギミックに巻き込んで 「うっかり」妨害する ● 1プレイ3分程度 ● 3戦行い、総合点数を競う ※画面は開発中のものです 7
メインバトル画面 ※画面は開発中のものです 8
Webブラウザ内で、動画の上からUIをかぶせる ※画面は開発中のものです 9
2022年7月 本システムの試験配信を実施 308人の視聴者が参加 10
配信当日のブラウザのキャプチャ動画 (2分のダイジェスト) https://www.youtube.com/watch?v=kv7zHEawJGU 11
プレイヤー4人 vs 視聴者308人の非対称マルチプレイを実現 ● ゲスト：バーチャルアイドル『東雲めぐ』 ● 90分配信 ● 視聴者308人が参加 ○ 32,106回の「応援」 ○ 232個の「罠アイテム投下」 視聴者からの反応は大変好評 後ほどアンケート内容を紹介します 12
● ゲーム紹介 ゲーム配信と 開発者の関係 ● ゲーム配信と開発者の関係 ● 過去事例 ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 13
ゲームのライブ配信はジャンルとしてすでに定着 ● YouTubeの盛況、ゲーム配信プラットフォームTwitchも定着 ○ ● ゲームハードウェアがライブ配信に対応 CEDEC2022でも複数の講演 ○ ○ 「この1時間でゲーム実況業界の全てがわかる！？ゲーム実況の過去・現在・未来～【2022年版】 ネットを通じた「居場所化」がゲーム業界を救う」 ■ ○ 8月24日(水) 13:30 ～ 、第7会場 「RTAを活用したプロモーションで起こす瞬間風速と熱量の保温 / RTAコミュニティについて」 ■ 本公演と同時間 、第7会場（タイムシフトでぜひご覧ください） RTA走者 えぬわた氏 14
ゲームのライブ配信の強み ● ● ライブコンテンツのプレミアム感 ○ みんなで同じタイミングで盛り上がれる ○ オンデマンド（ビデオ）はザッピングしていつでも見れる プレイヤーの様子がコンテンツとして大変おもしろい ○ RTAの場合はゲームプレイの妙技 ○ ホラー実況は配信者のリアクション ○ マルチプレイの実況はチームの勝利・敗北の感情 ○ プレイヤーはどう考えてこのアクションをとっているのか、 他人の頭の中を見る感覚がおもしろい 15
動画を見る人＝ゲームを買う人とは限らない ● ゲーム開発会社によるライブ配信との付き合い方は「マーケティング」 ○ 動画視聴者に「買ってもらうこと」「インストールしてもらうこと」がゴール ● 「ゲームを買ってもらう」というゴールに合致しない視聴者もいる ○ ○ ○ ゲームを遊ぶ時間がない ゲームは難しい 遊ぶ環境・お金がない ● 動画配信者の様子を中心として見ている視聴者もいる ○ たとえばテレビのバラエティ番組の企画コーナーで、 ○ 視聴者は「風船割りゲーム」を見たいのではなく、タレントを見たい ゲーム開発会社は、動画配信者に「番組企画」を提供している状態と言える 16
ライブ配信の盛り上がりをもっと有効活用できないか？ ● ライブ配信の文化をゲームコンテンツの一部に組み込むことは可能か？ ● ゲームコンテンツを動画で楽しむ層に、ゲームの技術で新しい体験を提供できないか？ ● マーケティングではなく、動画の状態のまま購買・消費できるコンテンツを 提供する方法はないか？ インタラクティブなライブ配信システムを開発 17
● ゲーム紹介 ● ゲーム配信と開発者の関係 過去事例 ● 過去事例 ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 18
インタラクティブなライブ配信の初期例： コメント連動式配信 ● Twitch plays Pokémon (2014) ※非公式なMOD ○ 初代「ポケットモンスター」を視聴者全員で動かす配信 ■ ボタン全てをコメントでそのまま押させる ■ ポケモンが「aaabaaajss」などの名前に ■ 延々と使えないアイテムを使おうとする ■ 複雑なマップは全く進行できず、途中から投票制に ■ 100万人以上の視聴者が、16日ぶっ通し遊んでクリア ● PS4「無双OROCHI2 Ultimate」(2014) ○ ニコニコ生放送の「アクションコメントボタン」機能 ○ 配信画面の下に「敵軍」「援軍」などのボタンが4つ並んでおり、 クリックするとコメントとして送信される仕様 ○ ゲーム側がコメントをコマンドとして読み取り、ゲームに反映 © コーエーテクモゲームス All rights reserved. ©2022 Pokémon. ©1995-2022 Nintendo/Creatures Inc. /GAME FREAK inc. ポケットモンスター・ポケモン・Pokémonは任天堂・クリーチャーズ・ゲームフリークの登録商標です。 19
コメント欄を使った擬似的な実装 1/2 「有栖川ドットの冒険」(2019) ● ● ● ● YouTube配信 コメントに連動してアイテムが降ってくる ○ 手助けも邪魔もできる 特定のコメントが右から流れて足場に スーパーチャットによる有料コンテンツ © 有栖川ドット 20
コメント欄を使った擬似的な実装 2/2 『SEGA STREAMING THEATER SONIC EDITION』 (2021) ● ● ● YouTube配信 特定のコメントが右から左へ流れて足場に 「シークレットワード」 配信者にちなんだアイテムの出現 ● ● ゲーマーならだれもが知るIP「ソニック」 登録者100万人級のYouTuberを20名呼ぶ ©SEGA 21
これまでの「コメント型」事例の難点 ● 本来の「コメント」コミュニケーションができなくなる ○ コメント欄にコマンドが大量に流れる ○ 配信者とのコミュニケーション、「読み上げ」ができない ● 一方的に送るだけですぐに反応がない ○ コメントを書いた瞬間は何も起きない ○ 自分のコメントがゲーム内でいつ反映されるかわからない ● 動画プラットフォームの規約で禁止される可能性がある ○ コメント本来の使い方ではない これらを解決する方法を動画プラットフォーム側が提供 22
Twitch Extensionsの登場 ● 配信と連携したインタラクションの開発ツールキット ○ 動画の上に文字や画像を載せられる機能 ○ 2022年現在、重ね機能は PC / macのブラウザのみ提供 ● HTML + CSS + JavaScriptで構築できる ○ React、Vueなどのフレームワーク等も使用できる ○ サーバーとの通信も可能 ● 誰でも開発できるが、審査が必要 23
Twitch Extensions事例 1/3： Devolver Digital『Cult of the Lamb』(2022) ● ローグライクアクション ○ 「NPC」として視聴者のTwitch IDが表示 ■ その他の操作はできず、ID表示だけ ■ 配信者がイジってくれる楽しさ ○ Twitch拡張開発の専門会社が担当 © Devolver Digital / Massive Monster All rights reserved. 24
Twitch Extensions事例 2/3： UBISOFT『Hyper Scape』(2020-2022) ● バトルロワイヤルゲーム ○ 配信視聴でゲーム内ポイントを獲得 ○ ゲーム中イベントに投票 ■ 「重力変化」「ダブルジャンプ」 「無限弾数」などの試合ルールへ投票 ○ 応援「キュードス」 ■ ビジュアルギフト（有償購入可能） ○ 配信者とチームを組んでゲームに参加 まだ視聴者をプレイヤーにしようとしている雰囲気 © 2021 UBISOFT ENTERTAINMENT. ALL RIGHTS RESERVED 25
Twitch Extensions事例 3/3： 2K Games『Borderlands 3』(2019) ● ハクスラFPS ○ 配信者の装備を表示 ○ バッドアス視聴者イベント ■ ○ ランダムな近くの敵1体が強化、視聴者のTwitch IDを冠する 視聴者は投票で敵の強化内容を決定 レア宝箱イベント ■ 配信者が赤い宝箱を開けた時 視聴者もゲーム内アイテムが手に入るチャンス 公式コメント：”エコーキャスト拡張機能を使った『ボーダーランズ3』の配信は平均して62%も長く視聴” https://borderlands.com/ja-JP/news/2019-10-25-borderlands-3-echocast-twitch-extension-guide/ © 2K Games All rights reserved. 26
その他、視聴者とのインタラクション開発は注目度が高い ● Crowd Control：Warp World, Inc ○ ○ ゲームへの非公式MODとして視聴者連携機能を提供 ■ ゲームの改造（かなりグレー） RTA大会のエキシビジョンとして使われている ● Stats powered by AWS : Riot Games、Amazon ○ ○ 2022年7月に発表されたばかり、詳細は不明 9月開催のeスポーツイベントで続報予定 27
● ゲーム紹介 動画配信における 新しい取り組み ● ゲーム配信と開発者の関係 ● 過去事例 ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 28
デモリッション ロボッツ K.K.では新しい配信の仕組みを実装しました ※画面は開発中のものです 29
ブラウザで動画の上からボタンや文字情報を重ねて表示 視聴者がゲームに直接介入できる ※画面は開発中のものです 30
動画上でプレイヤーを選択（＝ロックオン）できる ロックオン表示の アイコン画像 ※画面は開発中のものです 31
ロックオンしたプレイヤーへボタンクリックで「応援」できる 「応援」＝ ゲーム内プレイヤーの エネルギーが増える エネルギーを使って必殺技 or 破壊状態から復帰できる ※画面は開発中のものです
視聴者ポイントが付与される 視聴者のポイント （プレイヤーのポイントではない） 「My House」 視聴者の所有ビル（という設定）で ビルの位置にTwitch IDが表示 プレイヤーに破壊されると 視聴者ポイントが手に入る ※画面は開発中のものです 33
貯まったポイントで「お邪魔アイテム」を投下できる 1. 視聴者UIで罠アイテムを選択 2. 落としたいプレイヤーをロックオン 3. ポイントを消費して投下 4. 罠アイテムが出現するまでの 秒数をカウントダウン表示 → 動画の遅延に応じて計算 ※画面は開発中のものです 34
投下した罠アイテムに、視聴者のTwitch IDが表示される ゲーム内に描画され、プレイヤーから見える → 配信者に口頭でイジってもらえる ※画面は開発中のものです 35
誰の罠がどのプレイヤーに当たったかのランキングを表示 ※画面は開発中のものです 36
本配信システムの特徴：視聴者とのインタラクション ● 双方向なインタラクション ○ ○ 視聴者からゲームへの一方通行ではない ゲーム内の情報をリアルタイムにブラウザ上で表示 ● マウスクリックによる直感的な操作 ○ ● コメント入力よりも圧倒的に優れた体験 特別なWebサイトやアプリを介さない ○ Twitchの公式ページで視聴可能 ※画面は開発中のものです 37
コメント欄の本来の機能を温存 ※画面は開発中のものです 38
● ゲーム紹介 ● ゲーム配信と開発者の関係 技術解説 ● 過去事例 ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 39
システムオーバービュー 40
一般的なゲームのライブ配信 ゲーム機/PC ブラウザ キャプチャした 映像音声 動画配信 プラット フォーム 配信 サーバーで レンダリング 配信者 動画視聴者 41
本システムの全体構成 クラウドサーバー ゲーム機/PC データ 通信 映像 音声 サーバーで レンダリング 配信者 ブラウザ 動画配信 プラット フォーム 配信 データ通信 動画視聴者 42
本作を構築するテクノロジー ● ゲーム本体開発 ● インタラクティブなライブ配信システム開発 • • ゲームのレンダリングに適したGPUを搭載したWindowsサーバー 支援プログラム「Microsoft for Startups」に当社が採択 • • 視聴者UIの構築が可能な動画プラットフォーム 「Twitch Bits」視聴者の課金システム • • クラウドサーバーの知識が少なくてもインタラクティブなライブ配信システムが実現可能 Twitchによるレコメンド https://blog.twitch.tv/en/2018/12/11/building-extensions-with-genvid-22 43
本作のシステム構成図 ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or PC ゲーム.exe ゲーム機 or PC サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ 視聴者入力データ プレイヤー プレイヤー 動画視聴者 44
Unity実行ファイルは２種類（ローカル側/クラウド側） クラウド側：「観戦者モード」的な振る舞い ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or PC ゲーム.exe ゲーム機 or PC サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ 視聴者入力データ プレイヤー プレイヤー ローカル側：プレイヤーが操作 動画視聴者 45
Photon Cloudの役割：ローカル側とクラウド側の通信 ● 実装方法は通常のオンラインマルチプレイと同一 ゲーム.exe ゲーム.exe ゲーム機 or PC プレイヤー ゲーム.exe ゲーム機 or PC サーバー インスタンス群 クラウド側をプレイヤーが直接操作することはない ○ マルチプレイのクライアントとして、 他プレイヤーの動きを再現して描画するだけ プレイヤー 46
クラウドサーバー内で動作するGenvidについて ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or PC ゲーム.exe ゲーム機 or PC サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ 視聴者入力データ プレイヤー プレイヤー 動画視聴者 47
Genvid SDKの構成 ● ゲーム用：Unity / Unreal Engine / Direct X向けライブラリ ○ ゲームから映像音声をキャプチャ ○ 視聴者UIとデータを送受信 ● ブラウザ用：JavaScriptモジュール (UMD / ES5) ○ ブラウザで表示する視聴者UIに組み込んで使う ○ ゲームとデータを送受信 ● サーバー用：サーバーミドルウェア一式、管理ツール ○ クラウドサーバー上に必要なインスタンスをデプロイ ○ ゲームとブラウザの間のデータ通信を実行する ○ 動画プラットフォームへ動画ソースを圧縮の上で送信する 48
Genvidが行っていること 動画エンコード ブラウザとクラウドサーバーの通信 ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or PC ゲーム.exe ゲーム機 or PC サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ 視聴者入力データ プレイヤー プレイヤー 動画視聴者 49
ローカルからブラウザにデータを流す： ゲームからプレイヤーキャラの位置座標を視聴者UIへ送信 ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or PC プレイヤー ゲーム.exe ゲーム機 or PC プレイヤー サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ 動画視聴者 50
ブラウザからローカルにデータを流す： 視聴者UIから、応援・罠アイテムの投下データを送信 ゲーム.exe 動画 ゲーム.exe ゲーム機 or PC 動画 ブロード キャスト ゲーム.exe ゲーム機 or PC サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ブラウザ 視聴者入力データ プレイヤー プレイヤー 動画視聴者 51
以降、実装・設定を３パートで解説いたします 1. クラウドサーバー側 ○ 各インスタンスの役割とデプロイ 2. ブラウザ側 ○ ○ 視聴者UIの開発 Twitchへのデータ提出と審査 3. Genvid SDK側 ○ 視聴者から届くデータの集計方法の定義 ※以降は実例ベースの解説となりますが、本手法はUnityやAzureに限らず Unreal Engine + AWSなどでも実現可能 52
1.クラウドサーバー側 53
クラウドサーバ内での動作：ゲームをレンダリング ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or PC ゲーム.exe ゲーム機 or PC サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ 視聴者入力データ プレイヤー プレイヤー 動画視聴者 54
クラウド内のインスタンスはGenvidが自動で設定・実行 ● Windowsインスタンスでゲームを動作 ゲーム.exe ○ ゲームから映像をキャプチャ ○ ゲームの内部データをデータ配信サーバーに渡す ○ データ受信サーバーから来たデータを反映 ● 動画エンコードとTwitchへの送信 サーバー インスタンス群 ● ゲーム内部データをブラウザへ配信 ● ブラウザからのデータ受信と集計 55
クラウド内のインスタンスはGenvidが自動で設定・実行 ● Windowsインスタンスでゲームを動作 ゲーム.exe エンコード サーバー データ配信サーバー データ受信サーバー ○ ゲームから映像をキャプチャ ○ ゲームの内部データをデータ配信サーバーに渡す ○ データ受信サーバーから来たデータを反映 ● 動画エンコードとTwitchへの送信 ● ゲーム内部データをブラウザへ配信 ● ブラウザからのデータ受信と集計 56
サーバーでレンダリングすることで、スケール可能に ● 大量の視聴者からのデータをさばくことができる ○ レンダリング箇所（ゲーム.exe）は１台のままスケールできる Windowsサーバー ゲーム.exe ● その他のメリット： ○ サーバー側で通信処理＝ゲームプラットフォームを問わず動作 ○ 動画送出画面をサーバ内で完結＝配信者側の準備がいらない エンコード サーバー ○ プレイヤーとは別のカメラ視点でゲームをレンダリングできる ○ プレイヤーがいないコンテンツが作れる（後述） データ配信サーバー データ受信＆ リダクションサーバー データ受信サーバー データ受信サーバー データ受信サーバー データ受信サーバー ● デメリット：クラウドサーバーの稼働が必要 データ受信の処理部分をスケール 57
2. ブラウザ側 58
本システムの特徴である「視聴者UI」の技術構成 ● Twitch Extensionsを使って開発 ● 実装は一般的なHTML + CSS + JavaScript ● Genvidの通信用jsモジュールをインポート ○ ○ サーバーからのデータを受信し描画を更新 ボタンが押されたらサーバーへデータを送信 ※画面は開発中のものです 59
視聴者による「ロックオン」操作の実現方法 1. ゲーム内キャラのXY座標データを ブラウザへブロードキャスト ○ データには動画のタイムコード情報が同梱 2. 座標に合わせて透明なボタンを重ねる ○ ○ XY座標データで位置を動かす タイムコード情報を使い、遅延を常に補正 3. クリックされたらロックオン画像を描画 ※画面は開発中のものです 60
サーバーから送られてきた「プレイヤーキャラの位置」を反映
genvidClient.onDrawの
呼び出しタイミングで
描画関数を呼び出し
genvidClient.onDraw(function (frame) {
var gameDataFrame = frame.streams['PlayerStreamData'];
draw(gameDataFrame.user);
});
プレイヤーキャラの位置が
格納されたデータを取り出す
const draw = (streams) => {
var playerStates = streams['PlayerStates'];
for (let i = 0; i < playerLockOnButtons.length; i += 1)
{
playerLockOnButtons.screen.x = playerStates[i].screenResX;
playerLockOnButtons.screen.y = playerStates[i].screenResY;
データに応じて
ロックオンボタンの位置を動かす
}
};
※初期化やnullチェックを省いた疑似コードです
61
プレイヤーの応援、罠アイテム投下の実装 ● ブラウザからクラウドサーバーへデータ送信 ○ ○ 「応援」 「罠アイテムを投下」 ● サーバー側ではブラウザから届いたデータを集計し、 ゲームexeへ渡してアイテム出現などを実行 ※画面は開発中のものです 62
ボタン入力で「応援対象のプレイヤー番号」を送信
for (let i = 0; i < cheerButtons.length; i += 1) {
cheerButtons[i].onclick = function () {
genvidClient.sendEvent([{
"key": ["cheer"],
"value": i
}]);
}
}
genvidClient.sendEventで
キー「cheer」、値はボタンの配列インデックスのデータを送る
※初期化やnullチェックを省いた疑似コードです
63
Twitch Extensionsの開発手順 1. ローカルPCで動作確認 a. Twitch Developer Rigというエミュレーション環境を使う 2. Twitchに視聴者UIのデータをアップロードしてテスト a. 実際のTwitch配信を行いながら動作確認 b. Twitchのホワイトリストに招待すれば複数人で確認できる 3. Twitchの審査に提出 a. 審査完了後、誰でも視聴者UIが利用できるように 64
3. Genvid SDK側 65
クラウドサーバー管理はGenvid SDKにお任せ ● 基本的には自動セットアップ ○ ○ Genvid SDKが必要なインスタンスのデプロイを実行 ■ JSONスキーマ、HCL形式で設定 管理画面も実装済み 66
視聴者UIにはデータ送信量の調整が必要 ● 「応援」：サーバー上で集計可能なデータ：大量に送って良い ○ ○ 視聴者がいつでも実行できるアクションとした 100件来た「プレイヤーAを応援」を、1件の「100回の応援」に変換してゲームに渡す ● 「罠アイテム」：Twitch IDが個別データのため集計不可 ○ ○ 頻度の少ないアクションとした データが来るたびにゲームに渡す → JSONスキーマで設定： ブラウザから受け取ったデータをどのような形式・ルールで「まとめる」かを定義する 67
"game": {
"maps": [
{
"id": "cheer",
"source": "userinput",
"where": {"key": ["cheer"], "name": "<name>", "type": "string"},
"key": ["cheer", "<name>"], "value": 1
}
],
"reductions": [
{
"id": "cheer",
"where": {"key": ["cheer", "<name>"]},
"key": ["<name>"],
"value": ["$sum"],
"period": 250
}
]
}
68
"game": {
"maps": [
{
"id": "cheer",
cheerという名前のデータ：
キーにcheerとname、値は1
"source": "userinput",
"where": {"key": ["cheer"], "name": "<name>", "type": "string"},
"key": ["cheer", "<name>"], "value": 1
}
],
"reductions": [
{
nameをキーとして,値を合計(sum)
計算頻度は250msecに1回
"id": "cheer",
"where": {"key": ["cheer", "<name>"]},
"key": ["<name>"],
"value": ["$sum"],
"period": 250
}
]
}
69
PCでクラウドサーバーの動作をエミュレート可能 ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or スマホ or PC ゲーム.exe ゲーム機 or スマホ or PC サーバー インスタンス群 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ 視聴者入力データ プレイヤー プレイヤー 動画視聴者 70
PCでクラウドサーバーの動作をエミュレート可能 開発用PC ゲーム.exe 動画 ゲーム.exe ゲーム機 or PC プレイヤー ゲーム.exe ゲーム機 or PC プレイヤー サーバー インスタンス群 ゲーム内部のデータ ブラウザ 視聴者入力データ 開発者 71
演者の顔を撮影してサーバー上で合成 ゲーム.exe 動画 ブロード キャスト 動画 ゲーム.exe ゲーム機 or PC ゲーム.exe サーバー インスタンス群 ゲーム機 or PC 視聴者のブラウザ 視聴者のブラウザ ゲーム内部のデータ ブラウザ プレイヤー 動画 視聴者入力データ プレイヤー カメラ映像 OBS 動画視聴者 72
配信者側の映像入力 ● 配信者のカメラ映像ソースをクラウドサーバー上でワイプ合成する仕組み ○ ○ Genvidが専用のrtmpサーバーを建てる Genvidの映像コンポーズツールで映像ソースを合成 ■ システム的にはグリーンバック合成もできる ※画面は開発中のものです 73
● ゲーム紹介 配信イベントの 振り返り ● ゲーム配信と開発者の関係 ● 過去事例 ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 74
イベント実施の体制 ● 当社開発チーム ○ ○ ○ Unityゲーム実装 ゲーム・視聴者UIの設計、体験デザイン 視聴者UIのプロトタイプ開発 ● 協力会社 ○ バックエンド構築 ■ 株式会社リンクトブレイン ● ● ○ 視聴者UIの実装 Azure環境へのデプロイ実施 イベント運営 ■ ■ XVI Inc. ● 東雲めぐ氏をはじめとした配信者のアサインと配信環境 ● 試験配信実施の全般的なサポート Genvid Technologies Japan K.K. 75
視聴者アンケート（42名回答）からの感想 ● 斬新で面白かった！ ○ 「視聴者が参加することで勝敗を左右するのが面白いと思いました！」 ○ 「配信ページでそのまま視聴者参加型、というのはとても斬新で面白かったです！」 ● 配信者のファン数によって、有利不利がはっきり出そう ○ 「リスナーの多さで優劣が明確に決定されそう」 ○ 「支援者が少ない配信者への救済策がほしい」 ○ 「『あの時、〇〇が罠を落とさなければ推しが勝ってたのに！許さない！』という 喧嘩もありえる」 ● 「投げ銭」「スーパーチャット」登場時の驚きが呼び起こされた 76
動画を直接操作できる文化の浸透は、まだまだこれから ● 「視聴者UIはわかりやすかった」と回答したのは3割 ○ 「これは私が操作できるボタンなんだ」と気が付かない ● 今後の改善方法 ○ 途中から視聴開始した人向けのチュートリアル ○ マウスオーバーで大げさにアニメーションするなどの工夫 わかりやすかった 操作が分かりにくい 箇所があった → 動画上で操作できるUIについては、これからの腕の見せ所 77
92.9%が「有償アイテムを購入したい」と回答 ● 54.8%が1,000円まで払いたい ● 33.3%が500円まで払いたい ● 購入意思がない視聴者は7.1% 有償アイテムがあっても 購入するつもりはない 1,000円まで 4.8% 100円まで 500円まで 重要：配信者にではなく、本システムによる視聴者の体験に払う金額 ≠ 視聴者1人あたり500～1,000円がゲーム開発者の収益になり得る 78
新しすぎてまだ手探り 本システムは配信オペレーションが煩雑で、予測しにくい不具合も ● 演者の動画、ゲーム動画とのミックス、ゲームの管理を同時に行う ○ ○ ３人体制でなんとか回せる忙しさ 統合的な操作環境を構築したい ● 大量視聴者による操作を再現する方法が間に合わず、デバッグしにくかった ○ 実際に配信してみないとわからない不具合があった ■ 「My House」が何個も表示 ■ 罠アイテム投下のカウントダウンが停止 ■ 「視聴者用ポイント」がなかなかもらえない ○ 大量視聴者からのアクセスをエミュレーションする仕組みを開発したい 79
特徴的なサーバー負荷傾向： ゲームサーバー・データ受信サーバー負荷は予想より少なく済んだ ● ゲームサーバー(NVv8)の負荷は30%程度 ゲーム.exe ○ ○ CPUパワーだけならもっと小さいインスタンスでも大丈夫 マルチプレイサーバー経由の通信頻度によって負荷が変動 ● データの受信サーバー(B2s)の負荷は10％程度 エンコード サーバー ○ ○ データ配信サーバー データ受信サーバー 視聴者数に応じて比例して大きくなると予想 事前の負荷テスト ■ 連続300人で実験：負荷13% ■ 実際の配信ではユニーク308人,最大同時146人で10%程度 ● インスタンス利用料概算 17万円 / 月 ※24時間フル稼働の場合 ○ ほかにもクラウド関連費が必要。ストレージ・ドメイン運用・マルチプレイサーバーなど 80
今後の予定 ● ハッキング・不正対策 ○ ○ 複数タブで視聴した際の対策 視聴者ポイントのブラウザローカル保存をやめてサーバー管理へ ○ これに伴うGDPR/CCPA関連機能 ● 視聴者マネタイズの実装 ○ ○ 視聴者による少額課金（Twitch Bits）の組み込み 配信イベント実施時に売り上げが発生する状態へ ● 配信者への使用許諾プランの制定 ○ Twitch Bits売上のレベニューシェア ○ クラウドサーバーの使用チケット販売 81
● ゲーム紹介 みなさまの タイトルへの応用 ● ゲーム配信と開発者の関係 ● 過去事例 ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 82
開発環境に特に縛りはない ● ゲームプラットフォームを問わず利用できる ○ スマホ・家庭用ゲーム機向けタイトルでも実施できる ○ 本タイトルはNintendo Switchでも発売予定 ● 開発環境を問わない ○ ○ 同手法をUnreal Engineやネイティブ開発環境でも応用できる AWSでもできる 83
eスポーツ事例：Valve「Counter-Strike: Global Offensive」 ● ● 通常の動画視聴は無料 視聴者UIの利用に５ドル ● 視聴者の直接介入はない（公平性のため） ○ 勝敗に関係しない「応援」のみ可能 ● 視聴者向けデータ配信の活用する ○ 選手データを重ねて表示 ○ 本試合の選手情報一覧 ○ 視聴者専用ミニマップ ○ 視聴者専用キルレート表 Amplify Your Engineering Resources with the Genvid SDK https://blog.twitch.tv/ja-jp/2018/12/11/building-extensions-with-genvid-22401da163c2/ （C）Valve Corporation, all rights reserved. Counter-Strike, and the Counter-Strike logo are trademarks and/or registered trademarks of the Valve Corporation. 84
プレイヤーがいないリアルタイムコンテンツ事例： Facebook 「Rival Peak」 ● ● ● Facebook上でのリアリティーショー ○ https://fb.com/RIVALPEAK AIキャラによるサバイバル番組 ○ 視聴者の投票などでAIキャラの行動に影響 視聴時間数は１億分越え © 2020 Facebook. All Rights Reserved. 85
Rival Peakの実装 ● サーバー上でレンダリング ● 視聴者のブラウザで動画の上から文字・画像を重ねる ● ブラウザ上の視聴者の操作データを集計・反映 動画の上から 視聴者用UIを重ねる © 2020 Facebook. All Rights Reserved. 86
他ジャンルのゲームタイトル・コンテンツに応用可能 ● たとえば、対戦格闘 ○ ○ 入力コマンド履歴などの情報表示 全国のアーケードとサーバーを接続してTwitch配信＋視聴者応援 ● たとえば、パズルゲーム ○ 視聴者がパズルの問題を作成する ※ただし動画プラットフォームのルールに注意 Twitch Extensionsは有償の「勝敗への賭け」(Betting)は禁止 非代替性トークンの使用も禁止 87
今後は「複数の動画プラットフォームへの対応」がカギ ゲームハードのマルチプラットフォームだけではなく、 動画のマルチプラットフォーム対応が必要に ● 多くの動画プラットフォームがインタラクション対応になる可能性がある ○ ○ 動画にHTMLを重ねて、 JavaScriptが動く環境 特に国内では、スマートフォン向け配信プラットフォームが対応してくれると嬉しい ● 今回の仕組みがあれば、比較的手軽に複数動画PF対応が可能になる ○ ○ ゲーム開発者側で通信システムを含めたサーバー部分を持っているため 視聴者UIの移植だけを行えばよい 参考：OBSの配信先設定メニュー ▶ 88
● ゲーム紹介 ● ゲーム配信と開発者の関係 ● 過去事例 まとめ ● 動画配信における新しい取り組み ● 技術解説 ● 配信イベントの振り返り ● みなさまのタイトルへの応用 ● まとめ 89
まとめ：新しい視聴体験を実現 ● Twitch Extensionsを活用し、ゲームのライブ配信において 「動画視聴者」が「プレイヤー」にインタラクション可能なシステムを実装しました ● 本システムによって、動画視聴者へゲームの購入を促すのではなく、 動画のままインタラクティブな遊びを実現しました ● インタラクティブなライブ配信をゲーム開発者側が構築・運営し、 Twitch Bitsを使うことで、「プレミアムなコンテンツ」として提供できます 90
ゲーム開発者が、技術の力で、ゲームの動画配信をもっと面白くする ● ゲーム配信の文化をゲーム面白さの中に組み込む ● 「動画でゲームを楽しむ層」へ、新しい面白さを提供する ● 視聴者が「普通のゲーム配信では物足りない」と感じる未来はもうすぐです ゲームプレイヤー、配信者、視聴者、開発者 全員が幸せになる 91
ご清聴ありがとうございました 「デモリッション ロボッツ K.K.」のbotサーバーが稼働しています。 視聴者UIをぜひ体験してみてください。 https://www.twitch.tv/drkk_hq ※PC/macのブラウザでのみ動作します。 （Twitch ExtensionsのUI重ね機能はスマートフォンアプリで動作しないため） ※タイムシフト期間中も日中はなるべく動かしておきます。 92
Appendex 93
本システムのサーバーインスタンス構成( Azure ) ● NV8as v4 x 1台 ○ ゲーム動作用サーバー ○ GPU「AMD Radeon Instinct MI25」を 1/4使える ● F8s v2 x 1台 ○ エンコーディングサーバー ● B2s x 3台 ○ 内部サーバー（データの集計など） ○ パブリックサーバー（Twitchへのデータ送受信） ○ 管理サーバー（管理画面、タスク管理） 94
サーバーコスト概算 ● 最もデータ量が大きい動画ブロードキャストは Twitch経由なので費用なし ● 概算 17万円 / 月 ※24hフル稼働の場合 の内訳 ○ ○ ○ Windows + GPUサーバー 10万円ぐらい エンコード用サーバー 4万円ぐらい その他管理用 x 3 1.5万円ぐらい ● ほかにもクラウド上のサービスの利用費が必要 ○ ストレージ・ドメイン・マルチプレイサーバーなど 95
サーバー負荷モニタリングを実施 96
Appendex 97
Genvid Unityプラグインの組み込み手順 98
Genvid SDK同梱のコンポーネントをシーンに配置 ● ● ● 映像・音声のキャプチャ 視聴者UIからのデータをフックする ゲーム内部のデータを視聴者UIへ送信 99
ブラウザからゲームへ送信されるデータの処理
例：関数OnCheerに引数GenvidSDK.EvnetResult[] を渡す
public IObservable<(byte playerNo, int cheerCount)> OnCheerObservable => onCheerSubject;
public void OnCheer (string eventId, GenvidSDK.EventResult[] results, int numResult,
IntPtr userData)
{
TryParse(results[0].key.fields[0],out var playerNo);
var cheerAmount = (int)results[0].values[0].value;
onCheerSubject.OnNext((playerNo:(byte)playerNo, cheerCount:cheerAmount));
}
100
用意した関数をGenvidのコンポーネントにアタッチ ID「Cheer」という データを受け取る 101
ゲームからブラウザへ送信されるデータの処理 例：SubmitPlayerData関数 private PlayerStatesStream _playerStatesStream; public void SubmitPlayerData(string streamId) { _playerStatesStream.players = playerGenvidStreamDataArray; _playerStatesStream.screenResX = Screen.width; _playerStatesStream.screenResY = Screen.height; GenvidSessionManager.Instance.Session.Streams.SubmitGameDataJSON(streamId, _playerStatesStream); } 102
用意した関数をGenvidのコンポーネントにアタッチ ID「PlayerStates」という名 前でデータを配信する 103
Genvid Web クライアントの関連情報 ● 通信にはleaf サービス（Web ソケットサーバー）と接続 ○ 接続 URL を取得するには、2 つの Web リクエストを Disco サービス API に送信 ■ GET /disco/stream/info ■ POST /disco/stream/join ● Genvid モジュールを介してJavaScript APIが行うこと ○ genvid leaf への接続 ○ ストリームのデコード ○ ビデオプレイヤーの作成 ○ データとビデオの同期に必要なロジックの提供 104
その他 Genvidで通信するデータ ● ゲームからブラウザへステートを配信 ○ ○ ○ ○ 毎試合、冒頭に配信されるデータ 視聴者のIDをブラウザからサーバーへ送信 ビルの配置情報 マイハウス情報 ● Twitch IDをブラウザからゲームへ送信 ○ 次ラウンドのMy house表示に利用 105