メディア フレームワークのクイック スタート

Media Framework ツールを使ってゲーム レベル内で映像をすぐに追加およびプレイするための操作ガイドです。

00-final-result.png

操作ガイドを最後まで終えると、レベル内で 1 つのテレビで異なるコンテンツを再生し、隣に立ってキーを押してオンオフを操作できるようになります。

目標

メディア フレームワーク クイックスタート ガイドでは、レベル内の映像の再生およびテレビ (TV) のセットアップを行います。さらに、ブループリントでもテレビのセットアップを行うので、ボタンを押してテレビのコンテンツをオンにできます。[Details (詳細)] パネルでテレビで再生されるコンテンツをすぐに変更できるように Media Framework 変数を公開します。メディア フレームワークが初めての方、もしくはレベル内のスタティックメッシュ上での映像の再生方法を学びたい方にぴったりのガイドです。

このガイドでは、テレビで再生する映像の効果を実現するために、マテリアル および ブループリント をいくつかセットアップします。予備知識があると望ましいですが、必須ではありません。

目的

このチュートリアルを終了すると、デベロッパーは次の手順を理解できます。

  • メディアのインポート方法および様々なメディア ソースの使用方法

  • メディア ファイルを再生するためのメディア テクスチャを統合するマテリアルの作成方法

  • ブループリントを使ってメディアの再生を開始および停止する方法

  • 使用するメディア ソースを指定できる TV ブループリントの作成方法

1 - プロジェクトおよびマテリアルの設定

  1. ThirdPerson ブループリント テンプレートを使用して新しい Game カテゴリから新しいプロジェクトを作成します。

  2. 機能別コンテンツ をご使用の端末に展開し、すべてのコンテンツをエンジンにインポートします。

    01-sample-content_ue5.png

    または、すべてのサンプル コンテンツを維持する新しいフォルダを作成できます。テクスチャ アセットに基づいて、マテリアル が自動的に作成されます。

  3. M_TV_Inst マテリアルで、Vector Parameter ノードを削除し、Texture Sample を追加して Sample Type を External に設定します。

    02-texture-sample-external_ue5.png

  4. Texture Object Parameter を追加して「TV_Texture」と名前を付けて、Tex ピンを使って Texture Sample へつなぎます。

  5. TV_Texture Param Tex Object1 の場合、Texture を新しい Media Texture に変えて「MediaPlayer_01_Video」と名前を付けます。

    03-new-media-texture_ue5.png

    クリックしてフルサイズで表示

  6. 虫眼鏡アイコンをクリックしてブラウズし MediaPlayer_01_Video アセットを開きます。

    04-media-player-01-video_ue5.png

    テクスチャ サンプルまたはテクスチャ オブジェクトを Electra Media Player で使用する場合は、[Sampler Type] を [Color] に設定します。

    05-samler-type-color_ue5.png

  7. [Media Player] ドロップダウン メニューをクリックして「MyMediaPlayer」という名前で Media Player アセットを作成します。

    06-new-media-player_ue5.png

    [Create Media Player (メディア プレイヤーを作成する)] ポップアップ メニューが表示されます。ステップ 5 ですでに作成しているので Media Texture を作成する必要はありません。[Ok] をクリックします。

    07-media-texture-asset_ue5.png

  8. MyMediaPlayer アセットを開いて「Gideon_1080p_H264」ファイルをダブルクリックすると映像の再生が開始します。

    08-media-player_ue5.png

    クリックしてフルサイズで表示

  9. M_TV_Inst マテリアルで、TexCoord を追加して VTiling を 2.0 に設定し、Texture Sample の UVs につなぎます。

    09-tex-coord-vtilling_ue5.png

  10. もう 1 つ TextureSample を追加して Texture を T_TV_M2 アセットに設定します。

    10-texture-sample-t-tv_ue5.png

  11. 前のステップの Texture を使って LinearInterpolate ノードを Green チャンネル経由で Alpha につなぎます。

    11-texture-sample-lerp_ue5.png

  12. 残りのピンを以下のようにつなぎます。

    12-blueprint-lerp_ue5.png

    クリックしてフルサイズで表示

このセクションの結果

Media Player および関連する Media Texture アセットを使って、メディアを再生するマテリアルを設定しました。コンテンツ ブラウザ で TV メッシュを開くと、画面は黒く表示されます (白の場合もあります)。

13-tv-settings_ue5.png

プレビューするには、Media Player アセットを開いて Media Source をダブルクリックします。ここで、メディアがビューポートのスタティックメッシュの TV 上で再生されます。

14-two-screens-tv_ue5.png

クリックしてフルサイズで表示

2 - TV ブループリント - コンポーネントの設定

このステップでは、レベル内でテレビを動かすために必要なテレビのスタティックメッシュと残りのコンポーネントを使用するブループリントを作成します。

  1. コンテンツ ブラウザ で [Add New (新規追加)] ボタンをクリックして、Blueprint クラス を選択します。

    15-add-blueprint-class_ue5.png

  2. [Pick Parent Class] メニューで [Actor] を選択し、そのブループリントに「「TV_Blueprint」と名前を付けます。

    16-actor-class_ue5.png

  3. TV_BP アセットで、[Add Component (コンポーネントを追加)] ボタンをクリックして Static Mesh を選択します。

    17-add-static-mesh_ue5.png

  4. 選択した Static Mesh の [Details (詳細)] パネルで SM_TV を Static Mesh を使用するように設定します。

    18-static-mesh-tv_ue5.png

  5. Box Collision コンポーネントを追加して、テレビの正面のボックスのサイズを以下のように変更して移動します。

    19-box-collision_ue5.png

    クリックしてフルサイズで表示

    プレイヤーがテレビの正面に来てテレビを付けることができることを示すために Box Collision を使います (テレビの後ろ側にいる時はテレビをつけられないようにします)。

  6. MediaSound コンポーネントを追加し、Media Player プロパティの [Details (詳細)] パネルで MyMediaPlayer アセットを割り当てます。

    20-media-sound_ue5.png

    このアセットは、Media Player 内で定義された Media Source と関連するオーディオを再生するために使用します。

  7. Box Collision の [Details (詳細)] パネルで、On Component Begin Overlap イベントと On Component End Overlap イベントの両方を追加します。

    21-add-component-overlap_ue5.png

このセクションの結果

TV ブループリントが設定できました。次は、スクリプト化された機能を追加して、キーを押すことでテレビの隣に立った時にテレビを付けることができるようにします。

3 - TV ブループリント - 設定をスクリプト化する

最後のステップでは、プレイヤーがボタンを押してテレビの入切ができるようにするスクリプト化された機能を追加します。

  1. TV ブループリントの Event Graph で、Get Player Controller、Enable Input、Disable 入力を以下のようにつないで使用します。

    22-player-blueprint_ue5.png

    クリックしてフルサイズで表示

  2. グラフ内で右クリックし、P Keyboard Event (または好きな押下キー) を追加し、Pressed を Flip Flop ノードにつなぎます。

    23-p-keyboard_ue5.png

  3. グラフ内で右クリックして Context Sensitive を無効して、Open Source ノードを追加します。

    24-open-source_ue5.png

  4. Open Source ノードで Target ピンを右クリックして、MediaPlayerforVideo と名前を付けます。

    25-promote-to-variable_ue5.png

    デフォルトで、Media Player を Play on Open に設定します。これでメディアが開かれると再生されます。

    Play on Open を無効にした Media Player には、Open Source コールの前に Play ノードを使用することができます。

  5. Media Source を変数に昇格し、「SourceToOpen」と名前を付けます。

  6. Variables リストで、両方の変数の目のアイコンをクリックして Instance Editable に変えて、以下のようにつなぎます。

    26-open-icons_ue5.png

  7. Close ノードを追加して FlipFlop の B ピンにつなぎ、Target を MediaPlayerforVideo に設定します。

    27-close-target_ue5.png

  8. TV_BP をレベルにドラッグして、[Details (詳細)] パネルで MyMediaPlayer アセットと Gideon_1080p_H264 アセットを割り当てます。

    28-tv-bp-details_ue5.png

    プレイヤーがテレビの正面に来てテレビを付けることができることを示すために Box Collision を使います (テレビの後ろ側にいる時はテレビをつけられないようにします)。

  9. MyMediaPlayer アセットで、Loop オプションを有効にします。

    29-loop-enable_ue5.png

    これにより、映像のいったん再生が始まると、終了の指示があるまで自動的にループします。

  10. [Play (再生)] ボタンをクリックしてレベルで再生します。

最終結果

レベルで再生してテレビへ近づき、P ボタンを押すと割り当てられたメディアの再生が開始します。もう一度 P を押すと停止します

4 - 応用編

メディア フレームワーク ツールを使って自分のプロジェクトに少し応用してみましょう。

  • プレイヤーがテレビの 再生の調節 ができるようにする。

  • メディア プレイリスト をメディア ソースとして使って、プレイヤーがテレビの "チャンネルを変更" できるようにする。

  • Media Player、Media Sound、Media Source アセットを使って 2 つ目の TV ブループリントをレベルに追加する

このページは Unreal Engine の前のバージョン用です。現在リリースされている Unreal Engine 5.2 に対して更新は行われていません。
Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル