Adding Highlighted/Bold Text to User Interface
- Hezekiah O
- Apr 17
- 4 min read
The goal of this is to allow the reader to create custom highlighted or bold text options in Unreal Engine 5.
Quick Disclaimer this was created in Unreal Engine 5.2 but should work in any of the UE 5.0+ versions
Overview
Creating a Data Table subclass (Rich Text style Row)
Creating a Simple Widget Blueprint
Creating a Data Table
What is a Data Table?
Data Tables are a table of miscellaneous but related data grouped in a meaningful and useful way, where the data fields can be any valid UObject property, including asset references. Usually it consist of a Structure or a Struct for short.
Structure (often called a "struct") is a data structure that groups together related properties, allowing for easy organization and manipulation of these properties. Think of it as a custom data type that can hold different types of data (like strings, numbers, booleans, etc.) in a single variable.
But in this case we will use a preexisting Structure created by Unreal!
Written Steps to Creating the Data Table
Left Click in the Content Browser(Content Drawer)
Find and hover the Miscellaneous option
Click on the Data Table option (Image Below)
Once the pop up appears, Click the Drop Down and search for the Rich Text Style Row
A new asset will be created. Name it whatever you like (I named mine DT_Text, Prefix DT_ for Data Table)
Once your are done naming the asset, double click it to open it.
Visual Step to Creating the Data Table
Adding Options to the Data Table
Locate and Click the Add button(Between the Reimport Button and Copy Button) at the top of the tab
A new option will be added to your table
Select the new option Left Click or Press F2 on the Row Name you want to name this "Default" (This is important so that the engine knows what to set the regular text. Forgetting to do this may result in the Data Table not working in the User Interface)
Under the Row Editor Tab. Select your Font Family ( *Note* If you don't see this Click the Drop Down next to Text Style. Then Click the Drop Down next to Font.) Unreal should have "Roboto" font already in the engine, but you can always import your own later. We will use the "Roboto Tiny" for now.
Set the size to "14" and the Color to whatever you like. I will use "Black".
We will repeat steps 1 and 2.
Select the new option Left Click or Press F2 on the Row Name you want to name this new option "Bold" (*Note* You can name this and any future options, whatever you want, its easier to remember Bold for now. :))
Under the Row Editor Tab. Select your Font Family. This time we want to pick "Roboto"
Set the size to "18" and the Color to whatever you like. I will use "Orange".
Save your Data Table and Close it.
Visual Step to Adding Options to the Data Table
Creating a Widget Blueprint
What is a Widget Blueprint?
A Widget Blueprint is a type of blueprint used to create and manage User Interface (UI) elements, such as menus, HUDs, and in-game pop-up windows. It's a visual scripting tool that allows you to design and program UI elements using a node-based system within the Blueprint Editor.
Written Steps to Creating a Widget Blueprint
Left Click in the Content Browser(Content Drawer)
Find and hover the User Interface option
Click on the Widget Blueprint option (Image Below)
Once the pop up appears, Select User Widget Button under the Common Drop Down.
A new asset will be created. Name it whatever you like (I named mine WBP_Textbox, Prefix WBP_ for Widget Blueprint)
When you are done, Double click your new Asset.
For the sake of keeping this simple, Search for a Canvas Panel under the Palette Tab. Drag the Canvas into the viewport.
Search for a Rich Text Block under the Palette Tab. Drag the Rich Text Block into the viewport.
While the Rich Text Block is selected, under the Details Tab locate the Text Style Set under the Appearance Tab
Add the Data Table we created earlier to the Text Style Set
Above the Appearance Tab will be a Content Tab, the Text option is where you will add your text. I put this "This is Example text. Look this word is highlighted!" (*Note* Don't forget to compile. Your text will show up purple if there are issues or you haven't complied)
Your text should show up as the color you chose.
To change the color use the following format <Bold>words</>
<Bold> : Bold is the name of the row I created earlier
word : Is the word I want to be bold
</> : Lets the rich text know where to end the bold
So this is what the text looks like when finished "This is Example text. Look this <Bold>word</> is highlighted!" this is what you will see in engine "This is Example text. Look this word is highlighted!"
Visual Step to Creating a Widget Blueprint
コメント