Unreal XML Parser to drive Broadcast Graphics

The goal was to build Blueprints that would ingest data from a live source and parse it to drive on-screen Graphics

This was during a time of exploration of using Unreal for broadcast overlays and testing live data being ingested by a computer during the event, There was no specific format mentioned to achieve this, i decided to build a mock design (below) and a simple enough structure that would reflect the goal

Design Layout for test — Test Layout to read from live file

I built an XML structure that would contain 2 players for tennis (or more as its just more plater elements) and their stats and working in online and offline graphics for redundancy. Some of the information needed was;

Full Names
Heights
Flags of Origin
Image paths for large displays of players
numerous String elements
online and offline were for server-supplied images and also a local machine location in case of dropout

XML with notes on what sections are being referred to — Breakdown of the XML Structire

The goal was to have this XML file to be able to be read and parsed within Unreal, and using Blueprints to drive a template layout that would update strings and images from the data received.

Using Parsers for ingest

Image of EasyJsonParser and EasyXMLParser — Available Parsers from the Marketplace

EasXMLParser seemed a simple choice as it does what it does.

Details Panel in Unreal

Here is the details panel after the BP was completed

Core

Live Update: bool for a branch that ticks .1 during runtime
File path: The location to the XML file anywhere on disk Directories
Path: the XML element that contains the offline || in project paths Incoming
Data Path: Points to the incoming set data
Rescale Image Key: the element name of textures that should be rescaled (only one at the moment)
Player Image Width Global: world size
Image Length Direction: Bool for swapping between Horizontal and Vertical scale

DataGroup

ComponentDataA: Name of the Scene Component that will be the list that gets fed data from the XLM file
IncomingDataA: This refers to the Incoming Data Elements and which set of data is to be used
ComponentDataB: Name of the Scene Component that will be the list that gets fed data from the XLM file
IncomingDataB: This refers to the Incoming Data Elements and which set of data is to be used

Highlights showing the relationship between the uAsset and XML — Relation of Hierarchy, Component Tag, XML Element

Here you can see each element is linked by name, assigning the component tag to the same as the element in the XML <player>

Inside the XML assigner is where the data gets checked and paired, It grabs the XML element and grabs the name of each player element and checks that against the added tag to each of the components. And when the check passes it passes along the Component that pairs successfully as well as the name of the element pair. From the check pass that element to the cast to Text3D where the element Value grabbed is fed into the Set Text.

EasyXMLParser being setup to split by elements — Usage of the Parser filtering out the XML

If the cast fails it means that it is a texture (providing the current state is only text and images) it then goes to a get texture function where it handles deciding which path to grab the file from correctly from a list of paths, before returning the texture to be assigned.

Images being updated after the text can be done

Inside the Get Texture from XML function there is a delimiter where it dictates what type of path is required from the XML either offline/ In Unreal. There are two methods to extract the texture, one is from an external file of unreal .uasset list and that's with the import file as Texture2D. The other is to grab it from unreal internally which is a little more specific on location and string formatting to get the right output for a .uasset texture as seen in the image.

The Asset registry is a little peculiar as it uses a Game\ path rather than Content\”Path to location” as well as another interesting fact is that it requires the “texturename.texturename” the texture name must be repeated before going into the” get asset from object path”

The macro containing the nodes from the Get Texture from XML — Get Text from XML Macro

Image rescale Macro

This method takes in a texture, getting both lengths and normalising against one axis depending on a bool check (one is horizontal and the other is vertical). this reduces the scale edge down to one unit which is then multiplied by the Player image Width Global so X=3 then the X length is 3 meters in 3d space.

image scaler for maintaining proportions — The macro for rescaling the image in proportion

In a real life setting the images would be designed and made for purpose, for testing i didnt worry as much and built this scaler function to change it on the fly.