Media Playlist の使用方法

Media Framework ツールを用いた Media Playlist の作成および使用方法の説明です。

コンテンツ

Unreal Engine 5 (UE5) でメディア アセットで作業している時に、一連のビデオを特定の順番でプレイしたい、または特定のビデオシリーズのビデオにプレイヤーのアクセスを許可するには、 予め定義した順序が割り当てられた Media Source アセットを示す Media Playlist アセットを使って行います。

この操作ガイドでは、Media Playlist の作成およびプレイヤーに各アセットを順番にプレイ、もしくはプレイヤーがキーを押してプレイリスト内の特定のビデオにアクセス可能にします。

0-hero_ue5.png

ステップ

ここでは Starter Content Enabled (スターター コンテンツを有効にした状態)Blueprint Third Person Template プロジェクトを使います。 また、プレイリストではサンプル動画も 3 種類使用します。こちらの サンプル ビデオ リンクをクリックして、コンテンツを端末上に展開してください。

  1. [コンテンツ ブラウザ]Sources Panel を展開し 「Movies」 という名前で新規フォルダを追加したら右クリックして [Show in Explorer] を選択します。

    01-show-in-explorer_ue5.png

    ビデオ ファイルをプロジェクトでパッケージ化およびデプロイするために、ビデオは常にプロジェクトの 「Content/Movies」 フォルダに置かれている状態にしておく必要があります。

  2. サンプル ビデオまたは使用したいメディア ファイルをプロジェクトの 「Content/Movides」 フォルダにドラッグします。

    02-video-in-folder_ue5.png

  3. プロジェクトで 「Content/Movies」 フォルダを右クリックして [Media] から [File Media Source] を選択します。

    03-file-media-source_ue5.png

  4. File Media Source アセットを 3 つ作成します (それぞれに Video_01Video_02Video_03 と名前を付けます。

    04-file-media-source_ue5.png

  5. Video_01 内で File PathGideon_720x480 ファイル (または使用したいビデオ ファイル) を参照して [Open] ボタンをクリックします。

    05-open-file_ue5.png

  6. 前のステップを繰り返して Video_02 アセットと Video_03 アセットにもビデオを割り当てます。

  7. Media Texture と紐づけて MediaPlayer という MediaPlayer を作成し、MediaPlayer アセットを開きます。

    06-add-media-player_ue5.png

    Media Library ウィンドウ内のビデオをダブルクリックして、選択ファイルをプレイします。

    07-media-player-video-1_ue5.png

    さらに、[Details] パネルのオプションを有効にすることで、プレイリストのビデオの再生順序を Shuffle するようにプレイヤーを設定することも可能です。 [Loop] オプションはプレイリスト全体の再生 (Media Playlist にソースが 1 つしかない場合はひとつのソースだけ) をループします。 また、Media Player は [Play on Open] する設定になっています。つまり、この Media Player に紐づいているこの Media Source を開くと、自動的にプレイが開始します。

    [Playlist] ウィンドウで新規のプレイリスト アセットを保存することも可能ですが、4.18 の段階ではメディア エディタ内でプレイリストにアイテムを追加する方法はありません。

  8. [コンテンツ ブラウザ]「Content/Movies」 フォルダを右クリックして、[Media][Media Playlist] を選択し [MyPlaylist] と名前を付けます。

    08-add-media-playlist_ue5.png

  9. MyPlaylist アセットを開き、[Media Library] ウィンドウでビデオをダブルクリックし、それぞれをプレイリストに追加します。

    09-add-file_ue5.png

    [+] ボタンで新規アイテムをプレイリストおよびドロップダウンに追加し、ドロップダウン メニューで追加する Media Source の種類を選択することができます。 [Playlist] ウィンドウで、プレイリストへのアイテムの挿入、複製、削除を行うことができます。また、左クリックしながら行をドラッグすると再生順序の変更が可能になります。 [Media Playlist] ウィンドウの上部には、プレイリスト全体をループするための [Loop] オプションがあります。

  10. メイン エディタ ウィンドウの [Place Actors] パネルの [Basic] タブから [Plane] をレベルにドラッグし、Transform ツール でサイズを変更します。

    10-shapes-plane_ue5.png

    Transform ツール を使って、このスタティックメッシュ上でビデオがプレイされるように、プレーンを自由に移動 (W key)、回転 (E key)、スケール (R key) することができます。

  11. コンテンツ ブラウザ から、MediaPlayer_Video Media Texture アセットをレベルの中の Plane 上にドラッグして新規マテリアルを作成および適用します。

    11-add-media-player-video_ue5.png

    Media Texture アセットをレベルのスタティックメッシュ上にドラッグすると、マテリアル が自動的に作成およびメッシュに適用されて、ビデオのプレイが可能になります。

  12. レベルでその Plane を選択した状態で [Details] パネルの [Add Component] ボタンをクリックして Media Sound コンポーネントを探して追加します。

    12-add-media-sound_ue5.png

    Media Sound コンポーネントを使って、オーディオを Media Player と紐づけることができます。ビデオでオーディオも一緒にをプレイする方法を提供します。

  13. Media Sound コンポーネントを選択し、[Media] セクションで Media Player アセットを割り当てます。

    13-connect-media-player_ue5.png

  14. メイン ツールバー で [Blueprints] ボタンをクリックして、 Open Level ブループリント を選択します。

    14-open-level-blueprint_ue5.png

    メディア エディタでビデオをプレイしながら、ゲームプレイ中にプレイするために、プレイリストを開いてプレイを開始できるようにする必要があります。

  15. MyBlueprint ウィンドウで、Media Player Reference 型の MediaPlayer という Variable を作成し、[Default Value]Media Player アセットに設定します。

    15-media-player-compile_ue5.png

    Default Value を設定するために、ブループリントを コンパイル する必要があります。

  16. グラフの中で 1 キーボード イベントを追加して Ctrl を押しながら MediaPlayer 変数をグラフへドラッグします。

    16-media-player-blueprint_ue5.png

  17. MediaPlayer 変数を引き出して Open Playlist Index (In PlaylistMyPlaylist に設定) を使って 1 keyboard event の Pressed に接続します。

    17-blueprint-open-playlist_ue5.png

    プレイヤーが 1 キーボード イベントを押すと、プレイリストの最初のビデオでプレイリストが開いてプレイが始まります。 インデックスは、Media Playlist アセット (下図) 内で指定したプレイリストのインデックス順序を参照し、プレイリストの最初のビデオが 0 となるゼロベースとなります。 Open Playlist Index ノードを使って、インデックス値を入力すれば、プレイリストを使って開くファイルを指定することができます。

    18-array-elements_ue5.png

  18. 右クリックして 2 および 3 キーボード イベントを右クリックして Index 1Index 2Open Playlist Index にそれぞれを追加します。

    19-index-playlist_ue5.png

    この設定により、1 を押すとプレイリストの最初のファイルが開き、2 を押すと 2 番目、3 は 3 番目のファイルが開きます。

  19. 右クリックして追加して Previous および Next ノードを呼び出すために Left および Right キーボード イベント、0Open Playlist に追加します。

    20-target-in-playlist_ue5.png

    Previous および Next ノードはそれぞれプレイリストの中で前のビデオおよび次のビデオへジャンプします。一方 Open Playlist ノードはプレイリストがインデックス 0 で開いた時 (あるいはプレイリストの開始時) に同じ機能を実行します。 これらのノードを使うと、Left および Right 矢印キーボード キーでプレイリストを循環し、0 キーでプレイリストを最初から開くことができます。

  20. Level ブループリント を終了して、[Play] ボタンをクリックしてエディタで再生します。

最終結果

エディタで再生する場合、1230 キーを押すと、指定したインデックスで再生を開始します (適用する場合)。

ビデオが終了すると、プレイリストの次のビデオへ自動的にジャンプします。Loop を有効にすると、プレイリストの最後のビデオのプレイが終った時にプレイリストの最初に戻ります。 ビデオのプレイ中、Left あるいは Right 矢印キーを押してプレイリストの前または次のビデオにジャンプします。または 123 キーを押すとプレイリストのビデオへ直接ジャンプします。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル