More Related Content Similar to インタラクティブ・ストリーミングが変えるゲームコンテンツの未来 (20) More from Takaaki Ichijo (20) 1. Copyright © 2019 - Genvid Technologies, Inc.
インタラクティブ・ストリーミングが変える
ゲームコンテンツの未来
2. 自己紹介：一條 貴彰
● 株式会社ヘッドハイ 代表取締役
○ 「ゲーム開発者向けのツールやサービスを広める」をやる会社
■ Play,Doujin! ディレクター
■ CRI ADX2 アンバサダー
■ Google Indie Games Festival ファシリテーター
■ Genvid Developer Relations ←今日の話
● 個人ゲーム開発活動
○ 「Back in 1995」(Switch/PS4/PS Vita/One/N3DS)
○ 「デモリッション ロボッツK.K.」←Genvid組み込み中
3. Copyright © 2019 - Genvid Technologies, Inc.
Genvidという会社について
ミッション
インタラクティブメディアの未来を推進
Genvid(ジェンビッド）の由来：
ラテン語の Gen: “birth”＋ Vid: “viewing”
創業チーム
Square Enix、Ubisoft 、AMDからのグローバルリーダー
(事業開発、クラウドゲーミング、
インフラエンジニアリングにフォーカス)
従業員数
40+
5. Copyright © 2019 - Genvid Technologies, Inc.
5
Media
Games Media
Interactive
Streaming
新たな領域が
「加わる」
6. Copyright © 2019 - Genvid Technologies, Inc.
エンターテイメントのギャップを埋める
フィジカルスポーツ
ゲーム
ゲームで遊ぶ
テレビ観戦スタジアムで観戦
ゲーム実況を観戦
プレミアムな
ゲーム視聴体験！
アメフトをする
空白
7. © 2018 Genvid Technologies Inc.
7
Genvidが提案する「ゲームコンテンツの未来」
＝インタラクティブ・ストリーミング
触ってインタラクション可能な動画視聴者用UIを動画にオーバーレイ
16. Genvidの実体は「サーバーミドルウェア」
● Genvid SDK = クラウドサーバー上で動かすソフトウェア群＋ 各エンジンSDK
■ PC版のゲーム (Genvid SDK入り)をサーバー上で動作
■ ゲームクライアント（プレイヤーが遊ぶ側のゲーム）は何のプラットフォームでもよい。
■ PC / PS4 / Switch / Xbox One / iOS / Android...
■ サーバー上のゲームと通信できればOK
動画プラットフォームは今後追加予定
ライムライト・ネットワークス社のCDNにも
対応予定
対応動画プラットフォーム
Azureは現在対応作業中、もうすぐ提供
対応クラウドサーバー
COMING SOON
対応ゲームエンジン
内製エンジン用ライブラリもあります
17. Copyright © 2019 - Genvid Technologies, Inc.
RTMP
WebSocket
Genvidシステム構成概念図
動画・音声描画用の
ゲーム本体を
サーバー上で実行
18. (現在の)Genvid SDKの役割
● 提供するもの：サーバーミドルウェア＋クライアント側SDK
○ ゲームとサーバーとウェブサイトの通信
○ サーバー上ゲームの動画キャプチャとTwitch / YouTubeへの送信
● 提供しないもの
○ ウェブサイトのログイン機能・ユーザー管理機能
○ 決済機能
■ TwitchならBits(Twitch内の仮想通貨）が使える
■ YouTubeなら、何らかの独自決済サービスの導入が開発者側で必要
■ 逆に言えば、課金モデルについてはお任せ
○ ウェブサイトのオーバーレイ描画システム
■ TwitchならTwitch Extensionsを使う
■ YouTubeなら、動画埋め込みを使う＋HTML5による画像・ボタンのオーバーレイ
19. Genvidのよくある誤解
● 動画配信プラットフォームではない
○ サーバーミドルウェアです
○ ゲーム開発者がSDKを組み込み、ウェブサイトを開発し、サーバーにデプロイして管理する
● ゲームプラットフォームではない
○ 配信元ゲームはPCでもクラウドゲームでもよい
○ 販売もSteamでも自社でもどこのストアでもよい
● クラウドゲームではない
○ クラウドゲームは1インスタンス：1プレイヤー
○ Genvidはあくまで動画ブロードキャスト、1インスタンス：多数の視聴者
● Twitch競合ではない
○ Twitchのオーバーレイシステム「Extensions」は、描画部分を担う仕組み
○ Twitch公式ブログでも、Genvidと一緒に使うことをおすすめされています
21. Copyright © 2019 - Genvid Technologies, Inc.
● SDKのダウンロード：無償
○ https://www.genvidtech.com/
● サポート：無償
○ 質問、バグ報告と修正依頼等
○ 機能追加などのカスタマイズは「プレミアムサポート」扱いとなり、別途ご相談
● Genvidを使用した動画コンテンツの利用料
○ 月間のユニークビューワー数 x 8円 + レベニューシェア（配信の収益から）
● Genvidとは別に開発で必要になりそうな費用
○ Genvidを動かすクラウドサーバーの利用料金
○ 課金がある場合は決済システム・ユーザー管理システム等の構築
○ マルチプレイがないゲームは、サーバー上のゲームインスタンスとクライアントとの通信
Genvid SDKを使うには
25. 「デモリッション ロボッツ K.K.」 実況動画視聴者の劇中設定
● 視聴者は「市民団体」の役割
○ 街の取り壊しに反対する
○ 妨害のために、危険なトラップを投下す
る（？？？）
○ 現時点ではウェブサイトのボタンを押すと
ゲーム側にロボットを止めるトラップ出現
28. (現在の)Genvid組み込みに必要な技術
● シェルの操作( CUI操作 )
○ Bashとかコマンドプロンプトとか
○ Genvid-SDKの起動、Pythonスクリプトの実行を行うぐらい
○ cdでPythonファイルがあるディレクトリまで移動できれば、あとは数行のコマンドのみ
○ genvidのサービスを起動すれば、あとはブラウザ上の管理画面で操作できる
● Pythonスクリプト実行
○ システムの設定読み込みやビルド時に使う
○ .pyファイルに色々定義してあるので、それらを呼べればよいだけ。数行。
● 視聴者用のウェブサイト構築（JavaScript APIを使うウェブサイト構築）
○ Genvidのjsモジュールを介してJavaScript API経由で通信
■ Web側のフレームワークは、genvid APIが使えるなら開発者の好みで何でもよい
○ Twitch Extensionsを使う場合は専用SDKを使った開発
29. Genvidサービスの構成
● Genvid-Bastion (Genvidスタック)
○ Genvidのシステムが動作するための基盤
○ 複数のサーバーミドルウェアで構成されている
● Cluster (Genvidクラスタ)
○ Genvidサービス
■ Leaf: ウェブサイトがゲームにアクセスするための WebSocketサーバーを提供
■ Disco: 上記のURLを提供するHTTP API
○ Genvid SDKが組み込まれたゲーム本体exe
○ ウェブサイトをホストするサーバー
○ 「Cluster-UI」という設定画面で管理できる
33. 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
○ ブラウザの設定画面を開く
例：Unity版における、サンプル実行のコマンド
何らかのシェルで以下のコマンドを打つ：
37. プロジェクトへの導入手順
1. ゲームの開発環境にGenvid SDKを導入する
○ UnityならGenvidのプレハブを配置
○ ゲームからどんなデータをウェブサイトへ送信するか設定
○ ウェブサイトからゲームへどんなデータを受け取り、利用するか設定
2. 動画視聴ウェブサイトの開発
○ ウェブアプリケーションの経験があるとよい
○ ない場合は、サンプルを改造する形で作っていく
3. ローカルテスト
○ １台のPC内でテストする
○ PC内でゲーム実行ファイル、サーバーバックエンド、ウェブサイトホスティングを起動する
4. 動画配信テスト
○ PC上から直接YouTubeに動画を配信する
5. クラウドサーバーにデプロイ
○ サーバーにシステム一式をデプロイし、YouTubeに動画を配信する
38. ウェブサイトとゲーム間の通信
● Command：
○ ウェブサイトからGenvidシステム上のゲームへデータを送信
● Event：
○ ウェブサイトからGenvidシステム上のゲームへ「まとめたデータ」を送信
■ 視聴者がボタンを押した回数毎に処理が走ると、視聴者が増えた時に負荷が膨大に
■ 例えば、無数の視聴者がプレイヤーへ「いいね」ボタンを押しているとき、
プレイヤーごとの「いいね」合計値に変換してからゲームにデータを渡す
● Stream：
○ ビデオ・音声をゲームから配信する
○ ゲームからデータを配信する
■ 座標データ（ゲーム内看板、プレイヤーの位置に合わせたオーバーレイ表示）
■ 点数などの文字データ
■ 基本的にシーン内にGenvid Video / Genvid Audioのコンポーネントを置くだけ
43. Genvid Eventsコンポーネントからのイベントを受けるUnity C#例
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;
}
}
45. 例：SDKサンプルのウェブサイト構造
● Index.html + style.css
○ ボタンや文字などのウェブサイト部分を定義
● unity.ts
○ Genvidと通信する際のインターフェイスや、コールバックを定義する
○ ウェブサイトとGenvidサービスがどのような通信を行うかはこの中に記述
● genvid.d.ts
○ unity.tsが呼び出すライブラリ。基本、開発者は触らない。
● 様々な描画用jsモジュール
○ Node.js, jQuery, Bootstrap, AngularJs…..
○ サンプルがこうなっているだけで、ウェブサイトの描画・通信モジュールは何を使ってもよい
○ GenvidのJavaScript APIを呼べればOK
46. ウェブサイト側の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 });
}
}
47. ３つ設定が終わったらビルド！
● 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
48. Unityの場合：Editorで実行
● Genvid Window Jobsリスト
○ 「services」と「web」を起動
○ 「unity」(ゲーム)は起動しない
● Unity EditorのPlayボタンを押す
● Genvid Window Linksリスト
○ ウェブサイトのリンクが「Open Link」に代わる
ので、クリックしてブラウザを開く
50. 今後のロードマップ
● Unreal Engine 4用デモプロジェクト
○ 実際のゲームに近い実装例＋ウェブサイト事例のキット
● Genvid基盤のBaaS(Backend as a service)化
○ 自分でサーバーを立ち上げずに使える、バックエンドサービス化
○ 2020年初頭ごろ予定
● Genvidを通じた配信を一般プレイヤーが可能に（ローカルGenvid）
○ クラウドサーバーを経由せず、ローカルから配信するシステム
○ OBSプラグインの提供予定
○ 2020年春ごろ予定
● 動画サービス連携の増強
○ 対応動画サービス順次拡大予定。
○ Twitch Extensionsがもしスマホ対応したら、スマホでオーバーレイが可能に
51. Copyright © 2019 - Genvid Technologies, Inc.
〒151-0051 東京都渋谷区千駄ヶ谷5-27-3 やまとビル8階
（新宿駅新南口 高島屋横）
代表取締役 Chris Cataldi
ビジネス・ディレクター ジョンソン 裕子
ビジネス・デベロップメント 伊藤 宗寿
シニア・サポート・デベロッパー 鈴木 和夫
デベロッパー・リレーションズ 一條 貴彰
日本語でのサポートが可能です。ドキュメントも日本語のご用意がございます。
https://www.genvidtech.com/doc/jp/SDK-1.20.0/
日本での展開について
■東京オフィスオープン
日本メンバー：4名（2019年8月現在）
56. Copyright © 2019 - Genvid Technologies, Inc.
● 今日、開発者はプレイヤーからのみマネタイズしています
● Esportsが視聴者から収益化しようとする試みの第一陣です
● 開発者はGenvidのようなツールを使うことで
その成長をブーストすることができます
56
インタラクティブ・メディアの登場によりゲーム市場のサイズは倍に
Data courtesy
SuperData, a Nielsen Company
世界のゲーム／
インタラクティブ・メディア
市場
インタラクティブ・メディア
• VR, AR, MR
• ゲーム実況などのVODコンテン
ツ
• eSports
デジタルゲーム
57. 1 day
4 days
10 days
Basic Engine Porting
Game Data Configuration
and Streaming
Viewer Website Creation
Genvid Client Interactive Viewer Website
Game Development Team Web Development Team
インティグレーションにかかる時間の例
58. サンプルで使っているウェブサイトのモジュール解説
● Node.js
○ サーバーサイドJavaScript実行環境
● Express
○ Node.js のためのWebフレームワーク
○ REST APIの生成
● jQuery
○ Webサイトフロントエンド用JavaScriptライブラリ。Bootstrapはこれに依存
● Bootstrap
○ フロントエンドWebアプリケーションフレームワーク
● AngularJs
○ ユーザの入力をサーバに送ったりする部分を作るフレームワーク
● Webpack（ビルド時）
○ Node.jsでサーバーサイドで動かすモジュールバンドラーツール
○ いろんなjsファイルを 1 つの js ファイルにバンドルできる
62. Copyright © 2019 - Genvid Technologies, Inc. Genvid Technologies Inc.
US Parent Company Genvid Technologies Canada Inc. Genvid Technologies Japan KK
Genvidチーム
