Breadcrumbs

Render UMG widget

Widgets can be useful when you want to show some stats for debugging or make an animated picture/text on the viewport/output. In this guide we will show you how to use Pixotope Widget renderer.

Create widget

  1. Right click in the Content Drawer

  2. Add a "Widget Blueprint" under User Interface

    • Note: the "Editor widget blueprint" under Editor Utilities does not work in Live mode, if there are animations involved

      image-20240618-140123.png


  3. Select "User Widget" in the upcoming dialog

    image-20240618-140143.png

Editor Utility Widget and Editor Utility Blueprint are for debugging purposes only. They do not render in Preview Live/LIVE mode!

image-20250822-220149.png
  1. Rename it, in our case UI_Outro

  2. Create the widget you like

  3. Click "Create Binding" on a widget so that we can tweak it in another Blueprint

    image-20240618-140340.png
    • This creates a function and switches to the Graph page

  4. In the graph view, click the Return Value and select Promote to variable

    image-20251125-081322.png


    image-20251125-081240.png


  5. Compile and save the widget blueprint

Repeat this process with other widgets that you want to control from another Blueprint.

image-20251125-081403.png


Control variable

  1. Fine tune the widgets in the widget blueprint

  2. Go to Pixotope World Settings > UMG > User Widgets and add our widget blueprint

image-20251125-081506.png
  1. Create an actor Blueprint and rename it (in this case BP_WidgetControl)

  2. Create logic for widget control

    • Be sure to add a delay node before getting widgets, as the UMG system takes more time to start

    • If you want to show a widget in the final output, please use the "Get Widget" node to get the Pixotope UMG widgets.

      • Don’t use "Get all widgets of class" or "create widget+add to viewport” as they are debug widgets only. They won’t be rendered to the output.

        image-20251125-083919.png


You can build complex logic to drive this text widget. For example, use a custom event to send text from an Array one by one to Text widget.