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

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

00-final-result.png

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

目標

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

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

目的

このチュートリアルを修了すると、デベロッパーは次のことを習得します。

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

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

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

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

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

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

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

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

    Import all content

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

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

    Add a Texture Sample

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

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

    画像をクリックすると拡大表示されます。

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

    Open Media Player asset

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

    Set the Sampler Type

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

    画像をクリックすると拡大表示されます。

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

    Click OK

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

    画像をクリックすると拡大表示されます。

  9. M_TV_Inst マテリアルで、TexCoord を追加して VTiling2.0 に設定し、Texture SampleUVs につなぎます。

    画像をクリックすると拡大表示されます。

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

    画像をクリックすると拡大表示されます。

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

    Add a LinearInterpolate

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

    画像をクリックすると拡大表示されます。

このセクションの結果

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

13-tv-settings_ue5.png

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

画像をクリックすると拡大表示されます。

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

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

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

    Add new Blueprint Class

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

    Pick Parent Class

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

    Add Component

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

    画像をクリックすると拡大表示されます。

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

    画像をクリックすると拡大表示されます。

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

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

    画像をクリックすると拡大表示されます。

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

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

    Add Events

このセクションの結果

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

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

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

  1. TV ブループリントの イベント グラフ で、Get Player ControllerEnable InputDisable Input を以下のようにつないで使用します。

    画像をクリックすると拡大表示されます。

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

    Add P Keyboard Event

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

    Add an Open Source

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

    Promote to Variable

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

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

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

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

    Click the eye icon

  7. Close ノードを追加して FlipFlopB ピンにつなぎ、TargetMediaPlayerforVideo に設定します。

    Add a Close node

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

    画像をクリックすると拡大表示されます。

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

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

    Enable the Loop option

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

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

最終結果

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

4 - 応用編

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

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

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

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

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