SpaceSweeper + Genvid + Twitch extension

1. Space Sweeper + Genvid + Twitch
視聴者を参加者にしてしまう技術
中嶋謙互
2019 Apr 19

2. Space Sweeper : 超高速4P弾幕地獄シューティング
kknn.itch.io/spsw

3. Space Sweeper ゲームdemo (skipped)
• XBOX 360コントローラー x 4 Split Screen

4. 実況の視聴者がゲームに参加するとは？
• Twitchの視聴者が、 Twitch Extensionを操作して、
• 見ている最中のゲームにアイテムを送り込む

5. SpaceSweeper + Genvid + Twitch Extension
• Pay 2 Troll のデモ (skipped)

6. 構成図
video 1Mbps
Twitch extension
video
pixel + data
1Gbps
Game
game data
control
control
Twitch

7. 開発のパート、スケジュール
• Space Sweeper ゲーム (中嶋)
• すでにできているゲームにGenvid SDKを組み込み: 1ヶ月
• Twitch Extension (Aizawa)
• ショップ画面、アイテム配置UIの実装に2ヶ月
※他の作業もやりながらなので実質数日
※Web側UIの実装自体は数日だが、本番環境とTwitchサービスへのデプロイに時間がかかった

8. Twitch Extension

9. 開発手順
1.AWSにg2.xlargeマシンを1台確保する。
2.Genvid SDKをインストールする。(中嶋)
3.ゲームコードにSDKを組み込む。(中嶋)
4.Twitch ExtensionのJSコードを実装する。(Aizawa)
5.ローカルでテストする。(中嶋/Aizawa)
6.完成したものをGenvidチームに渡す
7.本番環境を稼働 (Genvid)

10. Parsec で開発環境を共有

11. ローカル開発環境
Parsec AMI instance
genvid
server
genvid
encoder
カメラ座標
ピクセル+音声サンプリングデータ
カメラ座標
put_item
映像

12. Twitch オーバーレイ

13. Twitch Extensionコード(600行)の概要
• script src=“genvid.min.js”
• genvidClient = genvid.createGenvidClient()
• genvidClient.onDraw( function(frame) {
setCamera(frame.gamedata.camera);
});
• canvas.addEventListener(“click”, (event) =>
{
request.send( {“command”:”put_item”,
“x”:x,”y”:y});
});

14. JSON
• ゲームサーバ>genvid>ブラウザ
• カメラ座標の更新
• {“type”:”camera”,”x”:1404,”y”:910,”width”:510,”height”:380}
• APを出現させる
• {“type”:”new_ap”,”x”:1300,”y”:771,”amount”:10}
• ブラウザ＞genvid>ゲームサーバ
• アイテムを置く
• {“gx”:44,”gy”:23,”item_type”:3303,”name”:”Nakajima”}

15. ゲームコードの概要 (追加分:200行)
•int main() {
gameInit();
genvidInit();
while(!done) {
gameUpdate();
gameRender();
genvidUpdate();
}
gameFinish();
genvidFinish();
}

16. genvidInit()
• Genvid_Initialize()
• Genvid_CreateStream()
• audio
• video
• gamedata
• Genvid_Subscribe( “put_item”, callbackFunc)
• Genvid_SetParameterInt()
• videostream, pixel format, width, height

17. genvidUpdate()
• glReadPixels(0, 0, w,h, GL_RGB,
GL_UNSIGNED_BYTE, 0);
• memcpy(g_pixels, ptr, pbo_size);
• GenvidTimecode tc =
Genvid_GetCurrentTimecode();
• gs = Genvid_SubmitVideoData(tc,
sStream_Video.c_str(), g_pixels,
sizeof(g_pixels));
• SubmitGameData()
• Genvid_CheckForEvents();

18. ビデオエンコードCPU負荷
• AWS g2.xlarge インスタンス
• ゲーム自体は1スレッド実装
• 1280x720 x 3bytes x 60frames x 8bit = 1.23Gbps
• OpenGLキャプチャとmemcpy、Genvid_SubmitVideoData全部でCPU負荷
が10~15%増加。 DirectXであれば10%以下
• genvid encoderプロセスはCPU20%~30%程度
• 送信される映像は1〜3Mbps

19. 「クラウドゲームをつくる技術」
2018年9月20日刊行
クラウドゲーミング(ゲームストリーミング)
の技術を体系的に整理し、
クラウドゲーム時代のビデオゲーム開発が
どう変化するかをコードのレベルまで
詳しく解説しています。