CRI Sofdec2(Unreal Engine4)
中級編05　Full Screen再生とUIでのムービ再生の方法

Full Screen でのムービ再生

UMG（Unreal Motion Graphics）を使うことで、画面全体をカバーする画像をUIレイヤに貼り付けて表示することができます。
具体的な手順は以下のとおりです。

１．Sofdecムービーをインポートして、Manaアセットを準備

「チュートリアル 入門編01　Sofdec ムービーの単純再生」の手順に従って、フルスクリーン用のムービーをUnreal Engineにインポートしてください。

マテリアルの編集から、マテリアルの"Result Node" を選択します。
詳細パネルで「Material Domain」を"User Interface"に変更してください。
この操作により、ムービーマテリルがUMGウィジットで使用できるようになります。

注意：必要に応じて、ManaColorSpaceConverterからの出力を結果ノードのFinal color（アルファムービーが使用されている場合は、不透明度も）に再リンクする必要があります。

２．シーンに新しいUserWidgetブループリントを追加

コンテンツブラウザで新しいブループリントクラスを作成します。

"全てのクラス"を展開して、 "Visual/Widget/UserWidget"を選択します。

作成したアセットの名前を "FullScreenWidget"に変更します。

３．ウィジェットを編集

「パレット」パネルで「Image」ウィジェットを検索し、デザイナーにドラッグ&ドロップします。

デザイナーでImage ウィジェットを選択して、詳細パネルで「Appearance/Brush」を展開し、「Image」の欄にムービーマテリアルを設定します。

４．レベルブループリントの編集

レベルブループリントを開きます。 (「ブループリント」ボタン -> 「レベルブループリントを開く...」)
下図のブループリントコードを追加してください。

こちらからブループリントコードをコピーできます：https://blueprintue.com/blueprint/8zvvholj/

2つの変数を作成します。

オブジェクトタイプ	説明
Mana (Mana Player オブジェクト参照)	ムービーを再生するためのMana Playerを所有します。
Widget (FullScreenWidget オブジェクト参照)	ムービーを表示するためのウィジェットを所有します。

「Mana Player」ノードの詳細パネルで「Mana」を設定します。

「Set Texture」ノードの「In Mana Texture」を設定します。
「Open Movie Source」ノードの「In Mana Movie」を設定します。

ムービー再生が終了すると、「OnEndReached」イベントが発生するので、その時にFullScreenWidgetを非表示にします。

またこのブループリントでは新たに以下の変数を追加します。

• Is Playing (ブーリアン)： 再生ステータスを保持します。

UIでのムービ再生

上述の「Full Screenでのムービ再生」の手順でUIを作成できます。
その後、UMGで必要なUIオブジェクトを追加して、アクションを接続していきます。
ここでは、再生ボタンと停止ボタンを持つUIを例に紹介します。

UIでのムービ再生方法

UIにボタンを追加します。

ウィジェットデザイナー

ブループリントで、「Mana Player」の参照の変数を追加し、ボタンをクリックした時のイベントのコードを追加します。
「Stop」ボタンを押すとMana Pauseが呼び出され、「Play」ボタンを押すとMana ReWindが呼び出されます。

コンテンツブラウザの「追加」->「ユーザーインターフェイス」->「ウィジェットブループリント」を選択してください。

ここでは名前を「UiPlayerWidget」とします。

「パネル」->「Canvas Panel」をドラッグ&ドロップします。

次に「一般」->「Image」をドラッグ&ドロップします。

同様に「一般」->「Button」をドラッグ&ドロップします。
今回は動画の再生と停止を操作する「Stop」と「Play」の2つを用意します。

次にボタンに文字を付けます。
「一般」->「テキスト」を配置したボタンの上にドラッグ&ドロップします。

その後「詳細」タブの「コンテンツ」->「Text」で表示する文字を入力します。

次に「階層」からButtonの名前を変更します。「Stop」と「Play」がどちらのボタンかわかる名前であれば構いません。
（今回は「Button_Stop」と「Button_Play」としています）

ウィジェットブループリント

ユーザーがUIを制御できるように制御モードを設定します。
現在開いている「ウィジェットデザイナー」の右上から「グラフ」を選択します

レベルブループリント
こちらからブループリントコードをコピーできます。
https://blueprintue.com/blueprint/j_bfoawd/

Unreal Engine マニュアル参照

UMGとアクターコンポーネントの詳細については、Unreal Engineのドキュメントを参照してください。

UMG　http://api.unrealengine.com/JPN/Engine/UMG/
Actor Component　http://api.unrealengine.com/JPN/Programming/UnrealArchitecture/Actors/Components/