Skip to main content
Skip table of contents

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

  4. Rename it, in our case UI_Outro

  5. Create the widget you like

  6. Optionally create Animations for those widgets, in our case Anim_Outro

    • Note: If you want to control the visibility set the opacity of a widget to 0 to hide it.

      image-20240618-140304.png

  7. 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

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

    image-20240618-140414.png

    image-20240618-140433.png

  9. Compile and save the widget blueprint

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

Control variable

  1. Fine tune the widgets in the widget blueprint

  2. Add "Pixotope Widget Renderer" into the scene and select the widget blueprint we just made as Widget asset

    image-20240618-140537.png

  3. Optionally you can leave this empty and assign the widget blueprint in another Blueprint with this node (Set widget asset)

    image-20240618-140603.png

  4. Create an actor Blueprint and rename it (in this case BP_WidgetControl)

  5. Create logic for animation control

    • Be sure to uncheck the "Top Level Only"

    • "AnimOutro" is the animation name set in the widget blueprint (See step 6)

      image-20240618-140617.png

  6. Create logic for text control

    • "OutroText1" is the text variable we promoted from the Text widget binding (See step 8)

      image-20240618-140641.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.

A test project can be downloaded here PixotopeWidget.zip

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.