Motion Design 連携
Motion Design は Unreal Engine に付属するプラグインで、ローワーサード、ティッカー、フルスクリーングラフィックス、インタースティシャル、スポーツのブランディングなどの放送用グラフィックスを作成し、プレイアウトするためのものです。専用のデザインキャンバス、In と Out のアニメーション用の独自のシーケンサー、そしてそれらのグラフィックスを 1 つ以上のチャネルでプレイアウトする Broadcast ウィンドウを備えています。
Porta Motion Design は、Porta とこのプラグインをつなぐものです。Unreal Engine の組み込みのランダウンを使用する代わりに、Motion Design レベルに対して Porta テンプレートを作成し、オペレーターが必要とするプロパティを公開して、Porta ページからグラフィックを駆動します。グラフィックの表示と非表示を切り替えたり、そのテキスト、画像、色をライブで変更したりできます。各テンプレートまたはページは、1 つの Motion Design レベルを制御します。
対応バージョン
Section titled “対応バージョン”Motion Design は Unreal Engine 5.4 以降に付属しています。Porta Unreal プラグインは Unreal Engine 5.3〜5.8 に対応しているため、Motion Design のワークフローには 5.4 以降と、以下で説明する PortaAvalanche プラグインが必要です。
この機能を使用するには、Porta Unreal プラグインについての知識が必要です。
セットアップの概要
Section titled “セットアップの概要”Plugins ディレクトリには、Porta Unreal プラグインのすべてのプラグインに加えて PortaAvalanche が必要です。PortaAvalanche は Porta Motion Design プラグインで、Motion Design の機能を使用する予定がある場合にのみ必要です。
Config/DefaultPortaMotionDesign.ini には次の 3 つの設定があります。
- AutoStartMotionDesignPixelStream -
Trueの場合、Porta は指定された Motion Design チャネルでピクセルストリーミングを自動的に開始します。 - MotionDesignPixelStreamChannel - ピクセルストリーミングに使用する Motion Design チャネル。
- EditorMode -
Trueの場合、Play In Editor がアクティブでないときでも Porta の接続が実行されます。これをTrueに設定するのが、Motion Design を使用する標準的な方法です。
Motion Design の使用
Section titled “Motion Design の使用”Motion Design アセットは、特別な方法でセットアップされたレベルです。作成するには、File > New Level に移動します。Motion Design テンプレートまたは Empty Level のいずれかを使用できます。Empty Level を選択した場合は、上部の行にある Motion Design ボタンをクリックして、レベルを Motion Design に切り替えます。
Motion Design エディターを開いたら、いくつかの要素を画面にドラッグします。Motion Design アセットには Remote Control Preset が組み込まれているため、それらの要素をクリックすると、Motion Design を使用しない場合と同じ方法でプロパティを公開できます。
Motion Design にはシーケンサーもあり、レベルシーケンスとほぼ同じように動作します。レイアウトはバージョンによって異なります。Unreal Engine 5.7 では、Motion Design タブでさまざまなアニメーションを選択したり、新しいアニメーションを作成したりできます。デフォルトでは、アセットが表示されるときと非表示になるときに、それぞれ In と Out のアニメーションが再生されます。
Broadcast
Section titled “Broadcast”Motion Design アセットの動作を確認するには、下部にある Broadcast ボタンをクリックして Broadcast ウィンドウを開きます。
このウィンドウには 1 つ以上のチャネルが表示されます。Porta はこれらのチャネルを個別に指定して、異なるプレイアウトを制御できます。新しいチャネルは New Channel ボタンで作成します。
Porta による制御
Section titled “Porta による制御”Porta は Unreal Engine の組み込みのランダウンを使用しません。代わりに、Porta テンプレートを使用して Motion Design レベルを直接制御します。各テンプレートまたはページは、1 つの Motion Design レベルを制御できます。
Porta から Motion Design を制御するには、新しいテンプレートを作成し、Make a Motion Design Template を選択します。このオプションが表示されない場合は、Edit > Settings で連携を有効にします。
テンプレートを作成したら、他のテンプレートと同じ方法でそのテンプレートのページを作成できます。ページを再生すると、Unreal Engine の Broadcast ウィンドウに表示されます。選択されるチャネルは [Porta Channel] > [Motion Design Channel] です。ページには Play、Continue、Stop ボタンもあります。Play はページを表示し、Stop はページを非表示にします。Continue は、一時停止を含むアニメーションを再開します。以下で説明する Transition Logic が導入されてからは、Continue が必要になる場面は少なくなりました。
すべて異なるレイヤー上にあれば、同じチャネル内で複数の Motion Design アセットを同時に再生できます。レイヤーを設定するには、まず Motion Design Tag Collection を作成します。
そのアセット内に、必要なだけタグを追加します。Motion Design にタグを設定するには、Transition Logic の横にある 3 つのドットをクリックし、下矢印をクリックしてタグアセットを選択します。
その下のドロップダウンで、タグの 1 つをレイヤーとして選択できます。
Transition Logic
Section titled “Transition Logic”Transition Logic は、ページを切り替えたり、同じページ内でコンテンツを切り替えたりしたときに何が起こるかを処理します。Transition Logic には、待機する一連の条件と、その条件を満たしたときに実行するアクションがあります。最近のバージョンの Unreal Engine では、ほとんどのユースケースでデフォルトの Transition Logic の設定で十分です。デフォルトでは、ページが非表示になるのを待ってから Out アニメーションを再生し、同時に表示されるページの In アニメーションを再生します。これを変更するには、上部にある Transition Logic ボタンをクリックします。ここからレイヤーを変更することもできます。
ピクセルストリーミングと Porta のプレビュー
Section titled “ピクセルストリーミングと Porta のプレビュー”Motion Design では、ピクセルストリーミングを使用して、いずれかのチャネルを Porta に送信することもできます。これを自動的に開始するには、DefaultPortaMotionDesign.ini の設定を変更します。
AutoStartMotionDesignPixelStream=TrueMotionDesignPixelStreamChannel=AvalancheChannel(Channel_0 or similar)次に、Porta の Preview タブで Porta チャネルを選択していることを確認します。これは Porta チャネルであり、MotionDesignPixelStreamChannel に設定した Channel_0 の値ではありません。ページを再生すると、プレビューウィンドウに表示されるようになります。
通常の Unreal Engine レベルでの Motion Design
Section titled “通常の Unreal Engine レベルでの Motion Design”Motion Design のグラフィックスは、別のレベル内のテクスチャ上に表示できます。これは、Motion Design チャネルの出力先を Unreal Engine のレンダーターゲットにすることで行います。これをセットアップするには、まずレンダーターゲットを作成します。
次に、Broadcast ウィンドウで、いずれかのチャネルの出力先を Motion Design Render Target Media Output に設定します。それをクリックし、Details（詳細）パネルで、作成したレンダーターゲットを設定します。
そのレンダーターゲットを使用するには、レンダーターゲットを入力として受け取るマテリアルを作成し、シーン内のサーフェスに適用します。マテリアルの簡単な例を以下に示します。
これで、そのチャネルを開始して Motion Design シーンを再生するたびに、そのシーンがマテリアルに表示されます。