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

1. #ue4fest#ue4fest UNREAL FEST EXTREME 2020 WINTER 

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

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

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

6. #ue4fest#ue4fest Vision 

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

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

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

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

11. #ue4fest#ue4fest 技術概要 

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. #ue4fest#ue4fest Design Process 

18. #ue4fest#ue4fest Integration Process 

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

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

21. #ue4fest#ue4fest Demo 

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>    </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! 

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

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

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