視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER

#ue4fest#ue4fest
UNREAL FEST EXTREME 2020 WINTER

#ue4fest#ue4fest
視聴者参加型のライブ動画を実現！
Genvid を UE4 に実装する方法 
Impeller Studios - Noah Brewster ・Julian Huguet 
Genvid Technologies - ジョンソン裕子・Shuichi Aizawa

#ue4fest#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#ue4fest
Genvid 概要 
Genvid Technologies Japan K.K.  
ビジネスディレクター　ジョンソン裕子

#ue4fest#ue4fest
• 読み方：ジェンビッド 
 
• ミッション：インタラクティブ・メディアの未来を推進 
 
• 製品: Genvid SDK (最新 ver. 1.24) 
 
• 創業：2016年、元 Shinra Technologies 
スクウェア・エニックス、UbiSoft、AMD
 
• 従業員数: 約70人 
 
Genvid Technologies について

#ue4fest#ue4fest
エンターテイメントの新たなカテゴリー 
1920s
映画・テレビ
2010s
esports
1970s
ゲーム
2025?
AR/VR/MR
インタラクティブ・スト
リーミング
OPPORTUNITY
MILEs (Massive Interactive Live Events)：
大規模インタラクティブ・ライブ・イベント
LeanBack
LeanIn

#ue4fest#ue4fest
インタラクティブ・メディアとゲーム市場 
• 現在、ゲーム会社はプレイヤーからのみマネタイズ 
 
• Esports：視聴者から収益化しようとする試みの第一陣 
 
• 開発者は Genvid のようなツールを使うことで 
その成長をブーストすることが可能
 
2016 2017 2018 2019 2020
$93.8B
$104.6B
$119.2B
$139.1B
$168.8B
インタラクティブ
メディア
デジタルゲーム
世界のインタラクティブ・メディア / ゲーム市場

#ue4fest#ue4fest
視聴者毎にカスタマイズされた視聴体験  リアルタイムにインタラクション可能 
Genvid で可能になる進化した視聴体験

#ue4fest#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#ue4fest
“In The Black”の UE4側実装方法 
Impeller Studios, Inc. 
エバンジェリスト Julian Huguet 
テクニカルディレクター Noah Brewster

#ue4fest#ue4fest
スタジオについて www.impellerstudios.com 
• 2013 年設立のインディー開発チーム 
• マルチプレイヤーに特化したハードコアPC ゲームを開発
• 開発メンバー：10人　世界各地から開発中。自己資金。 
• ディレクター: Jack Mamais ー Crysis、MechWarrior 2、Far Cry のデザイナー
• パートナーシップ：Alienware、AMD、Logitech、Nvidia、Oculus、Thrustmaster

#ue4fest#ue4fest
開発タイトルについて www.intheblack.gg 
• 対象: リアルなスペースシムが好きなハードコアなマルチプレイヤーゲーマー
• ゲームエンジン: Unreal Engine 4
• プラットフォーム: PC、 VR （ローンチ後対応予定）
• 現在クローズドβテスト中（早期アクセスを2021 第一四半期に予定）
• リリース予定: 2021 後半
• ビジネスモデル: F2P＋ビジュアル / 通貨パックでのマイクロトランザクション

#ue4fest#ue4fest
Why? 
• この第三四半期だけでもゲーマー
たちのライブストリーミングの視聴
時間は 74.6 億時間 
 
• Genvid を使うことで開発者は視聴
者をゲームに呼び込み、タイトル
へのエンゲージメントを高めること
が可能 
How? 
• 視聴者のインタラクションをデザイン 
 
• UIオーバーレイアセットを開発 
 
• ゲームへインテグレーション 
 
• 必要な機能を随時追加 
“In The Black” with Genvid

#ue4fest#ue4fest
Design Process

#ue4fest#ue4fest
Integration Process

#ue4fest#ue4fest
• Free beta key: www.intheblack.gg/genvid 
• Contact: support@impellerstudios.com 
 
11/12 からクローズドβテスト開始!

#ue4fest#ue4fest
"In The Black" のオーバーレイ側実装方法 
Genvid Technologies Inc. 
ウェブデベロッパー　Shuichi Aizawa

#ue4fest#ue4fest
オーバーレイは単なる web ページ 
• video_overlay.html 
• genvid.umd.js ← ライブラリ 
• genvid_overlay.js 
• stylesheet.css 
コードの構成

#ue4fest#ue4fest
<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> 
 
</body> 
</html> 
video_overlay.html の例

#ue4fest#ue4fest
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); }); 
genvid_overlay.js の例

#ue4fest#ue4fest
ゲームから送られるデータ 
• チーム名 
• スコア 
• エリア 
• 残り時間 
gvClient.onDraw() 例 1: match data

#ue4fest#ue4fest
... 
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; 
} 
... 
}); 
gvClient.onDraw() 例 1: match data

#ue4fest#ue4fest
フレーム毎にアップデートされるデータ 
• 各機体の位置 
• どの機体が今カメラに映されているか 
• 各機体の位置関係 (上下) 
• 倒されたか 
gvClient.onDraw() 例 2: mini map

#ue4fest#ue4fest
... 
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); 
}); 
... 
}); 
gvClient.onDraw() 例 2: mini map

#ue4fest#ue4fest
Annotation はフレーム毎に送るデータではなく、 
何かが起きたタイミングで送信する 
• プレイヤーが倒された 
• ニュースフィードに出す情報 
• プレイヤーがある一定以上応援された 
gvClient.onDraw() 例 3: annotations

#ue4fest#ue4fest
... 
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; 
} 
}); 
... 
}); 
gvClient.onDraw() 例 3: annotations

#ue4fest#ue4fest
Event はオーバーレイからゲームへデータを送る時に使われる 
• Cheering（応援） 
• Bounty（賞金） 
• Wager（賭け） 
gvClient.sendEvent() 例

#ue4fest#ue4fest
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; 
} 
gvClient.sendEvent() 例

#ue4fest#ue4fest
• Genvid SDK はダウンロード・サポート無料 
• Unreal Engine 4 向けのサンプルが利用可能 
• 日本語のドキュメンテーション　genvidtech.com/doc 
 
 
 
 
簡単に試せます 
Thank you!

視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER

Ähnlich wie 視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER (20)

Mehr von エピック・ゲームズ・ジャパン Epic Games Japan

Mehr von エピック・ゲームズ・ジャパン Epic Games Japan (20)

視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER