ゲームのステージを動画配信の視聴者に作らせる

ゲームのステージを 動画配信の視聴者に作らせる 株式会社ヘッドハイ 一條貴彰

きょうの話 ● ユーザージェネレイテッドコンテンツ ○ UGCからVGCへ ● ゲームのプレイヤーがコンテンツ（ステージな ど）を作り、プレイヤー同士で共有できる ビューワージェネレイテッドコンテンツ ○ ○ ○ おれの造語 ゲーム配信動画の視聴者がコンテンツを作 り、配信者やプレイヤーへ送付できる 視聴者主導コンテンツへ 2

デモ https://youtu.be/cU4wBAUHtto 3

• https://youtu.be/cU4wBAUHtto

ブラウザゲームではない ● ストリーミング動画 ○ ボタン類だけブラウザ描画 ○ 動画の上からボタンを載せている ○ Twitchの公式サイト上で動く！ いろいろできそう 4

イントロダクション

自己紹介：一條貴彰 ● 小規模インディーゲーム開発者 ○ ● 「Back in 1995」 ■ Steam, PS4, Switch, Xbox One向けに配信 著著 ○ ○ 「インディーゲーム・サバイバルガイド」 技術評論社 「Unityサウンド エキスパート養成講座」 ボーンデジタル 6

開発中「デモリッション ロボッツ 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は任天堂の商標です 7

動画視聴サイト上で、操作可能なUIを動画の上に重ねる ● 双方向なインタラクション ○ ○ ● ● 動画サイトからゲームへの一方通行ではない ゲームの情報がブラウザに表示 マウスクリックによる直感的な操作 特別なWebサイトやアプリを介さない 8

このシステムのさらなる応用 視聴者が「応援できる」「邪魔できる」よりも 「ステージそのもの」を作れたら無限大なのでは…？ ＝なんとかメーカー系のステージエディットだけ 動画視聴者のために用意する 今見ている配信者に難題を押し付けられる！ 9

試作品① ● 動画視聴者が５ｘ５のマスで柱を立てる ○ Qiita: https://qiita.com/Takaaki_Ichijo/items/feb8c4ca90 2f72c66cc3 https://youtu.be/qgaXEhknudw 10

• https://qiita.com/Takaaki_Ichijo/items/feb8c4ca902f72c66cc3
• https://youtu.be/qgaXEhknudw

試作品のシステム概要

一般的なゲームのライブ配信 ゲーム機/PC ブラウザ キャプチャした 映像音声 動画配信 プラット フォーム 配信 サーバーで レンダリング 配信者 動画視聴者 12

本システムの全体構成 クラウドサーバー ゲーム機/PC データ 通信 映像 音声 サーバーで レンダリング 配信者 ブラウザ 動画配信 プラット フォーム 配信 データ通信 動画視聴者 13

システム構成図 ゲーム.exe 動画 ゲーム.exe 視聴者のブラウザ 視聴者のブラウザ ゲーム.exe サーバー インスタンス群 ゲーム機 or スマホ or PC 動画 ブロード キャスト ゲーム内部のデータ ブラウザ ゲーム機 or スマホ or PC 視聴者入力データ プレイヤー プレイヤー 動画視聴者 14

試作品①から期待できること ● 動画コンテンツの肝は配信者の感情の動き ○ 視聴者がそこに関与できることに大きな興奮がある ● 動画配信者がプレイするステージを視聴者が作る ○ スパチャの3000倍強いコミュニケーションができる 15

試作品からの発想転換

試作品② 発想転換 ● プレイヤーがいなくても成立するのでは ○ ○ ● 視聴者みんなでステージ作って botに解かせる 柱を配置してタワーディフェンス 視聴者同士でのコミュニケーション ○ 作った柱に視聴者IDが出るとか 17

試作品②の全体構成 クラウドサーバー ブラウザ 映像 音声 サーバーで レンダリング 動画配信 プラット フォーム 配信 データ通信 動画視聴者 リッチな映像をサーバーでレンダリングしつつ、 操作部分をブラウザで表示動画配信インフラは Twitchを使用 18

視聴者が動画内容のコンテンツを作る ● ビューワージェネレイテッドコンテンツ ○ おれの造語 ○ ただ動画のストリーミングを見させられるのではなく、その内容を視聴 者が作る ○ サーバー側でリアルタイムレンダリングすることにより実現 ● MMO的なものと動画視聴の中間 ○ なんもインストールしなくてもいきなり遊べる 19

実際の開発

用意するもの ● ゲーム本体 ○ Unityで開発 ● ブラウザ側で表示するボタンなど ○ HTML/JavaScriptで開発 ● ゲームを実行するためのクラウドサーバー ○ ○ ブラウザとサーバーのデータ送受信 ゲームの実行とキャプチャ、動画配信サービスへの動画送信 それぞれの環境に「Genvid SDK」を導入する 21

Genvid SDK ● ● ● ゲーム用ライブラリ ○ ゲームから映像音声をキャプチャ ○ 視聴者専用UIとデータを送受信 ○ Unityプラグインあり ブラウザ用：javascriptモジュール (UMD / ES5) ○ ブラウザで表示する視聴者専用UIに組み込んで使う ○ ゲームとデータを送受信 サーバー用：サーバーミドルウェア一式、管理ツール ○ AzureまたはAWS上に必要なインスタンスをデプロイ ○ ゲームとブラウザの間のデータ通信を取り持つ ○ 動画プラットフォームへ動画ソースを圧縮の上で送信する 22

クラウドサーバー管理はGenvid SDKが実行 ● 基本的には自動セットアップ ○ ○ Genvid SDKがシステムに必要なサーバー（インスタンス）の生成管理 管理画面もある 23

ゲーム側の開発

Genvid SDK同梱のコンポーネントをシーンに配置 ● ● ● 映像・音声のキャプチャ 視聴者UIからのデータをフックする ゲーム内部のデータを視聴者UIへ送信 25

データの送受信を実装 ● ブラウザからサーバーへ送る ○ 視聴者の操作をサーバーへ送信してUnityゲームロジックが受 け取って処理 ○ 今回は「柱の配置データをサーバーへ送る」 ● サーバーからブラウザへ送る ○ Unityゲーム内のデータをブラウザへ送信して、ブラウザ側の UI表示処理に使用 26

柱の配置データをサーバーへ送る クラウドサーバー ゲームexe サーバー インスタンス群 柱配置データ 27

ブラウザからゲームへ送信されるデータの処理
例：UniRx使用
関数OnCheerが呼ばれたら受け取ったデータを加工してOnNext
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));
}

28

用意した関数をGenvidのコンポーネントにアタッチ ID「Cheer」という名前のデータがきたら 関数OnCheerを呼ぶ 先ほどの実装を通じてイベントが発行される 29

ゲームからプレイヤーの情報をブラウザへ送信 クラウドサーバー ゲームexe サーバー インスタンス群 ゲーム内部のデータ 30

ゲームからブラウザへ送信されるデータの処理 例：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); } 31

用意した関数をGenvidのコンポーネントにアタッチ ID「PlayerStates」という名前で データを配信する 32

ブラウザ側の開発

視聴者用UIの開発の流れ 1. Genvidの通信ライブラリの繋ぎ込み a. b. c. Genvidライブラリの初期化 サーバーからのデータ受信時に呼ぶ関数を定義 ボタンなどが押されたときに送信するデータを定義 2. サーバー実行部分をクラウドサーバーへアップロード 3. 視聴者UI部分をTwitchへアップロード・審査 34

「視聴者専用UI」の技術構成 ● ● ● 一般的なHTML + css + javascript Genvidの通信用jsライブラリをインポー ト ○ ボタンが押されたらサーバーへデータを送信 ○ サーバーから来たデータで描画を更新 仕組み上はReact, Vueなどのフレームワークも利用 可能 35

ボタン入力で「柱の配置」情報を送信 ● ５x５のマス目でボタンを描画 ○ ● 柱ボタンがクリックされたら「None（なし）」と「Pillar（柱）」を切り替え ○ ● HTML側でボタンを25個用意 JavaScript側でクリック時の変更処理 「Send」がクリックされたら 現在の配置状態を 0 1 のバイナリにして送信 ○ ○ ○ JavaScript側でクリック時の変更処理 データ形式は「0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,1,0,0,0,1,1,1,1,1,1」 Genvidライブラリを通じて送信 36

配置されたボタンの色変え・名前変え処理
var buttonElements = document. querySelectorAll ("[type=setbutton]" );
buttonElements .forEach ((buttonElement , index) => {
let top = ((Math. floor(index / 5)) * 6) + 3;
let left = ((index % 5) * 6) + 3;
buttonElement .setAttribute ('style' ,'top:'+top+'vw;left:' +left+'vw;');
buttonElement .onclick = function () {
if (buttonElement .innerText == "None")
{
buttonElement .innerText = 'Pillar' ;
buttonElement .setAttribute ('style' , 'background-color:orange;top:' +top+'vw;left:' +left+'vw;');
} else{
buttonElement .innerText = "None";
buttonElement .setAttribute ('style' ,'background-color:white;top:' +top+'vw;left:' +left+'vw;');
}
}
});

37

データの送信処理
var sendButtonElement = document.getElementById("send");
sendButtonElement.onclick = function () {
var arr = Array.prototype.map.call(buttonElements, (b) => b.innerText == "None" ? 0 : 1);
var levelDataArrayStr = arr.join(',');
genvidClient.sendEvent([{
"key": ["levelData"],
"value": levelDataArrayStr
}])
};

38

まとめ

実際のサービスとして運用するためのハードル ● GPUつきクラウドサーバーの実行コスト ○ ○ ● Twitchへのブラウザ側動作部分の提出・審査 ○ web上のノウハウが超少ない ○ ● GPUインスタンスは高い AWSもAzureもAMD系のが多少安い 完全に英語やりとり YouTubeに同様のAPIが無い ○ ○ ○ 日本ではゲーム分野においてもTwitch < YouTube 動画の上に独自のHTML要素を重ねられる機能 Google様！なる早で頼む！ 40

視聴者が主導するゲームコンテンツ ● ただ見るだけではない、動画の新しいかかわり方 ○ 視聴者が作ったものが動画に登場する ○ 動画の内容が変化していく ● マネタイズも設計できる ○ ライブ動画の熱狂＋モバイルゲームの「イベント走り」体験がつくれる 41

ご清聴ありがとうございました

Appendex 43

Twitch Extensionsの開発手順 1. ローカルPCで動作確認 a. 2. Twitchに視聴者UIのデータをアップロードしてテスト a. b. 3. Twitch Developer Rigというエミュレーション環境を使う 実際のTwitch配信を行いながら動作確認 Twitchのホワイトリストに招待すれば複数人で確認できる Twitchの審査に提出 a. 審査完了後、誰でも視聴者UIが利用できるように 44

本システムのサーバーインスタンス構成( Azure ) ● NV8as v4 x 1台 ○ ○ ゲーム動作用サーバー GPU「AMD Radeon Instinct MI25」を 1/4使える ● F8s v2 x 1台 ○ エンコーディングサーバー ● B2s x 3台 ○ ○ ○ 内部サーバー（データの集計など） パブリックサーバー（Twitchへのデータ送受信） 管理サーバー（管理画面、タスク管理） 45

サーバーコスト概算 ● 最もデータ量が大きい「動画」ブロードキャストは Twitch経由なので無償 ● 概算 17万円 / 月 ※24hフル稼働の場合 ○ ○ ○ Windows + GPUサーバー 10万円ぐらい エンコード用サーバー 4万円ぐらい その他管理用 x 3 1.5万円ぐらい ● ほかにもクラウド上のサービスの利用費が必要 ○ ストレージ・ドメイン・マルチプレイサーバーなど 46