Real-time technology is becoming an increasingly important part of motion graphics and sports. Epic Games partnered with Capacity Studios to deliver a high-quality Broadcast Hype Chamber Sample which demonstrates how to design, develop, and play out numerous animation elements for your esports show.
Enter the Hype Chamber and learn how to drive a sports motion graphics package with advanced blueprinting and data table workflows.
By exploring this sample and this page, you'll learn about:
-
How to use motion graphics animation for live playout or pre-rendered animation. This sample includes 10 motion graphics examples.
-
How to build a highly customizable graphic package where artists can switch 3D models, textures, materials, and lighting, all driven by a single blueprint controller. When you change team names, all the elements in the scene will swap accordingly.
-
How to extend the workflow by adding a new team to the data table.
Getting Started
Download the sample from the Learn tab of the Epic Games Launcher and open the project in Unreal Engine.
Playing Graphics and Animation
In the Unreal Editor's Toolbar, click Play to run the level.
In the World Outliner, select BP_HypeChamber_Controller to open its Details panel. These are options that you can change during Play in Editor mode.
Hypechamber Control
Click Play Graphic to play the 3D graphics and animation.
Click Reset Graphic to reset everything to its initial state.
Change Team ASelect to change the team that appears in the Level. For graphics or modes with two teams, TeamASelect appears on the left side, and Team BSelect appears on the right side.
Mode Select changes what displays in the Level. A different motion graphic and animation is associated with each mode. You have the following options:
-
INT Matchup
-
INT Matchup Infinite
-
INT Team Hype Chamber
-
INT Player Name
-
INT Text
-
INT_Logo
-
FS Open
-
FS Team Hype Chamber Wide
-
FS Team Hype Chamber Close
-
FS Backgrounds
-
BUMP Team Victory
Hypechamber Advanced
The Hype Chamber Controller has the following settings for customizing media output and post processing when playing the motion graphics and animations.
| Parameter | Description |
|---|---|
| Disable SDI | Disable active media capture output. |
| Enable SDI | Enable media capture output based on Media Output Generic. |
| Update Advanced | Update quality and ray tracing settings to values set by the Hype Chamber Controller. |
| Update Logos | Update background logos and colors featured in screenwalls. |
| Use Mode Select | When enabled, you can control which scene is used with the Hype Chamber Controller. You'll need to disable this before using Movie Render Queue. |
| Screen Mode | The type of content to fill the Hype Chamber Screens. Defaults to a render target of a motion graphics scene. |
| Master Post Process | A reference to the scene post processing volume with the highest priority. |
| Media Output Generic | Defines the media capture output of content. Defaults to use a Blackmagic SDI configuration. |
| Resolution | The output resolution size for the media capture. |
| Quality | The sg.resolution quality command input. |
| Max Roughness | Maximum roughness amount of the Post Process volume ray tracing. |
| Max Bounces | The maximum number of bounces of the Post Process volume ray tracing. |
| Samples Per Pixel | Number of samples per pixel of the Post Process volume ray tracing. |
Using Remote Control to Play Graphics and Animations
In EsportsSample/_ArtistElements/Blueprints, double-click the RC_Esports Remote Control Preset to open it in the Remote Control Panel. The parameters in the BP_Esports_Controller's Details panel are the same parameters exposed in the RC_Esports preset.
Launch the Remote Control Web Application to control the team graphics and text remotely by entering the URL 127.0.0.1:7000 on your local machine, or your computer's IP address with port 7000 on a second device. Refer to Remote Control Web Application for more information about using the web application.
Editing Team Themes
To edit the current team themes, in the Content Browser, navigate to EsportsSample/_ArtistElements/Blueprints/Data and double-click DT_Esport_Themes to open it in the Data Table Asset Editor.
Each row is all the data for one team, from the team name to the team's color palette. Click a row and edit its data in the Row Editor to make changes to the team's theme.
To change what parameters define a team's theme, navigate to EsportsSample/_ArtistElements/Blueprints/Structures and double-click ST_RL_Design to open it in the Structure Asset Editor.
In Esports/_ArtistElements/Blueprints, double-click BP_Esport_Controller to open it in the Blueprint Editor. In the UpdateData section, the DT_Esport_Themes data table is looked up by row name to populate the team data in the Level. When you add parameters, make sure they're connected to Assets defined in the TeamAValues and TeamBValues nodes.
Click image for full size.
Creating Your Own Team
Follow these steps to add a new team to the selection.
-
In the Content Browser, navigate to EsportsSample/_ArtistElements/Blueprints/Enums and double-click EN_Teams to open it in the Enum Asset Editor.
-
Click New to add an entry to the Enum.
-
Set the new entry's Display Name to the abbreviated name of the team and Description to the full name of the team. In this example, the new team's Display Name is WIP and its Description is Work in Progress.
-
Navigate to EsportsSample/_ArtistElements/Blueprints/Data and click (+) Add to add a new row.
-
Set the new row's name to the abbreviated name of the team and Team Name to the full name of the team. In this example, the row's name is WIP and the Team Name is Work in Progress.
-
You can now change the Hypechamber Controls in the Level's BP_HypeChamber_Controller to select your new team.
Batch Rendering with Movie Render Queue
In the Content Browser, navigate to EsportsSample/_ArtistElements/Blueprints. Right-click the EUW_VersioningUtility Editor Utility Widget Asset and choose Run Editor Utility Widget.
The Editor Utility Widget opens in a new window.
This widget provides controls for batch rendering sequences with various configurations of teams using Movie Render Queue. The following parameters affect the rendering job.
| Parameter | Description |
|---|---|
| Mode Select | Select which graphic animation should be configured and played when rendering. |
| Target Sequence | The Level Sequence targeted by Mode Select. Can be opened while in the editor to preview graphics. |
| Team AList | The list of teams to be rendered out with the selected graphic. In graphics or modes with two teams, this controls the team featured on the left. |
| Team BList | The secondary list of teams to be rendered out with the selected graphic. In graphics or modes with two teams, this controls the team featured on the right. |
| Text Ver | Selects which version of the text mode animations is used in the renders. The input text defaults to what is currently set as the Text Line 1 and Text Line 2 inputs. |
| Background Ver | Selects which version of the background mode animations is in the renders. |
| Hype Chamber Con | A debug reference to the BP_Hypechamber_Controller in the scene. |
| Render Preset | The Movie Render Queue Render Preset Asset to render jobs. |
| Output Folder | The output directory of the rendered Assets. |
| Pipeline Executor Job | A debug view to show that a valid executor job is showing. |
| Next Render Executor | A debug view to show the next executor job. |
| Queue Index | A debug status of which job is currently being rendered from the Team A and Team B list |
| Job Count | The total count of jobs listed to be rendered. This is based on the number of teams featured in the Team A List. |
Click (+) Start Render to start the render jobs.
