Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
#ue4fest#ue4fest
UNREAL FEST EXTREME 2020 WINTER

#ue4fest#ue4fest
視聴者参加型のライブ動画を実現!
Genvid を UE4 に実装する方法

Impeller Studios - Noah Brewster ・Julian Huguet

Genvid Technologi...
#ue4fest#ue4fest
• Genvid 概要

Genvid Technologies Japan K.K.
ビジネスディレクター  ジョンソン裕子


スピーカーとアジェンダ

• “In The Black”のUE4側実装方法
...
#ue4fest#ue4fest
Genvid 概要

Genvid Technologies Japan K.K. 

ビジネスディレクター ジョンソン裕子

#ue4fest#ue4fest
• 読み方:ジェンビッド



• ミッション:インタラクティブ・メディアの未来を推進



• 製品: Genvid SDK (最新 ver. 1.24)



• 創業:2016年、元 Shinra Tec...
#ue4fest#ue4fest
Vision

#ue4fest#ue4fest
エンターテイメントの新たなカテゴリー

1920s
映画・テレビ
2010s
esports
1970s
ゲーム
2025?
AR/VR/MR
インタラクティブ・スト
リーミング
OPPORTUNITY
MIL...
#ue4fest#ue4fest
インタラクティブ・メディアとゲーム市場

• 現在、ゲーム会社はプレイヤーからのみマネタイズ



• Esports:視聴者から収益化しようとする試みの第一陣



• 開発者は Genvid のようなツール...
#ue4fest#ue4fest
視聴者毎にカスタマイズされた視聴体験
 リアルタイムにインタラクション可能

Genvid で可能になる進化した視聴体験

#ue4fest#ue4fest
Genvidで可能になるインタラクション

Tier 1
介入
Tier 2
カスタマイズ
Tier 3
情報表示
視聴者が直接ゲームなどのコンテンツに介入し、プレイヤー
とインタラクションすることが可能に。
...
#ue4fest#ue4fest
技術概要

#ue4fest#ue4fest
Genvid を使うには

• SDKのダウンロード:無償

https://www.genvidtech.com/
UE4プラグイン、サンプル同梱
• サポート:無償



• Genvidを使用して配信した...
#ue4fest#ue4fest
“In The Black”の UE4側 実装方法

Impeller Studios, Inc.

エバンジェリスト Julian Huguet

テクニカルディレクター Noah Brewster

#ue4fest#ue4fest
スタジオについて www.impellerstudios.com

• 2013 年設立のインディー開発チーム

• マルチプレイヤーに特化したハードコアPC ゲームを開発
• 開発メンバー:10人 世界各地か...
#ue4fest#ue4fest
開発タイトルについて www.intheblack.gg

• 対象: リアルなスペースシムが好きなハードコアなマルチプレイヤーゲーマー
• ゲームエンジン: Unreal Engine 4
• プラットフォー...
#ue4fest#ue4fest
Why?

• この第三四半期だけでもゲーマー
たちのライブストリーミングの視聴
時間は 74.6 億時間



• 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
Demo

#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...
#ue4fest#ue4fest
fetch(endpointURL + "/api/public/channels/join" , {method: "post"})

.then(function(response){ return res...
#ue4fest#ue4fest
ゲームから送られるデータ

• チーム名

• スコア

• エリア

• 残り時間

gvClient.onDraw() 例 1: match data

#ue4fest#ue4fest
gvClient.onDraw(function(frame) {

...

let matchData = JSON.parse(frame.streams.MatchData.data); 



let...
#ue4fest#ue4fest
フレーム毎にアップデートされるデータ

• 各機体の位置

• どの機体が今カメラに映されているか

• 各機体の位置関係 (上下)

• 倒されたか

gvClient.onDraw() 例 2: mini ...
#ue4fest#ue4fest
gvClient.onDraw(function(frame) {

...

let players = JSON.parse(frame.streams.GameData.data).Players; 

...
#ue4fest#ue4fest
Annotation はフレーム毎に送るデータではなく、

何かが起きたタイミングで送信する

• プレイヤーが倒された

• ニュースフィードに出す情報

• プレイヤーがある一定以上応援された

gvCli...
#ue4fest#ue4fest
gvClient.onDraw(function(frame) {

...

frame.annotations.GameAnnotations. forEach(annotation => {

let a...
#ue4fest#ue4fest
Event はオーバーレイからゲームへデータを送る時に使われる

• Cheering(応援)

• Bounty(賞金)

• Wager(賭け)

gvClient.sendEvent() 例

#ue4fest#ue4fest
document.getElementById('cheer-button-' + playerName).onclick = function() {

let cheerEvent = {cheer: pl...
#ue4fest#ue4fest
• Genvid SDK はダウンロード・サポート無料

• Unreal Engine 4 向けのサンプルが利用可能

• 日本語のドキュメンテーション genvidtech.com/doc








...
Nächste SlideShare
Wird geladen in …5
×

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

2.135 Aufrufe

Veröffentlicht am

講演アーカイブ:準備中

講演内容:
ゲーム業界において視聴者は日々重要性を増しています。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

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. #ue4fest#ue4fest UNREAL FEST EXTREME 2020 WINTER

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

  3. 3. #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 
 

  4. 4. #ue4fest#ue4fest Genvid 概要
 Genvid Technologies Japan K.K. 
 ビジネスディレクター ジョンソン裕子

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

  6. 6. #ue4fest#ue4fest Vision

  7. 7. #ue4fest#ue4fest エンターテイメントの新たなカテゴリー
 1920s 映画・テレビ 2010s esports 1970s ゲーム 2025? AR/VR/MR インタラクティブ・スト リーミング OPPORTUNITY MILEs (Massive Interactive Live Events): 大規模インタラクティブ・ライブ・イベント LeanBack LeanIn
  8. 8. #ue4fest#ue4fest インタラクティブ・メディアとゲーム市場
 • 現在、ゲーム会社はプレイヤーからのみマネタイズ
 
 • Esports:視聴者から収益化しようとする試みの第一陣
 
 • 開発者は Genvid のようなツールを使うことで
 その成長をブーストすることが可能 
 2016 2017 2018 2019 2020 $93.8B $104.6B $119.2B $139.1B $168.8B インタラクティブ メディア デジタルゲーム 世界のインタラクティブ・メディア / ゲーム市場
  9. 9. #ue4fest#ue4fest 視聴者毎にカスタマイズされた視聴体験
 リアルタイムにインタラクション可能
 Genvid で可能になる進化した視聴体験

  10. 10. #ue4fest#ue4fest Genvidで可能になるインタラクション
 Tier 1 介入 Tier 2 カスタマイズ Tier 3 情報表示 視聴者が直接ゲームなどのコンテンツに介入し、プレイヤー とインタラクションすることが可能に。 (passive input - プレイヤー、他の視聴者にも見える ) (active input - 視聴者が積極的にコンテンツに介入 ) カスタムフィード(chat / data / camera etc.) を提供することで 視聴者がレベルや好みによって視聴体験を調整することが 可能に。 視聴者からベテランまで、視聴者のレベルや好みに応じて データや情報などをリアルタイムに表示。視聴者の教育や ビューアビリティの向上が可能に。
  11. 11. #ue4fest#ue4fest 技術概要

  12. 12. #ue4fest#ue4fest Genvid を使うには
 • SDKのダウンロード:無償
 https://www.genvidtech.com/ UE4プラグイン、サンプル同梱 • サポート:無償
 
 • Genvidを使用して配信した際:
 月間のユニークビューワー数 x 8円      +
 レベニューシェア(配信の収益から) 

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

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

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

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

  17. 17. #ue4fest#ue4fest Design Process

  18. 18. #ue4fest#ue4fest Integration Process

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

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

  21. 21. #ue4fest#ue4fest Demo

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

  23. 23. #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>
 <!-- overlay html code here -->
 </body>
 </html>
 video_overlay.html の例

  24. 24. #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 の例

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

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

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

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

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

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

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

  32. 32. #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() 例

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


×