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

この章では、Full ScreenやUIでSofdec2ムービを再生する方法をご紹介します。

Full Screen でのムービ再生

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

1.Sofdec2ムービーをインポートして、Manaアセットを準備

チュートリアル 入門編01 Sofdec2 ムービーの単純再生」の手順に従って、フルスクリーン用のムービーをUE4にインポートしてください。
マテリアルを作成する際は、作成ダイアログで"component textures"を選択してください。

マテリアルの編集から、マテリアルの"Result Node" を選択します。

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

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

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

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

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

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

3.ウィジェットを編集

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

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

4.レベルブループリントの編集

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

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

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

Mana (ManaComponent オブジェクト参照)ムービーを再生するためのManaComponentを所有します。
Widget (FullScreenWidget オブジェクト参照)ムービーを表示するためのウィジェットを所有します。
Is Playing (ブーリアン)再生ステータスを保持します。

「Mana Componentを追加」ノードの詳細パネルでMovie Textureを設定します。

ムービー再生が終了すると、ムービー再生ステータスが"Playend"になるので、その時にFullScreenWidgetを非表示にします。

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

5.実行

シーンを実行してPキーを押すとUIでムービーを表示および再生し、もう一度Pキーを押すとUIを停止および非表示にします。
ムービ再生が終わると、自動でFullScreenWidgetを非表示にします。

FullScreenWidgetの画像で、ブラシの「Image」ソースとしてManaTextureを直接使用することで、マテリアルを作成せずにムービーを再生することができます。

ManaTextureの詳細で「Render To Texture」を有効にしておきます。

UIでのムービ再生

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

UIでのムービ再生方法

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

ウィジェットデザイナー

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


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

ユーザーがUIを制御できるように制御モードを設定します。


レベルブループリント

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

UE4のUIデザインに関する詳細はUMGマニュアルを参照してください。

Unreal Engine マニュアル参照

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

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