Downloaded 14 times
![#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](https://image.slidesharecdn.com/03-201117065428/85/Genvid-UE4-UNREAL-FEST-EXTREME-2020-WINTER-26-320.jpg)
![#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](https://image.slidesharecdn.com/03-201117065428/85/Genvid-UE4-UNREAL-FEST-EXTREME-2020-WINTER-28-320.jpg)
![#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() 例](https://image.slidesharecdn.com/03-201117065428/85/Genvid-UE4-UNREAL-FEST-EXTREME-2020-WINTER-32-320.jpg)
Uploaded byエピック・ゲームズ・ジャパン Epic Games Japan
視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
講演アーカイブ：準備中 講演内容： ゲーム業界において視聴者は日々重要性を増しています。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
More Related Content
![[IGF2018] UE4でAndroidアプリを開発する際に知っておきたいパフォーマンス改善テクニック + INDIE GAMES FESTIVAL 2...](https://cdn.slidesharecdn.com/ss_thumbnails/ue4android1-171113180456-thumbnail.jpg?width=640&height=640&fit=bounds)
![[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介！](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2017v0-170830231914-thumbnail.jpg?width=640&height=640&fit=bounds)
視聴者参加型のライブ動画を実現！GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
- 1. #ue4fest#ue4fest UNREAL FEST EXTREME2020 WINTER
- 2. #ue4fest#ue4fest 視聴者参加型のライブ動画を実現！ Genvid を UE4に実装する方法 Impeller Studios - Noah Brewster ・Julian Huguet Genvid Technologies - ジョンソン裕子・Shuichi Aizawa
- 3. #ue4fest#ue4fest • Genvid 概要 GenvidTechnologies Japan K.K. ビジネスディレクター ジョンソン裕子 スピーカーとアジェンダ • “In The Black”のUE4側実装方法 Impeller Studios, Inc. エバンジェリスト Julian Huguet テクニカルディレクター Noah Brewster • “In The Black”のオーバーレイ側実装方法 Genvid Technologies, Inc. ウェブデベロッパー Shuichi Aizawa
- 4. #ue4fest#ue4fest Genvid 概要 Genvid TechnologiesJapan K.K. ビジネスディレクター ジョンソン裕子
- 5. #ue4fest#ue4fest • 読み方：ジェンビッド • ミッション：インタラクティブ・メディアの未来を推進 •製品: Genvid SDK (最新 ver. 1.24) • 創業：2016年、元 Shinra Technologies スクウェア・エニックス、UbiSoft、AMD • 従業員数: 約70人 Genvid Technologies について
- 6.
- 7. #ue4fest#ue4fest エンターテイメントの新たなカテゴリー 1920s 映画・テレビ 2010s esports 1970s ゲーム 2025? AR/VR/MR インタラクティブ・スト リーミング OPPORTUNITY MILEs (Massive InteractiveLive Events)： 大規模インタラクティブ・ライブ・イベント LeanBack LeanIn
- 8. #ue4fest#ue4fest インタラクティブ・メディアとゲーム市場 • 現在、ゲーム会社はプレイヤーからのみマネタイズ • Esports：視聴者から収益化しようとする試みの第一陣 •開発者は Genvid のようなツールを使うことで その成長をブーストすることが可能 2016 2017 2018 2019 2020 $93.8B $104.6B $119.2B $139.1B $168.8B インタラクティブ メディア デジタルゲーム 世界のインタラクティブ・メディア / ゲーム市場
- 9.
- 10. #ue4fest#ue4fest Genvidで可能になるインタラクション Tier 1 介入 Tier 2 カスタマイズ Tier3 情報表示 視聴者が直接ゲームなどのコンテンツに介入し、プレイヤー とインタラクションすることが可能に。 (passive input - プレイヤー、他の視聴者にも見える ) (active input - 視聴者が積極的にコンテンツに介入 ) カスタムフィード（chat / data / camera etc.) を提供することで 視聴者がレベルや好みによって視聴体験を調整することが 可能に。 視聴者からベテランまで、視聴者のレベルや好みに応じて データや情報などをリアルタイムに表示。視聴者の教育や ビューアビリティの向上が可能に。
- 11.
- 12. #ue4fest#ue4fest Genvid を使うには • SDKのダウンロード：無償 https://www.genvidtech.com/ UE4プラグイン、サンプル同梱 •サポート：無償 • Genvidを使用して配信した際： 月間のユニークビューワー数 x 8円 + レベニューシェア（配信の収益から）
- 13. #ue4fest#ue4fest “In The Black”のUE4側 実装方法 Impeller Studios, Inc. エバンジェリスト Julian Huguet テクニカルディレクター Noah Brewster
- 14. #ue4fest#ue4fest スタジオについて www.impellerstudios.com • 2013年設立のインディー開発チーム • マルチプレイヤーに特化したハードコアPC ゲームを開発 • 開発メンバー：10人 世界各地から開発中。自己資金。 • ディレクター: Jack Mamais ー Crysis、MechWarrior 2、Far Cry のデザイナー • パートナーシップ：Alienware、AMD、Logitech、Nvidia、Oculus、Thrustmaster
- 15. #ue4fest#ue4fest 開発タイトルについて www.intheblack.gg • 対象:リアルなスペースシムが好きなハードコアなマルチプレイヤーゲーマー • ゲームエンジン: Unreal Engine 4 • プラットフォーム: PC、 VR （ローンチ後対応予定） • 現在クローズドβテスト中 （早期アクセスを2021 第一四半期に予定） • リリース予定: 2021 後半 • ビジネスモデル: F2P＋ビジュアル / 通貨パックでのマイクロトランザクション
- 16. #ue4fest#ue4fest Why? • この第三四半期だけでもゲーマー たちのライブストリーミングの視聴 時間は 74.6億時間 • Genvid を使うことで開発者は視聴 者をゲームに呼び込み、タイトル へのエンゲージメントを高めること が可能 How? • 視聴者のインタラクションをデザイン • UIオーバーレイアセットを開発 • ゲームへインテグレーション • 必要な機能を随時追加 “In The Black” with Genvid
- 17.
- 18.
- 19. #ue4fest#ue4fest • Free betakey: www.intheblack.gg/genvid • Contact: support@impellerstudios.com 11/12 からクローズドβテスト開始!
- 20. #ue4fest#ue4fest "In The Black"のオーバーレイ側実装方法 Genvid Technologies Inc. ウェブデベロッパー Shuichi Aizawa
- 21.
- 22. #ue4fest#ue4fest オーバーレイは単なる web ページ •video_overlay.html • genvid.umd.js ← ライブラリ • genvid_overlay.js • stylesheet.css コードの構成
- 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. #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. #ue4fest#ue4fest ゲームから送られるデータ • チーム名 • スコア •エリア • 残り時間 gvClient.onDraw() 例 1: match data
- 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. #ue4fest#ue4fest フレーム毎にアップデートされるデータ • 各機体の位置 • どの機体が今カメラに映されているか •各機体の位置関係 (上下) • 倒されたか gvClient.onDraw() 例 2: mini map
- 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. #ue4fest#ue4fest Annotation はフレーム毎に送るデータではなく、 何かが起きたタイミングで送信する • プレイヤーが倒された •ニュースフィードに出す情報 • プレイヤーがある一定以上応援された gvClient.onDraw() 例 3: annotations
- 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. #ue4fest#ue4fest Event はオーバーレイからゲームへデータを送る時に使われる • Cheering（応援） •Bounty（賞金） • Wager（賭け） gvClient.sendEvent() 例
- 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. #ue4fest#ue4fest • Genvid SDKはダウンロード・サポート無料 • Unreal Engine 4 向けのサンプルが利用可能 • 日本語のドキュメンテーション genvidtech.com/doc 簡単に試せます Thank you!