Conversion Functions: To Text (Int) and To Text (Double)

Pass Integer or Float variables to a widget using the ToText(Int) and ToText(Double) Conversion Functions. The "ToText" conversion functions convert a variable of type Integer or Float to a Text type you can display on your widget. A variable will not display on your widget if they remain as a non-Text type.

Below are two examples that illustrate the use of both conversion functions.

• To Text (Int) example: A custom Tracker widget tracks a player’sr progress when they pick up a number of bacon.

• To Text (Double) example: A custom Popup Dialog widget opens a pop-up with possible answers to a trivia question. A countdown timer is used to close the timer if an answer hasn’t been selected before the time is up.

To Text (Int)

In this example, a custom Tracker widget is created to track how many bacon the player has collected. Use the steps in the UI Pop-Ups document to create a User Widget and name it Tracker_Widget.

Widget Setup

To set up the Tracker_Widget, add the following widgets in the order presented below to the Hierarchy panel:

• Overlay

• Image (Nest under the Overlay and rename to Background.)

• Stack Box (Nest under the Overlay)

• Text Block (Nest under the first Stack Box and rename to Title, this is your Tracker Title "{Tracker Title}")

• Stack Box (Nest under the first Stack Box.)

• 2 X Text Block (Nest under the second Stack Box. Rename the first text bloxk to CurrentValue "{Current}" and the second text block to Flavor Text "Bacon Collected".)

You need a text block that takes in the current number of Bacon the palyer collects. The Tracker_Widget is set up to include a TrackerTitle text block so the Name property can pass from the viewmodel into the Current text block:

Set up your widget using the same

This is what the player sees in game when they collect bacon:

Conversion Function Setup

The To Text (Int) conversion function is used to pass the current amount of bacon onto the Tracker device through the CurrentValue text block.

To set up the To Text (Int) conversion functions, create View Bindings and bind the values you set in the widget to the Tracker device.

1. Open Window > View Bindings.

   

2. Select the CurrentValue text block in your widget, and click +Add Widget in the View Bindings window.

   

3. In the left box of the view binding, select CurrentValue > Text. This means that Text will pass into the Text property of the CurrentValue text block.

   

4. In the right box, click in the field and select Conversion Functions > To Text (Integer). A number of fields appear in the binding for the CurrentValue text block.

   To learn more about what each field does, refer to the To Text (Int/Double) Properties section.

   This runs a conversion function called To Text (Integer) that takes in a value and returns a variable of Text type to pass into the Text property of the CurrentValue text block.

   

5. Select the chain icon next to Value and select MVVM_UEFN_Tracker > Value.

   

The Value variable from the Tracker viewmodel passes into the To Text (Integer) conversion function. This outputs the Value variable as a Text property which is then passed into the Text property of the CurrentValue text block.

Final Result

To use your new widget, drag a Tracker device into your project, then do the following:

1. In the Details panel for the Tracker device, set the HUD Widget field to your Track_Widget.

   The Tracker can be used to track the Score stat, and use Collectible Objects in your level to test this functionality.

Whenever the player collects Bacon in-game, the tracker automatically increments by the score value set for each bacon.

To Text (Double)

In this example, use the Modal Dialogue Variant workflow from the UI Pop-Ups document to create a custom Popup Dialog widget called Trivia_Widget. The Trivia_Widget displays trivia questions from Fortnite which have to be answered before the time limit runs out.

Widget Setup

1. Right click in the Content Browser to bring up the Context Menu.

   

2. From the Context Menu select User Interface > Widget Blueprint > Modal Dialog Variant.

   

3. Open your widget and add the following containers to the Hierarchy panel in the order shown in the image:

   1. Overlay

   2. Image

   3. 3 X Stack Box

   An Overlay houses the entire widget as the parent container. Next, use an Image widget for the background, and lastly multiple nested Stack Boxes to contain all the content such as your texts and buttons.

   

4. Add text blocks and buttons to your stack boxes as pictured below.

   

   Wrap the TimeLeft and TimeFlavorText text blocks in a Stack Box so the TimeLeft is dynamically updated through a view binding to the Remaining Time for Timeout variable in the Popup Dialog viewmodel.

   

   If you find that you need to wrap a widget with a container in an existing structure, you don’t have to re-do the entire widget. Right click on the widget, and select Wrap With… or Replace With… to easily add a new panel within a container.

   

5. Add the buttons as a 2x2 grid. Since the buttons are in a 2x2 grid, use a Uniform Grid Panel instead of a Stack Box. Right-click on Container_Buttons > Replace With… > Uniform Grid Panel.

   The Uniform Grid Panel allows you to easily organize its child widgets in a grid pattern. You can also easily set the slot padding for each child.

   

6. Select each button individually in the Hierarchy to highlight the button in the Main Designer View.

7. From the Main Designer View, click on the arrows surrounding the Button to move the button into a specific row or column where you want the button to be.

   In the example below, the buttons are arranged in a left-to-right, and top-to-bottom layout. The buttons were renamed to Button1, Button2, Button3, and Button4.

   

8. In the Details Panel, set the Child Layout > Slot Padding to 16px for the Container_Buttons.

   Tweak this value however you see fit for your own design.

   

9. In the Content Stack Box, add a Quiet Button to use as a Close button later.

   

10. Add some spacers between the containers to make the content more readable. You can do this by adding an Image widget to where you want spaces to be, then in the Details panel use th efollowing options:

    1. Brush > Draw As = None

    2. Image Size (X and Y values) = 35 (Can be more or less depending on yoru design.)

    This is an easily manageable way of handling spacing between your UI elements without relying on padding.

    

    

    

    Draw as Image

    Draw as None

11. Edit the Button text to easily identify each button.

    

12. Open the Fortnite > UI folders and create a Material Instance of the M_UI_Rectangle to make a background material for your trivia pop-up.

    

13. From UMG, open your user widget and select the Background image widget, and in the Brush > Image field, select the material instance you just made.

    

14. Add 32px of padding in the Content Stack Box to make the pop-up more readable.

    

Conversion Function Setup

1. Open Window > View Bindings.

   

2. From the Hierarchy panel, select the TimeLeft text block widget. In the View Bindings window, click +Add Widget.

   

3. In the left box, select TimeLeft > Text. This passes some form of value into the Text property of TimeLeft.

   

4. In the right box, select CreativeModalDialogViewmodel > Remaining Time for Timeout. Then select Conversion Functions > To Text (Double).

   Hovering over the variable reveals that this value is a Float value. The conversion function To Text (Double) provides a way for you to convert a Double/ Float value to a Text variable, and displays them in your UI.

   

   A number of fields appear in the View Binding window.

   For more information about these fields, refer to the To Text (Int / Double) Properties section of the document.

5. Click the chain icon next to Value, and select CreativeModalDialogViewmodel > Remaining Time for Timeout > Select.

   

The Remaining Time for Timeout variable is passed into the To Text (Double) conversion function that outputs the Float value into a Text format that is readable by your UI. Your UI accurately displays the time left before the Popup Dialog widget closes.

Final Result

Drag a Pop-up Dialog device into your project and do the following:

1. In a Popup Dialog device, set the Template Override Class to the Trivia_Widget you created.

2. Check Use Dialog Timeout.

3. Set Timeout Duration to 6 seconds or whatever time you think would give players enough time to see the pop-up and read it.

Now when your Pop-up Dialog widget shows up, you can see the Timer tick down every second inside the pop-up window.

To Text (Int/Double) Properties

There are a number of fields available in the To Text (Int) conversion function. To Text (Double) shares the same fields unless specified otherwise:

• Value - The Integer variable to pass into the conversion function.

• Always Sign - Adds a positive or negative sign to the prefix for the Text output indicating whether the value is a positive or negative value. If the value is positive, it outputs the text as +{Value}. If it’s negative, it outputs the text as -{Value}.

• Use Grouping - Determines whether the values are grouped together but separated by when the value is above 1000. It will use the cultural-sensitive setting on your computer for the grouping indicator. If turned on, it outputs the text as 1,000. If turned off, it outputs the text as 1000.

• Minimum Integral Digits - The minimum number of integer digits to show on the text. The default value is 1. If setting minimum to above 1, it will display 0’s for integers with a number of digits less than the minimum integral digits. For example, if minimum integral digits is set to 3 and the Value is currently 5, the text outputs as 005.

• Maximum Integral Digits - The maximum number of integer digits to show in the text. The default value is 354. This restricts your text to only show a maximum number of digits.

• Minimum Fractional Digits (only for To Text (Double)) - The minimum number of digits to show after the decimal point. The default value is 0.

• Maximum Fractional Digits (only for To Text (Double)) - The maximum number of digits to show after the decimal point. The default value is 3.

• Rounding Mode (only for To Text (Double)) - Determines how the Float/Double value rounds up to the nearest number.