【Unite Tokyo 2019】ライブ・ストリーミングに参加せよ！Genvidが変える動画視聴体験

ライブ・ストリーミングに参加せよ！Genvid が変える動画視聴体験 Copyright © 2019 - Genvid Technologies, Inc.

自己紹介：一條 貴彰 ● 株式会社ヘッドハイ 代表取締役 ○ 「ゲーム開発者向けのツールやサービスを広める」をやる会社 ■ Play,Doujin! ディレクター ■ CRI ADX2 アンバサダー ■ Genvid Developer Relations ←今日の話 ● 個人ゲーム開発活動 ○ ○ ○ 「Back in 1995」(Switch/PS4/PS Vita/One/N3DS) 「デモリッション ロボッツK.K.」 書籍執筆 ボーンデジタル 「Unityサウンド エキスパート養成講座」

Genvidとは

Genvidという会社について ミッション インタラクティブメディアの未来を推進 Genvid(ジェンビッド）の由来： ラテン語の Gen: “birth”＋ Vid: “viewing” 創業チーム Square Enix、Ubisoft 、AMDからのグローバルリーダー (事業開発、クラウドゲーミング、 インフラエンジニアリングにフォーカス) 従業員数 40+ Copyright © 2019 - Genvid Technologies, Inc.

日本での展開について 東京オフィスオープン 東京都渋谷区千駄ヶ谷5-27-3 やまとビル8階 （新宿駅新南口 高島屋横） 代表取締役 Chris Cataldi 〒151-0051 日本メンバー：4名（2019年8月現在） ビジネス・ディレクター ジョンソン 裕子 ビジネス・デベロップメント 伊藤 宗寿 シニア・サポート・デベロッパー 鈴木 和夫 デベロッパー・リレーションズ 一條 貴彰 日本語でのサポートが可能です。ドキュメントも日本語のご用意がございます。 https://www.genvidtech.com/doc/jp/SDK-1.20.0/ Copyright © 2019 - Genvid Technologies, Inc.

• https://www.genvidtech.com/doc/jp/SDK-1.12.0/

Vision Interactive Streaming Games Copyright © 2019 - Genvid Technologies, Inc. Media Media 6

エンターテイメントのギャップを埋める フィジカルスポーツ アメフトをする ゲーム スタジアムで観戦 テレビ観戦 空白 ゲームで遊ぶ Copyright © 2019 - Genvid Technologies, Inc. プレミアムな ゲーム視聴体験！ ゲーム実況を観戦

Genvidが提案する「プレミアムな視聴体験」 ＝インタラクティブ・ストリーミング 視聴者用UIを動画にオーバーレイ © 2018 Genvid Technologies Inc. 触ってインタラクション可能な動画 8

インタラクティブ・ストリーミングの新しい楽しさ ● 視聴者の盛り上がりの可視化・関与を可能に ○ 「選手の応援」による、盛り上がりの可視化（従来の動画コメントでは流れてしまう） ■ 選手/チームに「応援されてる」エフェクトを出す ● 試合の理解がより深まるデータ表示 ○ ○ ○ FPSにおける視聴者専用のミニマップ（試合展開の理解） スコア表、トーナメント表などの試合データ MOBA系ゲームにおける、ユニット性能の詳細表示 ● 選手・実況者と視聴者がつながる ○ ○ 応援ありがとう！アイテムありがとう！ 古代コロッセオの石投げ行為みたいなもの ■ ゲームに少しだけ関わる ■ プレイヤー・ゲーム環境に影響をもたらす

「プレミアムな視聴体験」がクリエイターにもたらすもの ● 「ゲームを動画視聴で楽しむ」ことを推奨する、発想の転換 ○ ○ 動画視聴者も、ゲームコンテンツを楽しんでいる顧客だと再定義する インタラクティブ・ストリーミングによって新たな価値を提供し、マネタイズする ● 動画の視聴者から、ゲーム開発者へお金が入る ○ ○ ○ 視聴プレミアムチケット販売 選手を応援する際の都度課金 単なる投げ銭ではない、ゲーム内への関与権を販売 ■ アイテムを投げ入れる ■ 次の対戦ステージを投票で決める ■ 「魅せプレイ」に得点を入れる etc….

Genvidが担う機能

インタラクティブ・ストリーミングに必要なシステム ● ストリーミング動画上に画像や文字をオーバーレイ描画 ○ ○ TwitchならTwich Extensions YouTubeなら動画を埋め込んだウェブサイト ● サーバー処理 ○ ○ ○ ゲームをサーバー上で動作させ、動画キャプチャしてTwitch/YouTubeに送る ウェブサイトからの入力を受け取ってゲーム本体に渡す ゲーム本体からの情報をウェブサイトに渡す Genvidはこの範囲を担当 ● ゲーム本体（PC、コンソールで動作） ○ ○ ウェブサイトに表示するデータをサーバーに送信する サーバーがウェブサイトから収集したデータを受け取る ● その他 ○ ○ 決済システム ユーザー管理（ログイン）

Genvidの実体は「サーバーミドルウェア」 ● Genvid SDK = クラウドサーバー上で動かすソフトウェア群＋ Unity SDK ○ ○ 動画インフラ、クラウドサーバーは選べる ■ ゲーム開発者がクラウドサーバーを用意して動作させる クラウドサーバー上で動画と音声をキャプチャしてストリームする ■ PC版のゲーム実行ファイルをサーバー上で動作させる ■ ゲームクライアント（プレイヤーが遊ぶもの）は何のプラットフォームでもよい。 PC /PS4 / Switch / モバイル... 対応動画プラットフォーム 対応クラウドサーバー COMING SOON 動画プラットフォームは今後追加予定 ライムライト・ネットワークス社のCDNにも 対応予定 Azureは現在対応作業中、もうすぐ提供

Genvidシステム構成概念図 RTMP 動画・音声描画用の ゲーム本体をサーバ ー上で実行 WebSocket Copyright © 2019 - Genvid Technologies, Inc.

Genvidのよくある誤解 ● 動画配信プラットフォームではない ○ ○ サーバーミドルウェアです ゲーム開発者がSDKを組み込み、ウェブサイトを開発し、サーバーにデプロイして管理する ● ゲームプラットフォームではない ○ ○ 配信元ゲームはPCでもクラウドゲームでもよい 販売もSteamでも自社でもどこのストアでもよい ● クラウドゲームではない ○ ○ クラウドゲームは1インスタンス：1プレイヤー Genvidはあくまで動画ブロードキャスト、1インスタンス：多数の視聴者 ● Twitch競合ではない ○ ○ Twitchのオーバーレイシステム「Extensions」は、描画部分を担う仕組み Twitch公式ブログでも、Genvidと一緒に使うことをおすすめされています

(現在の)Genvid SDKの役割 ● 提供するもの ○ ○ ゲームとサーバーとウェブサイトの通信 サーバー上ゲームの動画キャプチャとTwitch / YouTubeへの送信 ● 提供しないもの ○ ○ ○ ウェブサイトのログイン機能・ユーザー管理機能 決済機能 ■ TwitchならBits(Twitch内の仮想通貨）が使える ■ YouTubeなら、何らかの独自決済サービスの導入が開発者側で必要 ■ 逆に言えば、課金モデルについてはお任せ ウェブサイトのオーバーレイ描画システム ■ TwitchならTwitch Extensionsを使う ■ YouTubeなら、動画埋め込みを使う＋HTML5による画像・ボタンのオーバーレイ

Genvid SDKを使うには ● SDKのダウンロード：無償 ○ https://www.genvidtech.com/ ● サポート：無償 ○ ○ 質問、バグ報告と修正依頼等 機能追加などのカスタマイズは「プレミアムサポート」扱いとなり、別途ご相談 ● Genvidを使用した動画コンテンツの利用料 ○ 月間のユニークビューワー数 x 8円 + レベニューシェア（配信の収益から） ● 別途必要になりそうな費用 ○ ○ ○ Genvidを動かすクラウドサーバーの利用料金 課金がある場合の決済システム、ユーザー管理システム等の利用料金 マルチプレイがないゲームは、サーバー上のゲームインスタンスとクライアントとの通信 Copyright © 2019 - Genvid Technologies, Inc.

• https://www.genvidtech.com/

Genvidは「検証済みソリューションパートナー」です ● ゲーム開発において非常に役立つ！と Unityから認められたサービスのこと ○ Unityの最新リリースに準拠 ○ UnityがSDKなどを検証 ○ Unityによる開発者支援

開発中のゲーム「デモリッション ロボッツ K.K.」への導入について ● 4人対戦ロボットゲーム ○ ○ プレイヤーは建築物の破壊業者。ロボットで街を更地にする！ ビルを多く破壊した人が勝ち

「デモリッション ロボッツ K.K.」 実況動画視聴者の劇中設定 ● 視聴者は「市民団体」の役割 ○ ○ ○ ビルの取り壊しに反対する 妨害のために、危険なトラップを投下す る（？？？） 現時点ではウェブサイトのボタンを押すと ゲーム側にロボットを止めるトラップ出現

デモ

Genvid サンプルプログラムの実行手順

(現在の)Genvid組み込みに必要な技術 ● シェルの操作( CUI操作 ) ○ ○ ○ ○ Bashとかコマンドプロンプトとか Genvid-SDKの起動、Pythonスクリプトの実行を行うぐらい cdでPythonファイルがあるディレクトリまで移動できれば、あとは数行のコマンドのみ genvidのサービスを起動すれば、あとはブラウザ上の管理画面で操作できる ● Pythonスクリプト実行 ○ ○ システムの設定読み込みやビルド時に使う .pyファイルに色々定義してあるので、それらを呼べればよいだけ。数行。 ● 視聴者用のウェブサイト構築（JavaScript APIを使うウェブサイト構築） ○ ○ Genvidのjsモジュールを介してJavaScript API経由で通信 ■ Web側のフレームワークは、genvid APIが使えるなら開発者の好みで何でもよい Twitch Extensionsを使う場合は専用SDKを使った開発

まず「ローカルテスト」をやってみる ● Genvidはサーバーを用意しなくてもテストできる ○ PC1台で挙動を確認できる ○ AWSとかAzureを会社で用意してもらうのって意外と面倒...。 ● クラウドサーバーを使わず、PC上でGenvidのシステム一式をテスト実行する ○ ローカルテストで起動するもの ○ ゲーム本体（ゲーム描画・ビデオキャプチャ） ○ Genvidのサービス ○ 動画視聴ウェブサイトのホスティング

Genvidサービスの構成 ● Genvid-Bastion (Genvidスタック) ○ ○ Genvidのシステムが動作するための基盤 複数のサーバーミドルウェアで構成されている ● Cluster (Genvidクラスタ) ○ ○ ○ ○ Genvidサービス ■ Leaf: ウェブサイトがゲームにアクセスするための WebSocketサーバーを提供 ■ Disco: 上記のURLを提供するHTTP API Genvid SDKが組み込まれたゲーム本体exe ウェブサイトをホストするサーバー 「Cluster-UI」という設定画面で管理できる

Unityサンプルを使った「ローカルテスト」の実行手順 1. 開発者アカウントを作ってSDKをインストール a. https://www.genvidtech.com/ （アセットストアでもダウンロードできるが、Verが古い） b. 日本語マニュアル https://www.genvidtech.com/doc/jp/SDK-1.12.0/ c. マニュアル「ローカル環境の使用方法」を参考にセットアップhttps://www.genvidtech.com/doc/jp/SDK1.12.0/quicktour/utilisation.html#local-environment-usage d. ゲーム本体、ウェブサイトのビルド（Pythonコマンド) 2. Genvid-Bastionの初期化と実行（CUIコマンド) 3. Genvidの設定画面（Cluster-UI）からサービスを起動する

• https://www.genvidtech.com/
• https://www.genvidtech.com/doc/jp/SDK-1.12.0/
• https://www.genvidtech.com/doc/jp/SDK-1.12.0/quicktour/utilisation.html#local-environment-usage

Unityサンプル実行のコマンド 何らかのシェルで以下のコマンドを打つ： 1. cd /c/ [genvid sdk install directory] / samples / unity ○ サンプルのunity.pyファイルがあるディレクトリまで移動 2. py uniy.py load ○ bastionに各種設定をロードする 3. py unity.py build ○ サンプルのビルド 4. genvid-bastion load-config-sdk ○ SDKのデフォルト設定を読み込む 5. genvid-bastion start ○ Genvidのサービスを開始 6. genvid-bastion monitor ○ ブラウザの設定画面を開く

ブラウザのGenvid設定画面(Cluster-UI)の操作 ● Jobsタブで「Start All」ボタンを押す ● 3つとも起動したら「Tutorial Demo」をクリックする ○ ローカルサーバー上に立ててあるウェブサイトにアクセス

Unityサンプルの内容 ● 3つのキューブがころがるだけ ○ ○ ○ ○ カメラの切り替え キューブの色の切り替え ゲーム内オブジェクト位置のウェブ サイト側での取得 応援ボタン

ローカルテストは3窓使う！ ブラウザでウェブサイトの挙動 をテストしつつ Genvidサービスの挙動を Cluster-UIでモニタリング Unity実行ファイルに ウェブサイトからの入力が来てい る様子を見ながら

Unityプロジェクトへの導入

Unityプロジェクトへの導入手順 1. UnityプロジェクトへGenvid SDKを組み込む ○ ○ ○ Genvidのプレハブを配置 ゲームからどんなデータをウェブサイトへ送信するか設定 ウェブサイトからゲームへどんなデータを受け取り、利用するか設定 2. 動画視聴ウェブサイトの開発 ○ ○ ウェブアプリケーションの経験があるとよい ない場合は、サンプルを改造する形で作っていく 3. ローカルテスト ○ ○ １台のPC内でテストする PC内でゲーム実行ファイル、サーバーバックエンド、ウェブサイトホスティングを起動する 4. 動画配信テスト ○ PC上から直接YouTubeに動画を配信する 5. クラウドサーバーにデプロイ ○ サーバーにシステム一式をデプロイし、YouTubeに動画を配信する

ウェブサイトとゲーム間の通信 ● Command： ○ ウェブサイトからGenvidシステム上のゲームへデータを送信 ● Event： ○ ウェブサイトからGenvidシステム上のゲームへ「まとめたデータ」を送信 ■ 視聴者がボタンを押した回数毎に処理が走ると、視聴者が増えた時に負荷が膨大に ■ 例えば、無数の視聴者がプレイヤーに対して「いいね」ボタンを押しているとき、プレイヤーごとの「いいね 」合計値に変換してからゲームにデータを渡す ● Stream： ○ ○ ■ ビデオ・音声をゲームから配信する ゲームからデータを配信する ■ 座標データ（ゲーム内看板、プレイヤーの位置に合わせたオーバーレイ表示） ■ 点数などの文字データ 基本的にシーン内にGenvid Video / Genvid Audioのコンポーネントを置くだけ

例：ウェブサイト上に「ゲーム内へアイテムを投下」ボタンを作る 1) GenvidサーバーのEvent設定で「アイテム投下」通信を定義 a) json形式で設定、サンプルでは config/events.jsonにある b) Bastion起動後なら、ブラウザ上の設定画面から変更できる 2) Unity Editor内で 「アイテム投下」通信が来た時の挙動を定義 a) Genvid Eventコンポーネントで設定 b) イベントを受け取った時の動作を作る 3) ウェブサイトで 「アイテム投下」の通信を送信するボタンを定義 a) Unity.tsファイル（ウエブサイト側のロジック）内で設定 b) Genvid JavaScript APIを使って、ウェブサイト上でボタンを押したときにイベントを投げる

①GenvidサーバーのEventコンフィグで定義 ● Genvidの設定画面「Cluster-UI」を開く： ○ ○ コマンド Genvid-SDK monitorを開く タブEvent Setting ● サンプルの例： ○ ○ イベントtrapを定義 ○ 値として数値型のtrapIdを持つ 多数の視聴者から大量にデータが届いた場合の処理を定義 ○ Maps ステップでkey:valueの変換 ○ Reducutionsステップで一致するkey:valueをマージ

②Unity Editor内でEventの定義 ● まずGenvidのPrefabを置く ○ GenvidSessionManager

Eventコンポーネントでゲーム内処理を紐づけ Genvid Eventsオブジェクトのインスペクターにイベントを追加 このイベント名がトリガされたら、ゲームが何の処理を実行するか紐づけ

Genvid Eventsコンポーネントからのイベントを受けるスクリプト
using System;
using GenvidSDKCSharp;
using UnityEngine;
using UnityEngine.UI;
public class DRKKGenvidEvents : MonoBehaviour
{
public Text debugText;
public void OnSetTrap (string eventId, GenvidSDK.EventResult[] results, int numResult, IntPtr userData)
{
float trapId = (float)results[0].values[0].value;
debugText.text += "event name: "+ eventId + " id: "+ trapId;
}
}

③ウェブサイトでボタンの定義 例：Bootstrapを使ったボタンの描画 <div class="mapButtonContainer"> <button id=‘SetTrap1’>トラップ設置！</button> </div>

SDKサンプルのウェブサイト構造 ● Index.html + style.css ○ ボタンや文字などのウェブサイト部分を定義 ● unity.ts ○ ○ Genvidと通信する際のインターフェイスや、コールバックを定義する ウェブサイトとGenvidサービスがどのような通信を行うかはこの中に記述 ● genvid.d.ts ○ unity.tsが呼び出すライブラリ。基本、開発者は触らない。 ● 様々な描画用jsモジュール ○ ○ ○ Node.js, jQuery, Bootstrap, AngularJs….. これらのウェブサイトの描画・通信モジュールは開発者の好みで何を使ってもよい GenvidのJavaScript APIを呼べればOK

JavaScript APIの呼び出しとボタンとの紐づけ
import * as genvid from "genvid";
export class UnityController {
client: genvid.IGenvidClient;
private on_video_player_ready(_elem: HTMLElement) {
let mapButton = <HTMLButtonElement>document.querySelector("#SetTrap1");
mapButton.addEventListener("click", (_event) => { this.onSetTrap(1); });
}
private onSetTrap(trapId:number) {
this.client.sendEventObject({ trap: trapId });
}
}

３つ設定が終わったらビルド！ ● Unity実行ファイルとウェブサイトを同時にビルドする ○ ○ コマンド py unity.py build で実行 Unityプロジェクトのビルド＋webpackを使った各種ファイルからのjs生成 ■ ウェブサイトのみのビルドコマンドもある ■ Genvid-Bastionが停止してからビルドするべし ● Unity実行ファイルのパス設定 ○ Game.hcl内の path = "{{env `PROJECTDIR` | js}}¥¥app¥¥[ここにアプリ名].exe" ● ビルド使用するUnityバージョンを指定する ○ ○ 以下のレジストリ設定を変更 HKEY_CURRENT_USER¥Software¥Unity Technologies¥Installer¥Unity

エディタで実行 ● Jobsリストの ○ ○ 「services」と「web」を起動 「unity」(ゲーム)は起動しない ● Unity EditorのPlayボタンを押す ● Linksリストの ○ ウェブサイトのリンクが「Open Link」に代わる ので、クリックしてブラウザを開く

まとめ

Genvidの思想とターゲット ● 大規模な相互通信を前提とした、 クラウドベースのレンダリング/ストリーミングシステム ○ ○ ○ ゲームディベロッパー、もしくは大会主催者が利用するもの 一般ストリーマーが使うソフトウェアではない ただし、Genvidも「ローカルGenvid」という名前でサポートする予定 (OBS plugin, etc.) ● ゲームディベロッパーがサーバーを立てて運用する ○ ○ 例：「オフィシャル大会」での利用 例：通常ゲームとは別の「Genvid版」のリリースと運用 ■ 毎週土曜日にストリーマーが配信するゲームに視聴者が参加する、など ■ 私のゲームもこの方式の予定

未来に向けて ● Genvid基盤のBaaS(Backend as a service)化 ○ ○ 自分でクラウドサーバーを立ち上げずに使える 2020年初頭ごろ予定 ● Genvidを通じた配信を一般プレイヤーが可能に（ローカルGenvid） ○ ○ ○ 現在はサーバーでゲームを動作させることが必要＝サーバー費用、管理コストがかかる 2020年春ぐらい予定 OBSプラグインの提供予定 ● 動画サービス連携の増強 ○ ○ ○ ○ Mixer対応予定。その他の国内サービスも順次 TwitchのStreamer Toolsをサポート Twitch Extensionsがもしスマホ対応したら、スマホでオーバーレイが可能に YouTubeがオーバーレイ描画できるようになったらすぐ対応

最後に：Genvidは未来志向 ● インタラクティブ・ストリーミング市場は今後成長する ○ ○ すでに大手スタジオのゲームでは、似た機能を独自開発してたりする ○ Twitchとゲームの連携、カメラ切り替えなど Genvidには3年先行のノウハウがある ○ 誰でもインタラクティブ・ストリーミングの実装に挑戦できる ● Genvidが普通のミドルウェアと違うところ ○ ○ ○ 市場が成立したからできたミドルウェアではなく、これからできる市場向け Free to Play (基本無料・アイテム課金）の登場と同じぐらいのインパクトを持つ すでに誰でも触ることができるSDKがある、この競争にスタジオの規模関係なく参入できる ■ インディーゲームクリエイターが大きく成長できるチャンスでもある ■ Genvidはインディー発のクレイジーな使い方を待ってます！

Thank you! genvidtech.com @genvidtech