コンテンツにスキップ

Porta Unreal Plugin

このコンテンツはまだ日本語訳がありません。

Porta Unreal Engine integration allows user to control pre-programmed visual effects built in Unreal Engine via Web Control.

Porta projects are currently built in Unreal Engine 5.*

Review the recommended software and hardware specifications for running Unreal Engine 5 here.

This guide aims to outline how to set up Porta to control Unreal Engine. For Unreal Engine 5 documentation and learning resources check out Unreal Engine website.

You will need the following plugins:

  • Remote Control API Plugin
  • Pixel Streaming Plugin (Channel Preview Functionality)
  • Porta Unreal Engine Plugin

Enable Plugins To enable Remote Control API and Pixel Streaming Plugins, in Unreal Engine, navigate to Edit -> Plugins, search for Remote Control API and Pixel Streaming and toggle the plugins on.

To access the latest Porta Unreal Engine Plugin for Unreal Engine, navigate to the Porta web interface -> Help -> Plugins. Upon download, extract files in the “Plugins” folder of the target Unreal Engine folder. Unreal Engine might prompt to relaunch the project to enable the loaded plugin.

Initial Configuration

  • Once enabled, In the Unreal Engine Editor, navigate to Edit -> Project Settings -> Porta section.
    • Connection Settings:
      • Connection URL: Navigate to Porta Interface->File->My Account->Integrations and double click “Socket Server” to reveal the url.
      • Porta Channel: this will be the channel name in Porta to identify this Unreal Engine connection
      • Namespace: leave as default
    • Media:
      • Asset Cache Folder: TBD
      • Porta Api Url: contact your Porta Admin for Api Url
      • Porta Api Key: Navigate to Porta Interface->File->My Account->Integrations and double click “API Key” to reveal the Key.
    • Pixel Streaming: This section enables the pixel streaming used for channel preview. Enable if needed. Note that the port and host specified here will be used in Porta to establish the channel preview connection. Plugin Settings
  • In “Content Drawer”, right-click to create Remote Control Preset. Upon opening the remote control preset asset, parameters will be available for remote control. Click on the eye icon to expose the desired parameters. RCP Setting

Upon exposure, those parameter will be available for control via the Porta configuration.

Further Unreal Engine Configuration

The above section outlines the basic connection, the next section will utilize two sample projects to showcase the graphic control capability of Porta.

Here is a sample project to show how remote control parameter can expose control to Porta.

= 3D Text project

Projects are created by designers ahead of time. Projects include different environments, themes, and assets over different levels, as well as cameras, visual effects, and animations. Blueprints (Unreal Engine’s visual scripting language) are used to bring it all together.

These 3D assets are also referred to as graphics in broadcast terms because they are viewed as graphics onscreen.

Designers expose the parameters of an asset in Unreal Engine and configure them so that they can be controlled from Porta running in a browser. Porta can remotely change these parameters, switching items on and off, changing levels or environments, adjusting lighting, changing an item’s positioning, switching camera views, or triggering animations. Augmented Reality (AR) assets can be also added to levels such as sports players, F1 cars, and weather elements.

Unreal Engine needs to be running in standalone play mode or running RenderStream while using Porta. To connect Porta to Unreal Engine, a binding must be added that syncs content between the two.

To begin, the 3D text item (Text3DActor) is relatively simple to add and the most common element Porta has in Unreal Engine. As a demonstratration of the designer’s workflow you can add a 3D text asset to our level and exposing a parameter that can be used by Porta.

Ensure that you have Unreal Engine 5.* installed. This demo was made using UE5.0.3.

To learn this basic workflow, the project does not need to have any sample content. However, the team has provided a sample project that demonstrates how 3D Text is configured for Porta* which you can use.

If you are planning to use the project for production purposes, you may wish to build an environment with content on at least one level.

Enable the following plugins:

  • Substance plugin
  • 3D Text plugin
  • Remote Control API plugin
  • Pixel Streaming plugin
  • Porta plugin

If you have a sample Porta project some of these plugins may already be enabled. If you are not using a sample project, create a new empty project.

In Epic Games Launcher, launch the Unreal Engine 5.x.

  1. Create a project by selecting the Games category.
  2. Select a Blank template.
  3. In Project Defaults, select Blueprint project with the default settings.
  4. Enter a name for the project.
  5. Click Create.

The Epic Games Launcher creates a new project and opens the project in Unreal Editor.

  1. Select Edit > Plugins.
  2. Type 3D in the search bar.
  3. Click on the checkbox to enable it.
  4. Click on the Restart Now button.
  5. Click Save Selected to save all changes.

Unreal Editor will automatically reopen. Close the Plugins window.

  1. In the Unreal project click + to add an item.
  2. Select All Classes.
  3. Press CTRL + Spacebar to enable search and type “3D”.
  4. Click on Text3D to add it to the level.
  5. In the Text parameter, type “Porta”. UE: Text 3D In the File menu, click Save All.

Expose an asset parameter in Unreal Engine

Section titled “Expose an asset parameter in Unreal Engine”

Ensure that you have enabled the Remote Control API plugin in your project.

  1. Open the Content Drawer and from the Content Browser, click + Add.
  2. Select: Miscellaneous > Remote Control Preset.
  3. Double-click on the new Remote Control Preset in the Content Browser to open it.
  4. Select the Text3D asset in the Outliner.
  5. In the Details panel, click on the 3 vertical dots at the edge of the Text parameter to expand the toolbar.
  6. Click Expose property.

RCP Setting

Connect Porta to control exposed parameter

Section titled “Connect Porta to control exposed parameter”
  1. In Porta, open the Settings panel under the Window menu.
  2. Select the Channels tab.
  3. Click the sync button at the top of the panel to add a new channel.
  4. From the File menu, select New > Template to open the template builder panel.
  5. Select Unreal Template.
  6. Select your channel’s address and click Next.
  7. In the SELECT PRESET box, select the exposed preset from Unreal Engine and click Next.
  8. Select the preset property you wish to control, then click Next. Porta Connect
  9. The selected preset property will be added as components to the template.
  10. Set a default value for the property component.
  11. Click the Save button in the action menu ribbon to save the template. Porta template save
  12. In the pop-up that appears, enter a unique name for the template and click Save. Porta template save modal.png
  13. Return to your playlist by clicking its panel tab. Create a page from this template by clicking the New Page button in the far left of the action menu ribbon.
  14. In the pop-up that appears, double-click on the template you just created to add it as a page to the playlist.
  15. Click the Send now button (play icon) in the page row to update the value in Unreal Engine. Porta Change