視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法【UNREAL FEST EXTREME 2020 WINTER】
1.1K Views
November 17, 20
スライド概要
講演アーカイブ：
https://www.youtube.com/watch?v=amatj7IWk9g
講演内容：
ゲーム業界において視聴者は日々重要性を増しています。Genvidはライブ配信への視聴者の介入を可能にするSDKです。CrisisやX-Wing vsTIE Fighterの開発者率いるImpeller Studiosのスペースコンバットシミュレーター『In The Black』を例に、UE4 x Genvidでいかにプレイヤーだけでなく視聴者にも面白 い体験を提供できるか、その実装方法を解説します。
講演者：
Noah Brewster ( Technical Director, Impeller Studios )
Julian Huguet ( Evangelist, Impeller Studios )
Shuichi Aizawa ( Web developer Genvid Technologies Inc. )
ジョンソン裕子 ( ビジネスディレクター Genvid Technologies Japan K.K. )
UNREAL FEST EXTREME 2020 WINTER 再生リスト
https://www.youtube.com/playlist?list=PLr_Cbd4sUDTzxG9a4TrU0Rg6-ApCJBCsI
https://unrealengine.jp/unrealfest/
#ue4fest
Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/
関連スライド
各ページのテキスト
視聴者参加型のライブ動画を実現！ Genvid を UE4 に実装する方法 Impeller Studios - Noah Brewster ・Julian Huguet Genvid Technologies - ジョンソン裕子・Shuichi Aizawa #ue4fest
スピーカーとアジェンダ • Genvid 概要 Genvid Technologies Japan K.K. ビジネスディレクター ジョンソン裕子 • “In The Black”のUE4側実装方法 Impeller Studios, Inc. エバンジェリスト Julian Huguet テクニカルディレクター Noah Brewster • “In The Black”のオーバーレイ側実装方法 Genvid Technologies, Inc. ウェブデベロッパー Shuichi Aizawa #ue4fest
Genvid 概要 Genvid Technologies Japan K.K. ビジネスディレクター ジョンソン裕子 #ue4fest
Genvid Technologies について • 読み方：ジェンビッド • ミッション：インタラクティブ・メディアの未来を推進 • 製品: Genvid SDK (最新 ver. 1.24) • 創業：2016年、元 Shinra Technologies スクウェア・エニックス、UbiSoft、AMD • 従業員数: 約70人 #ue4fest
Vision #ue4fest
エンターテイメントの新たなカテゴリー 1920s 2010s 1970s 2025? ゲーム AR/VR/MR 映画・テレビ esports インタラクティブ・スト リーミング Lean In Lean Back OPPORTUNITY MILEs (Massive Interactive Live Events)： 大規模インタラクティブ・ライブ・イベント #ue4fest
インタラクティブ・メディアとゲーム市場 • 現在、ゲーム会社はプレイヤーからのみマネタイズ • Esports：視聴者から収益化しようとする試みの第一陣 $168.8B $139.1B • 開発者は Genvid のようなツールを使うことで その成長をブーストすることが可能 インタラクティブ メディア $119.2B $104.6B $93.8B デジタルゲーム 2016 2017 2019 2018 2020 世界のインタラクティブ・メディア / ゲーム市場 #ue4fest
Genvid で可能になる進化した視聴体験 視聴者毎にカスタマイズされた視聴体験 リアルタイムにインタラクション可能 #ue4fest
Genvidで可能になるインタラクション Tier 1 介入 Tier 2 カスタマイズ Tier 3 情報表示 視聴者が直接ゲームなどのコンテンツに介入し、プレイヤー とインタラクションすることが可能に。 (passive input - プレイヤー、他の視聴者にも見える ) (active input - 視聴者が積極的にコンテンツに介入 ) カスタムフィード（ chat / data / camera etc.) を提供することで 視聴者がレベルや好みによって視聴体験を調整することが 可能に。 視聴者からベテランまで、視聴者のレベルや好みに応じて データや情報などをリアルタイムに表示。視聴者の教育や ビューアビリティの向上が可能に。 #ue4fest
技術概要 #ue4fest
Genvid を使うには • SDKのダウンロード：無償 https://www.genvidtech.com/ UE4プラグイン、サンプル同梱 • サポート：無償 • Genvidを使用して配信した際： 月間のユニークビューワー数 x 8円 + レベニューシェア（配信の収益から） #ue4fest
“In The Black”の UE4側 実装方法 Impeller Studios, Inc. エバンジェリスト Julian Huguet テクニカルディレクター Noah Brewster #ue4fest
スタジオについて • • • • • www.impellerstudios.com 2013 年設立のインディー開発チーム マルチプレイヤーに特化したハードコアPC ゲームを開発 開発メンバー：10人 世界各地から開発中。自己資金。 ディレクター: Jack Mamais ー Crysis、MechWarrior 2、Far Cry のデザイナー パートナーシップ：Alienware、AMD、Logitech、Nvidia、Oculus、Thrustmaster #ue4fest
開発タイトルについて • • • • • • www.intheblack.gg 対象: リアルなスペースシムが好きなハードコアなマルチプレイヤーゲーマー ゲームエンジン: Unreal Engine 4 プラットフォーム: PC、 VR （ローンチ後対応予定） 現在クローズドβテスト中 （早期アクセスを2021 第一四半期に予定） リリース予定: 2021 後半 ビジネスモデル: F2P＋ビジュアル / 通貨パックでのマイクロトランザクション #ue4fest
“In The Black” with Genvid Why? How? • この第三四半期だけでもゲーマー たちのライブストリーミングの視聴 時間は 74.6 億時間 • 視聴者のインタラクションをデザイン • Genvid を使うことで開発者は視聴 者をゲームに呼び込み、タイトル へのエンゲージメントを高めること が可能 • ゲームへインテグレーション • UIオーバーレイアセットを開発 • 必要な機能を随時追加 #ue4fest
Design Process #ue4fest
Integration Process #ue4fest
11/12 からクローズドβテスト開始! • Free beta key: www.intheblack.gg/genvid • Contact: support@impellerstudios.com #ue4fest
"In The Black" のオーバーレイ側実装方法 Genvid Technologies Inc. ウェブデベロッパー Shuichi Aizawa #ue4fest
Demo #ue4fest
コードの構成 オーバーレイは単なる web ページ • video_overlay.html • genvid.umd.js ← ライブラリ • genvid_overlay.js • stylesheet.css #ue4fest
video_overlay.html の例
<html>
<head>
<title>Genvid Overlay</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="genvid.umd.js"></script>
<script src="genvid_overlay.js"></script>
</head>
<body>
<!-- overlay html code here -->
</body>
</html>
#ue4fest
genvid_overlay.js の例
fetch(endpointURL + "/api/public/channels/join" , {method: "post"})
.then(function(response){ return response.json(); })
.then(function(data) {
let gvClient = genvid.createGenvidClient (data.info, data.uri, data.token, null, {twitchExt: true, silent: false});
gvClient.onAuthenticated (function(success){ /* handler logic */ });
gvClient.onVideoPlayerReady (function(element){ /* handler logic */ });
gvClient.onNotificationsReceived (function(notifications){ /* handler logic */ });
gvClient.onStreamsReceived (function(dataStreams){ /* handler logic */ });
gvClient.onDraw(function(frame) {
// most logic goes here
});
gvClient.start();
})
.catch(function(error){ console.log(error); });
#ue4fest
gvClient.onDraw() 例 1: match data ゲームから送られるデータ • チーム名 • スコア • エリア • 残り時間 #ue4fest
gvClient.onDraw() 例 1: match data
gvClient.onDraw(function(frame) {
...
let matchData = JSON.parse(frame.streams.MatchData.data);
let header = document.getElementById ('header');
header.querySelector ('.header-score-left' ).innerText = matchData.Score[ 0].Value;
header.querySelector ('.header-score-right' ).innerText = matchData.Score[ 1].Value;
header.querySelector ('.header-location' ).innerText = matchData.Location;
header.querySelector ('.header-time').innerText = matchData.Time;
if (!header.querySelector ('.header-name-left' ).innerText ||
!header.querySelector ('.header-name-right' ).innerText) {
header.querySelector ('.header-name-left' ).innerText = matchData.Score[ 0].Name;
header.querySelector ('.header-name-right' ).innerText = matchData.Score[ 1].Name;
}
...
});
#ue4fest
gvClient.onDraw() 例 2: mini map フレーム毎にアップデートされるデータ • 各機体の位置 • どの機体が今カメラに映されているか • 各機体の位置関係 (上下) • 倒されたか #ue4fest
gvClient.onDraw() 例 2: mini map
gvClient.onDraw(function(frame) {
...
let players = JSON.parse(frame.streams.GameData.data).Players;
miniMapContext. clearRect(0, 0, miniMapCanvas.width, miniMapCanvas.height);
players.forEach((player) => {
let playerImage = getPlayerImage (playerDataMap[player.Name][ 'id'],
player.IsDead,
player.IsFocused,
player.CurrentVehicle.Position.z);
miniMapContext. drawImage(playerImage,
player.CurrentVehicle.Position.x - miniMapCanvas.width /2,
player.CurrentVehicle.Position.y - miniMapCanvas.height /2);
});
...
});
#ue4fest
gvClient.onDraw() 例 3: annotations Annotation はフレーム毎に送るデータではなく、 何かが起きたタイミングで送信する • プレイヤーが倒された • ニュースフィードに出す情報 • プレイヤーがある一定以上応援された #ue4fest
gvClient.onDraw() 例 3: annotations
gvClient.onDraw(function(frame) {
...
frame.annotations.GameAnnotations. forEach(annotation => {
let annotationData = JSON.parse(annotation.data);
switch (annotationData.Key) {
case 'playerDeath' :
onPlayerDeath (annotationData);
togglePlayerEntryDeadState (annotationData.Player, true);
break;
case 'feedMessage' :
addToGameFeedMessagesQueue (annotationData);
break;
case 'cheerMilestoneChanged' :
updateCheerMilestone (annotationData);
break;
}
});
...
});
#ue4fest
gvClient.sendEvent() 例 Event はオーバーレイからゲームへデータを送る時に使われる • Cheering（応援） • Bounty（賞金） • Wager（賭け） #ue4fest
gvClient.sendEvent() 例
document.getElementById ('cheer-button-' + playerName). onclick = function() {
let cheerEvent = {cheer: playerName};
gvClient.sendEventObject (cheerEvent);
}
combatantInfoCardAddBounty .onclick = function() {
let bountyAmount = 1000;
let bountyCost = 1100;
let combatantName = document.getElementById ('combatant-info-card-name' ).innerHTML;
let event = {
"key": ["setBounty", combatantName, viewerName],
"value": bountyAmount
}
gvClient.sendEvent([event]);
viewerPoints -= bountyCost;
}
#ue4fest
簡単に試せます • Genvid SDK はダウンロード・サポート無料 • Unreal Engine 4 向けのサンプルが利用可能 • 日本語のドキュメンテーション genvidtech.com/doc Thank you! #ue4fest