How to create a re-usable layout of text fields that can be bound to in world space?

Question

Current tools:

• Unity 2020.3.2f1 (Win10)
• UI Builder preview package

My end-goal is to do the following:

1. At varying intervals, change values for many data objects in the background, such as prices, resources, demand, supply, etc.
2. Display those values in a flat table/list (as they change) in world space to the player, e.g. on a TV screen (or a transparent panel hovering above it, etc.)
3. Have the ability to apply that layout (and its bindings) to another world space object of a different size, e.g. on a smaller or wider TV screen

Imagine an office with 15 desks, all with 3 monitors showing the same data feeds and changing statistics, except the monitors were all different shapes and sizes. How could you avoid building all 45 monitor layouts individually, and binding to each field separately? So my question is:

What is the "right" way to build a re-usable UI (ideally with UXML/USS), display it in world space, and have the ability to update the text in that layout?

I thought that UI Builder + UXML/USS would be the answer, but I am having trouble parsing how my end goal would be accomplished using that (or if that is even an appropriate use case for UI Builder). Fields that are displayed using UIDocuments are not exposed in the Hierarchy, and can't be dragged onto a script's input in the Inspector, for example. I'm able to project a UXML/USS layout onto a texture => material => object, but I'm not sure how to bind to the fields within the layout:

The screenshot above is my latest attempt, a POC of a live timer (on the right) manually being updated (using a TextMeshPro field, works great), and the yellow panel to the left is a UXML/USS layout pasted onto a texture/material that's applied to a panel (in a canvas). On the far left is that same layout being used as a HUD, just to confirm it works the same as the floating panel. In-game, this data will not be part of the HUD, it will only be in world space. As a POC, I have been trying unsuccessfully to get the timer value from the gray panel to bind to the "should be time" text in the UXML.

So, should I just bite the bullet and build each layout by hand using game objects (such as in the gray panel)? Or am I halfway there with the UXML and just misunderstanding how UIDocuments work? Or is there a new smarter way of doing this I haven't heard of yet? Not looking for a full code example or anything, just a push in the right direction.

Answer 1

One very easy way is to only use one text renderer (e.g. TextMeshPro) in each place that you want to display text, and format all the text you want to display into a single multi-line string.

StringBuilder sb = new StringBuilder();

//...

public void RefreshText() {
    sb.Clear();
    foreach (var keyValuePair in fields) {
        sb.AppendLine($"<b>{keyValuePair.Key}</b>: {keyValuePair.Value}");
    }
    textField.text = sb.ToString();
}

This approach works well if all of the text changes at once. It can be needlessly expensive if only small parts of the text change. For example, if you have 25 fields you want to display, but only one field changes regularly, it's inefficient to rebuild the string and re-render all of the text when that one field changes. If you have 25 fields that each change once per second, it's not inefficient to combine them into one string because they all change at once anyway.