Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UE4のMediaFrameworkについて

1,216 views

Published on

第5回UE4勉強会での登壇資料。
Media Framework3.0について書きました。

Published in: Engineering
  • Be the first to comment

UE4のMediaFrameworkについて

  1. 1. ~なんかサブタイトル~ Unreal Engine4 Media Frameworkについて
  2. 2. 自己紹介 Twitter : @MozPaca398 UE4 4年目のスーパービギナー UE4初心者が頑張ってるブログ http://mozpaca.hatenablog.com/ 2
  3. 3. 過去のスライド Unreal Engine4で合成音声を使いたい https://www.slideshare.net/ItsukiInoue/unrealengine4-82720682 UE4で実装するBGMのプロシージャル生成 (スライド行方不明) 3
  4. 4. 音声合成の研究を寂しくやってます 4
  5. 5. 目次 基礎概要 ・Media Frameworkとは ・4.18から大きく変わったところ ・再生可能な拡張子とエンコード 動画再生のやり方 ・Media Playerを用いた動画再生の手順 ・URLからのストリーム再生 ・再生できるMeshとWidget Media Frameworkで使用するもの ・Media Player ・Media Texture ・Media Sound Component ・Media Source File プラットフォームごとのあれこれ ・Windows ・MacOS ・iOS ・Android 個人的に詰まった箇所 ・動画の画質が劣化する ・動画が白っぽく見える ・真下に変なものが見える 番外編 ・4Kとか8Kとかの映像再生について ・パノラマとして再生するには まとめ 5
  6. 6. Media Framework初心者 ターゲットの想定 6
  7. 7. Media Frameworkの使い方を覚えてもらう回 7
  8. 8. 初心者向けということで難しい話はしません 8
  9. 9. Unreal Engine4 4.18.3 Visual Studio 2015 Community 9
  10. 10. \俺もいるぞ!/ 10
  11. 11. \なぜだ!/ 11
  12. 12. 基礎概要 12
  13. 13. Media Framework ・Both Engine & Slate Agnostic (エンジンにもスレートにも依存しない) ・Able to support Localized Audio & Video Tracks (ローカライズされたAudio & Video Trackをサポート) ・Accessible in the Content Browser, Material Editor, & Sound System (コンテンツブラウザ、マテリアルエディタ、サウンドシステムで使用可能) ・Available for use with Blueprint & the UMG UI Designer (ブループリント、UMGで使用できる) ・Able to support Streaming Media (Stereaming Mediaをサポート) ・Able to Fast Forward, Reverse, Play, Pause, & Scrub Media (早送り、逆再生、再生、一時停止、スクラブメディアが可能) ・Able to support Pluggable Players (フラグ着脱可能なPlayerをサポート) 以下、公式ドキュメントより引用 13
  14. 14. 難しい言葉はやめて! 覚えられないわ 14
  15. 15. 簡単に言うと 15
  16. 16. 動画の再生とその他もろもろがUE4上でできる こいつぁすげーや 16
  17. 17. 公式ドキュメント http://api.unrealengine.com/JPN/Engine/MediaFramework/Overview/ 17
  18. 18. UE4 4.18から変わった箇所 ・MediaTextureを使用するマテリアル ・Media Sound ・動画のカクつきの解消 ちょこちょこ変わってるっぽいけど、 大きな(使い方の変わった)ところだけ紹介 18
  19. 19. Media Textureから作成したマテリアル 19
  20. 20. Media Textureから作成したマテリアルのSampler Type Sampler Typeが外部ファイル用のものに変更された External以外ではエラーを吐く 4.17 4.18 20
  21. 21. Media Textureから作成したマテリアルのSampler Type Media Textureから直接マテリアルを作成すると Sampler Typeが自動的に設定される 21
  22. 22. Media Sound 22
  23. 23. Media Sound 4.17 4.18 Media Soundファイルを作成できなくなった 23
  24. 24. Media Sound Actorのコンポーネントになったらしい 24
  25. 25. Media Sound + 適応させたいMedia Playerをここに入っている→ このコンポーネントを持ったActorが レベルに配置されている = 音が再生される 25
  26. 26. Media Sound MozPacaって人がブログに書いてた http://mozpaca.hatenablog.com/entry/20180312/1520843909 UE4 Media SoundがComponentになってあたふたした話 26
  27. 27. 画面のカクつきの解消 27
  28. 28. 画面のカクつきの解消 中を読んだわけではない でも体感でわかるほどにカクつきが減った 根拠は体感だけ。 質問されると困る 多分デコーダー周りが変わったんじゃないかなぁ 28
  29. 29. 再生可能なファイル拡張子とエンコード 29
  30. 30. ストリーム再生とかも 30
  31. 31. 動画再生のやり方 31
  32. 32. Media Playerを用いた動画の再生方法 動画をインポートする ↓ Media Playerを作成する ↓ MediaTextureからマテリアルを作成する ↓ Media Sound ComponentをPlayerとかにAttachする ↓ 動画再生の処理を書く 32
  33. 33. 動画のインポート Contentフォルダに「Movies」という新規フォルダを作成 33
  34. 34. 動画のインポート 作成したMoviesフォルダに動画ファイルをいれる 34
  35. 35. 動画のインポート コンテンツブラウザからFile Media Sourceを作成 35
  36. 36. 動画のインポート 作成したFile Media Sourceを開く 36
  37. 37. 動画のインポート 動画までのパスを指定する 37
  38. 38. 動画のインポート 動画までのパスを指定した File Media Sourceから動画ファイルまでの相対パス 38
  39. 39. 動画のインポート 絶対パスで表示された場合パスの設定が間違っています 見直してください 今回の場合はMoviesフォルダがContentフォルダの外にあるのが原因 39
  40. 40. 動画のインポート 注意事項的な扱いっぽい? 「プロジェクトでは動画再生されるけど、パッケージ化したら再生されなくなった」 ↓ 大体これが原因 40
  41. 41. 動画のインポート 私も引っかかりました ↑sが抜けてた 再現イメージ 41
  42. 42. 動画のインポート 当時の私 42
  43. 43. Media Playerの作成 43
  44. 44. Media Playerの作成 44
  45. 45. Media Playerの作成 45
  46. 46. Media Textureからマテリアルを作成 右クリックからマテリアルを作成 46
  47. 47. Media Textureからマテリアルを作成 PlaneなどのMeshに貼り付ける 47
  48. 48. Media Sound ComponentをAttachする Playerやスピーカー用のBPにAttach 48
  49. 49. Media Sound ComponentをAttachする Media Playerの適応も忘れずに 49
  50. 50. 動画を再生するための処理を書く Media Playerを入れるための変数を作成 50
  51. 51. 動画を再生するための処理を書く File Media SourceをOpen Sourceノードで開く 51
  52. 52. 動画を再生するための処理を書く Media Playerの詳細タブにある 「Play on Open」にチェックが入っていると読み込まれた時点で自動で再生される 52
  53. 53. 動画を再生するための処理を書く Playノードを使用すると再生される 53
  54. 54. 動画を再生するための処理を書く 処理の一例 54
  55. 55. Widgetでも再生できるよ 新規Widgetを作成 ↓ Media TextureをImageに入れる ↓ Open Sourceノードに処理を通す ↓ Widgetをレベルに表示させる 55
  56. 56. デザイナー画面でImageを配置する 56
  57. 57. Imageには作成しておいたMediaTextureを入れる 57
  58. 58. イベントグラフ画面に移動し、 変数を作成する Media Player型の変数を作成する ↓ コンパイル後に対応したMedia Playerを入れる 58
  59. 59. 動画ファイルを開きたいタイミングでOpen Sourceから動画ファイルを呼び出す 59
  60. 60. Widgetをレベル上に出す 60
  61. 61. 再生できた 61
  62. 62. ストリーム再生の場合は「File Media Source」ではなく、 「Stream Media Source」を使用する 62
  63. 63. Stream Urlのところに再生したい動画をURLを入力する 63
  64. 64. 動画再生に使用するもの 64
  65. 65. Media Player ・プロジェクト内に存在している動画ファイルの 再生、逆再生、早送りが可能なファイル ・動画の詳細(拡張子、再生時間など)が確認できる ・このMedia Playerを通すことでゲーム内に動画を流すことができる 65
  66. 66. コンテンツブラウザから Media→Media Playerで出すことができる 66
  67. 67. こんな感じの画面 67
  68. 68. Media Texture Media Playerを生成する際に「Video output MediaTexture asset」に チェックを入れている場合生成される 68
  69. 69. コンテンツブラウザから出すこともできる 69
  70. 70. コンテンツブラウザから出した場合は Media Playerを手動で関連付ける必要がある 70
  71. 71. Media Sound Component 関連付けたMedia Playerに合わせて サウンドを再生するコンポーネント 71
  72. 72. Media File Source 動画データのパスを記録する Media Playerはこのファイルからデータを読み取る プラットフォームごとに再生方法を切り替える 72
  73. 73. プラットフォームごとのあれこれ 再生するものが異なってくる? それぞれで再生してみた感想 73
  74. 74. Windows 74
  75. 75. Windows 75
  76. 76. MacOS 76
  77. 77. MacOS 77
  78. 78. 機材がないので未検証です 78
  79. 79. ごめんなさい 79
  80. 80. iOS 80
  81. 81. iOS 81
  82. 82. 実機がないので未検証です 82
  83. 83. 本当にごめんなさい 83
  84. 84. Android 84
  85. 85. Android 85
  86. 86. 余程のことがない限りAutomaticのままでいいような気がする 86
  87. 87. 個人的に詰まった箇所 環境 ・UE4 4.18.3 ・Android(Galaxy s7 edge) 光源なし パノラマ動画を再生してた (原因究明はしてない) 87
  88. 88. 画質が劣化する こいつにチェックを入れると発生 88
  89. 89. 動画が白っぽく再生される 89
  90. 90. 動画が白っぽく再生される 90
  91. 91. 真下に動画の収束点のようなものが見える カメラの回転などの影響を考えて このようなマテリアルを組んでいた 91
  92. 92. 真下に動画の収束点のようなものが見える これがあかんかった 92
  93. 93. 真下に動画の収束点のようなものが見える 特別な処理が必要なければ こうしておくのが吉 93
  94. 94. 真下に動画の収束点のようなものが見える ちょっと待て 94
  95. 95. 真下に動画の収束点のようなものが見える Vector Parameterで動画を反転するのは特別な処理じゃないのか 95
  96. 96. 真下に動画の収束点のようなものが見える マテリアルを貼るMesh自体を反転させれば問題ない 96
  97. 97. 番外編 ・4Kとか8Kとかの映像を再生するには ・パノラマ動画を再生するには 97
  98. 98. 4Kとか8Kとかの映像を再生するには 再生の手順は全て同じ 問題無く再生できる 98
  99. 99. 4Kとか8Kとかの映像を再生するには だたし 動画のエンコードがその画質に対応している必要がある 4K mp4 H.264 8K mp4 H.265/HEVC 99
  100. 100. パノラマ動画を再生するには 再生の手順は全く同じ マテリアルを貼り付ける対象が Plane orWidget → Sphere になっただけ ※パノラマ用の動画でないと引き伸ばされてすごいことになる 100
  101. 101. 時間に余裕があれば実演します 101
  102. 102. まとめ ・どの再生(通常、パノラマ)でも再生手順は同じ(ストリームは例外) ・画質などにこだわる場合はプラットフォームごとに調整の必要あり ・Media Framework2.0と比べると格段に使いやすくなった ・公式ドキュメントにも手順がかなり詳しく掲載されている 102

×