メディアフレームワークのクイックスタート | Unreal Engine 4.27 ドキュメンテーション

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

目標

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

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

目的

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

メディアのインポート方法および様々なメディアソースの使用方法
メディアファイルを再生するためのメディアテクスチャを統合するマテリアルの作成方法
ブループリントを使ってメディアの再生を開始および停止する方法
使用するメディアソースを指定できる TV ブループリントの作成方法

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

ThirdPerson ブループリントテンプレートを使用して新しい Game カテゴリから新しいプロジェクトを作成します。
機能別コンテンツをご使用の端末に展開し、すべてのコンテンツをエンジンにインポートします。

または、すべてのサンプルコンテンツを維持する新しいフォルダを作成できます。テクスチャアセットに基づいて、マテリアル が自動的に作成されます。
M_TV_Inst マテリアルで、Vector Parameter ノードを削除し、Texture Sample を追加して Sample Type を External に設定します。
Texture Object Parameter を追加して「TV_Texture」と名前を付けて、Tex ピンを使って Texture Sample へつなぎます。
TV_Texture Param Tex Object1 の場合、Texture を新しい Media Texture に変えて「MediaPlayer_01_Video」と名前を付けます。

クリックしてフルサイズで表示
虫眼鏡アイコンをクリックしてブラウズし MediaPlayer_01_Video アセットを開きます。

テクスチャサンプルまたはテクスチャオブジェクトを Electra Media Player で使用する場合は、[Sampler Type] を [Color] に設定します。
[Media Player] ドロップダウンメニューをクリックして「MyMediaPlayer」という名前で Media Player アセットを作成します。

[Create Media Player (メディアプレイヤーを作成する)] ポップアップメニューが表示されます。ステップ 5 ですでに作成しているので Media Texture を作成する必要はありません。[Ok] をクリックします。
MyMediaPlayer アセットを開いて「Gideon_1080p_H264」ファイルをダブルクリックすると映像の再生が開始します。

クリックしてフルサイズで表示
M_TV_Inst マテリアルで、TexCoord を追加して VTiling を 2.0 に設定し、Texture Sample の UVs につなぎます。
もう 1 つ TextureSample を追加して Texture を T_TV_M2 アセットに設定します。
前のステップの Texture を使って LinearInterpolate ノードを Green チャンネル経由で Alpha につなぎます。
残りのピンを以下のようにつなぎます。

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

このセクションの結果

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

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

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

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

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

コンテンツブラウザ で [Add New (新規追加)] ボタンをクリックして、Blueprint クラス を選択します。
[Pick Parent Class] メニューで [Actor] を選択し、そのブループリントに「「TV_Blueprint」と名前を付けます。
TV_BP アセットで、[Add Component (コンポーネントを追加)] ボタンをクリックして Static Mesh を選択します。
選択した Static Mesh の [Details (詳細)] パネルで SM_TV を Static Mesh を使用するように設定します。
Box Collision コンポーネントを追加して、テレビの正面のボックスのサイズを以下のように変更して移動します。

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

プレイヤーがテレビの正面に来てテレビを付けることができることを示すために Box Collision を使います (テレビの後ろ側にいる時はテレビをつけられないようにします)。
MediaSound コンポーネントを追加し、Media Player プロパティの [Details (詳細)] パネルで MyMediaPlayer アセットを割り当てます。

このアセットは、Media Player 内で定義された Media Source と関連するオーディオを再生するために使用します。
Box Collision の [Details (詳細)] パネルで、On Component Begin Overlap イベントと On Component End Overlap イベントの両方を追加します。

このセクションの結果

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

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

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

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

クリックしてフルサイズで表示
グラフ内で右クリックし、P Keyboard Event (または好きな押下キー) を追加し、Pressed を Flip Flop ノードにつなぎます。
グラフ内で右クリックして Context Sensitive を無効して、Open Source ノードを追加します。
Open Source ノードで Target ピンを右クリックして、MediaPlayerforVideo と名前を付けます。

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

Play on Open を無効にした Media Player には、Open Source コールの前に Play ノードを使用することができます。
Media Source を変数に昇格し、「SourceToOpen」と名前を付けます。
Variables リストで、両方の変数の目のアイコンをクリックして Instance Editable に変えて、以下のようにつなぎます。
Close ノードを追加して FlipFlop の B ピンにつなぎ、Target を MediaPlayerforVideo に設定します。
TV_BP をレベルにドラッグして、[Details (詳細)] パネルで MyMediaPlayer アセットと Gideon_1080p_H264 アセットを割り当てます。

プレイヤーがテレビの正面に来てテレビを付けることができることを示すために Box Collision を使います (テレビの後ろ側にいる時はテレビをつけられないようにします)。
MyMediaPlayer アセットで、Loop オプションを有効にします。

これにより、映像のいったん再生が始まると、終了の指示があるまで自動的にループします。
[Play (再生)] ボタンをクリックしてレベルで再生します。

最終結果

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

4 - 応用編

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

プレイヤーがテレビの再生の調節ができるようにする。
メディアプレイリストをメディアソースとして使って、プレイヤーがテレビの "チャンネルを変更" できるようにする。
Media Player、Media Sound、Media Source アセットを使って 2 つ目の TV ブループリントをレベルに追加する