Slate is the underlying GUI framework that Unreal Engine uses to render itself. Professional tools programming in Unreal Engine always uses some level of Slate. UMG is a visual UI editor, specifically for games, built on top of Slate, and as such, there is a straightforward way of exposing Slate widgets to UMG. One experiment I did was to write a Parallax Overlay widget in Slate and then expose it to UMG.

The core principles of the widget are as follows:

  • Arrange all children’s position based on multiple attributes:
    • The movement span, universally set on the parallax overlay itself.
    • A height attribute in each child’s slot settings
    • And of course, the mouse position itself
  • Paint the widgets just like Epic’s own Overlay widget. Nothing special is done here.

In the above example, each dialogue option has its own Parallax Slot, exposing parallax settings individually for each contained element. This way, we can adjust the effect strength per child widget.

Within UMG

This is what’s behind the use-case in the above video. Do note: the widget palette includes a new “Edge” category, which in turn includes the Parallax Overlay widget. In the widget hierarchy, all we did was attach the widgets we want to our new Parallax Overlay.

The widget itself, within UMG, only has one exposed attribute, which is the movement span mentioned before. It’s an overall parallax strength value and can be used to strengthen or weaken the effect across the entire widget at once.

Slot settings

The Parallax Overlay slots have multiple settings. On one hand, the effect can simply be disabled for individual slots. On the other, it features offset and height values. While the height value is more or less self-explanatory, the offset value can be further used to push a widget into one or the other direction. Additional options include the commonly known padding and alignment values.