Motion Design Integration

Motion Design is a plugin that ships with Unreal Engine for authoring and playing out broadcast graphics such as lower thirds, tickers, full-screen graphics, interstitials, and sports branding. It gives you a dedicated design canvas, its own sequencer for In and Out animations, and a Broadcast window that plays those graphics out on one or more channels.

Porta Motion Design is the link between Porta and that plugin. Instead of using Unreal Engine’s built-in rundowns, you build a Porta template against a Motion Design level, expose the properties an operator needs, and drive the graphic from a Porta page: take it in, take it out, and change its text, images, and colours live. Each template or page controls one Motion Design level.

Supported versions

Motion Design ships with Unreal Engine 5.4 and later. The Porta Unreal plugin supports Unreal Engine 5.3 to 5.7, so Motion Design workflows need 5.4 or later, plus the PortaAvalanche plugin described below.

This feature requires familiarity with the Porta Unreal plugin.

Setup overview

Plugins

You will need all of the plugins from the Porta Unreal plugin, plus PortaAvalanche, in your Plugins directory. PortaAvalanche is the Porta Motion Design plugin, and is only needed if you plan to use Motion Design features.

Note

Avalanche was the previous code name for Motion Design. You will still see the Avalanche name in some plugin, setting, and channel names, such as PortaAvalanche and AvalancheChannel. These all refer to Motion Design.

Configuration

Config/DefaultPortaMotionDesign.ini contains three settings:

• AutoStartMotionDesignPixelStream - If True, Porta automatically starts pixel streaming on the specified Motion Design channel.
• MotionDesignPixelStreamChannel - The Motion Design channel to pixel stream from.
• EditorMode - If True, the Porta connection runs even when Play In Editor is not active. Setting this to True is the default way to use Motion Design.

Using Motion Design

A Motion Design asset is a level that is set up in a special way. To create one, go to File > New Level. You can either use the Motion Design template or Empty Level. If you choose Empty Level, click the Motion Design button in the top row to switch the level to Motion Design.

Once you have the Motion Design editor open, drag some elements onto the screen. Motion Design assets have Remote Control Presets built in, so when you click on those elements you can expose properties in the same way you would without Motion Design.

Motion Design also has a sequencer, which works in much the same way as level sequences. The layout varies between versions; in Unreal Engine 5.7, a Motion Design tab lets you pick between different animations or create new ones. By default, the In and Out animations play when the asset is taken in or out.

Broadcast

To see the Motion Design asset in action, click the Broadcast button at the bottom to open the Broadcast window:

This window shows one or more channels. Porta can address each of these channels individually to control different playouts. Create new channels with the New Channel button.

Porta control

Porta does not use Unreal Engine’s built-in rundowns. Instead, it uses a Porta template to control a Motion Design level directly. Each template or page can control one Motion Design level.

To control Motion Design from Porta, create a new template and choose Make a Motion Design Template. If this option does not appear, activate the integrations in Edit > Settings:

Once you have made a template, you can create a page for it in the same way you would for any other template. When you play the page, it appears in the Broadcast window in Unreal Engine. The chosen channel is [Porta Channel] > [Motion Design Channel]. Pages also have Play, Continue, and Stop buttons. Play takes the page in, Stop takes it out, and Continue resumes any animations that had pauses in them. Continue is less necessary since the introduction of Transition Logic, which is described below.

Layers

Multiple Motion Design assets can be played at once inside the same channel, as long as they are all on different layers. To set layers, first create a Motion Design Tag Collection:

Inside that asset, add as many tags as you wish. To set the tag on Motion Design, click the three dots next to Transition Logic, then click the down arrow to pick your tags asset:

The dropdown below then lets you pick one of your tags to be your layer.

Transition Logic

Transition Logic handles what happens when you switch pages or switch content within the same page. It has a series of conditions it waits for, and actions it takes when it meets those conditions. In recent versions of Unreal Engine, the default Transition Logic setup is sufficient for most use cases. By default, it waits for the page to be taken out, then plays the Out animation, along with the In animation for the page being taken in. To change this, click the Transition Logic button at the top. You can also change the layer from here.

Pixel streaming and Porta preview

Motion Design can also use pixel streaming to send one of its channels to Porta. To start this automatically, change your settings in DefaultPortaMotionDesign.ini:

AutoStartMotionDesignPixelStream=True
MotionDesignPixelStreamChannel=AvalancheChannel(Channel_0 or similar)

Then make sure you pick the Porta channel in the Preview tab in Porta. This is the Porta channel, not the Channel_0 value you set for MotionDesignPixelStreamChannel. When you play pages, they then appear in the preview window.

Motion Design in a regular Unreal Engine level

Motion Design graphics can be displayed on a texture within another level. This is done by having a Motion Design channel output to an Unreal Engine render target. To set this up, first create a render target:

Then in the Broadcast window, set one of the channels to output to Motion Design Render Target Media Output. Click it, then in the Details panel set the render target you just created:

To use that render target, make a material that takes the render target as an input, and apply it to a surface in your scene. Here is a simple example of a material:

Now, whenever you start that channel and play a Motion Design scene, that scene appears in the material.

Further reading

• Unreal Engine’s Developer Community Course
• Motion Design Quickstart Guide