「デモリッションロボッツK.K.」のGenvidインティグレート事例

Copyright © 2019 - Genvid Technologies, Inc.
デモリッションロボッツK.K.の
Genvidインティグレート

一條貴彰
● １人ゲーム開発者
● 株式会社ヘッドハイ　代表
● IndieGamesJp.dev運営
○ https://indiegamesjp.dev/
● 趣味
○ 国産クラフトビール大好き
○ NEIPA最高、最近はセゾンがうまい
○ 80’s New Wave音源の収集

前の作品:
Back in 1995
● たぶん世界初のPS1風テーマゲーム
○ 2016年４月発売
○ Nintendo Switch, PS4, PS Vita, Xbox
One, Steam, N3DS
● Unite 2016 Tokyo で紹介

略称　DRKK

メイン画面（開発中）

開発環境
● 開発メンバー
○ フルタイム：私（ゲームデザイン、プログラム等）
○ パートタイム：CGデザイナー２名、コンポーザー１名
● Unityバージョン: 2018.4.20f1
● ライブラリ・ミドルウェア
○ Genvid: インタラクティブストリーミング
○ CRI ADX2: サウンドスクリプトの削減、インタラクティブ
ミュージック
○ UniRx / UniTask

デモ

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

RTMP
WebSocket
Genvidシステム構成概念図（オンラインマルチがあるゲームの場合）
動画・音声描画用
のゲーム本体を
サーバー上で実行

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

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

Genvid機能実装の流れ
● 「GenvidTanks Sample」を試す
○ どうやってUnityと動いているのか学ぶ
● DRKK Demo 0.5 (Unite 2019 Tokyo）
○ サンプルのWeb側コードをコピペしたもの
○ ブラウザ側には１個ボタンがあるだけ
● DRKK Demo 1.0 （GDC 2020）
○ GDC 2020用のデモ
○ Web側はGenvidチームと開発

GenvidTanks Sample: Asset Storeの無料サンプル
https://assetstore.unity.com/packages/tools/utilities/genvidtanks-sample-161598

動画オーバーレイを
「デモリッションロボッツ K.K.」に組み込む
● プレイヤーを助ける
○ 応援を送る
○ 応援はロボのエネルギーとなり、必殺技
が使えるようになる
● プレイヤーを邪魔する
○ トラップを投下する
○ 誰がトラップを落としたか、ゲーム内で見
ることができる

接続概念図（ローカルマルチのゲームの場合）
※本作では
Photon,PlayFabを
使っていますが、
通信ミドルウェアや
BaaSには指定はあり
ません。
※本作はローカルマル
チゲームですが、プレイ
ヤー側がネットワークマ
ルチプレイでも問題なく
使えます。

ネットワークマルチの有無によるGenvid実装の違い
● ネットワークマルチプレイあり
○ ４人マルチだったら「観戦モード」として５人目が入れるようにしておく
○ 観戦モードのゲームを Genvidサーバー上で動かす
○ 実装は比較的楽
● ネットワークマルチプレイなし（DRKKの場合）
○ プレイヤー側のゲームとサーバー上のゲームを同期する通信を新規に作る
■ プレイヤー側のゲーム状況を一方通行でサーバーへ送って「観戦モード」とする
■ Genvidから来る視聴者の操作情報をプレイヤー側へ渡す

DRKK: Photon Cloudで「観戦モード」を実装
● プレイヤー側のゲームからGenvid Server上のゲームへ送信
○ プレイヤーキャラの位置
○ アイテムの位置
○ 点数
○ ステージやプレイヤーキャラのロボットの種類
○ ゲームの開始・終了
○ どのビルが破壊されたか
● Genvid Server上のゲームからプレイヤー側ゲームへ送信
○ トラップ投下
○ 応援

ゲームとTwitch（ブラウザ）側との接続
● Genvid Event: Twitchオーバーレイから送信されてくるデータ
○ 視聴者によるボタン操作
○ Twitch IDの送信
○ Genvidシステムは大量のEventを小さくまとめてゲーム側へ渡してくれる
● Genvid Stream: ゲームからTwitchオーバーレイへ送信するデータ
○ プレイヤーのゲーム内の XY座標
○ 現在のステージのオブジェクトの位置
○ どのビルが破壊されたかの通知

Genvid関連のスクリプトを別シーン化

エディタ内でオーバーレイ挙動を
エミュレートする機能を開発
● どんな表現をしたいか確認する
○ イテレーションの高速化
○ オーバーレイ挙動の説明に役立つ
（Genvid機能ではなく、開発者が用意）

EventとStreamのインターフェースを用意
public interface IGenvidDRKKStreams
{
void SetPlayersName(Dictionary<int, string> playerNoNameDict);
void OnUpdatePlayerScreenPos(int playerNo, Vector2 screenPosition);
void OnUpdateBuildingsData(List<Tuple<int, Rect>> buildPosRect);
void OnUpdateBuildingsStateArray(int[] buildingsStateArray);
void OnStageEnd(int winnerPlayerNo);
void OnSpAttackEnd(int playerNo);
}
public interface IGenvidDRKKEvents
{
IObservable<GenvidTrapEventData> OnSetTrapObservable { get; }
IObservable<Tuple<int, float>> OnCheerObservable { get; }
}

DRKKがブロードキャストするデータ①
● プレイヤー情報
○ XY位置
○ 30fpsで毎フレーム送信
○ 「ロックオンマーカー」表示に使う

プレイヤー位置のブロードキャスト
private PlayerGenvidStreamData[] playerGenvidStreamDataArray = new PlayerGenvidStreamData[4];
public void OnUpdatePlayerScreenPos(int playerNo, Vector2 screenPosition)
{
playerGenvidStreamDataArray[playerNo-1].posX = screenPosition.x /Screen.width;
playerGenvidStreamDataArray[playerNo-1].posY = screenPosition.y/ Screen.height;
}
public void SubmitPlayerData(string streamId)
{
if (GenvidSessionManager.IsInitialized)
{
genvidStreamData.players = playerGenvidStreamDataArray;
genvidStreamData.screenResX = Screen.width;
genvidStreamData.screenResY = Screen.height;
GenvidSessionManager.Instance.Session.Streams.SubmitGameData(streamId, genvidStreamData);
}
}

Genvid Streamsオブジェクトに処理を紐付け

DRKKがブロードキャストするデータ②
● ビルに関するデータ
○ ビルがまだあるか、破壊されたか
○ 1000 msに一回送信
○ 位置情報
○ 視聴者の名前リスト

ビルの状態をブロードキャストする
public void OnUpdateBuildingsStateArray(int[] buildingsStateArray)
{
genvidBuildingsStatusAnnotation.buildings = buildingsStateArray;
if (GenvidSessionManager.IsInitialized)
{
GenvidSessionManager.Instance.Session.Streams
.SubmitAnnotation("BuildingsStatus", genvidBuildingsStatusAnnotation);
}
}
このスクリプトもGenvid Streamsオブジェクトのインスペクターで紐づける

ブラウザから受信するデータ①
● ボタンイベント（応援）
○ Genvidシステムは沢山のブラウザか
ら飛んでくるイベントのデータをマー
ジしてくれる
○ ボタンイベントをカウント
○ 応援はロボのエネルギーとなり、プレ
イヤーは必殺を放てる。

応援イベントを受け取る処理
public void OnCheer (string eventId, GenvidSDK.EventResult[] results, int numResult,
IntPtr userData)
{
int playerNo = 0;
Int32.TryParse(results[0].key.fields[0],out playerNo);
float cheerAmount = (float)results[0].values[0].value;
Debug.Log("Genvid cheer events received playerNo: "
+ playerNo +" num:"+cheerAmount);
onCheerSubject.OnNext(new Tuple<int, float>(playerNo, cheerAmount));
}

Genvid Eventsオブジェクトに処理を紐づけ

ブラウザから受信するデータ②
トラップの投下
○ Twitch ID
○ ターゲットのプレイヤーの番号
○ トラップの種類

トラップ投下イベントを受け取る処理
public void OnSetTrap (string eventId, GenvidSDK.EventResult[] results, int numResult,
IntPtr userData)
{
genvidTrapEventData.senderTwitchId = results[0].key.fields[0];
var selectedPlayerNumberStr = results[0].key.fields[1];
TryParse(selectedPlayerNumberStr,out int selectedPlayerNumber);
genvidTrapEventData.selectedPlayerNumber = selectedPlayerNumber;
genvidTrapEventData.trapType = results[0].key.fields[2];
Debug.Log("event: " + eventId +
" TwitchId: " + genvidTrapEventData.senderTwitchId +
" trapType:" + genvidTrapEventData.trapType +
" selectedPlayerNo: "+ genvidTrapEventData.selectedPlayerNumber);
onSetTrapSubject.OnNext(genvidTrapEventData);
}

その他の通信
● プレイヤーが必殺技を使い終わったことの通知
○ 応援が再び可能になる
● 1試合が終わったことを通知
○ ビルの位置をリセットする

おまけ：CRI ADX2連携
Audio Modeを「WASAPI」にする

インディークリエイターへのおすすめ
● web技術に詳しい人を見つける
○ オーバーレイ部分は Unityとかなり違うので、誰かと協業する
○ HTML5もできますという人は最強 ...
● Asset StoreのGenvidTank Sampleをよく研究する
○ Unity + Genvidでできることがまとまっている
● Unityエディタ内でオーバーレイ挙動のエミュレートを作る
○ イテレーションを高速化
○ オーバーレイの挙動を web側開発者に素早く伝える

インタラクティブストリーミングを導入する理由
○ プレイヤーと動画視聴者が一緒になって楽しめる新しい形
○ 視聴者の関与はゲームに予測不可能なおもしろさを与え、プレイヤーにとっても
ゲームが楽しくなる。（凄いＡＩがいるみたいな）
○ 動画視聴者がゲームコンテンツに関与する手段がより広がる
■ 見るだけではなく、ちょっとだけ参加
○ ゲームコンテンツのファンを大きく広げることができる
■ プレイヤーだけがあなたのファンではない、という発想の転換
○ 動画視聴をマネタイズできる
■ 動画が盛り上がっても開発者にお金がいかない問題の解決

2020 Q4発売予定

genvidtech.com
@genvidtech
Thank you!

「デモリッションロボッツK.K.」のGenvidインティグレート事例

More Related Content

What's hot

Similar to 「デモリッションロボッツK.K.」のGenvidインティグレート事例

More from Takaaki Ichijo

Recently uploaded

「デモリッションロボッツK.K.」のGenvidインティグレート事例