Positioning Widgets on the Screen in Unreal Editor for Fortnite | Fortnite Documentation

You position widgets on the screen with the canvas widget by adding widgets to its canvas slots.

Button with text Center displayed in middle of the screen

The following code is an example of a canvas widget that will display the text "Center" on a button in the middle of the screen.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable

Canvas Slot Settings

You can change the following fields of a canvas slot to position widgets in the canvas:

Field	Description	Values
Anchors	The location in the canvas where the widget is anchored, specified as a percentage of the canvas. When the canvas resizes, the widget stays attached to its anchors in the new canvas size. You can specify the maximum and minimum anchors of the widget, which can change the size of the widget when SizeToContent is enabled.	The range for the X and Y fields of an anchor is 0 to 1, where `vector2{X := 0.0, Y := 0.0}` is the upper left of the canvas and `vector2{X := 1.0, Y := 1.0}` is the bottom right of the canvas.
Alignment	The part of the widget that is at the anchor location. For example, if the Alignment field is `vector2{X := 0.5, 1.0}`, then the bottom center of the widget is positioned at the anchor location.	The range for the X and Y fields for Alignment is 0 to 1, where `vector2{X := 0.0, Y := 0.0}` is the upper left of the widget and `vector2{X := 1.0, Y := 1.0}` is the bottom right of the widget.
Offsets	This field can affect the size and position of the widget in two ways: When the fields Anchors and Alignment are both set, this field can specify the offset from the anchor to position the widget. When the widget is anchored in a way that the size does not make sense, this field can represent the size space allocated for the widget. However, if SizeToContent is enabled, the widget will take its needed size.	The margin must be in the range 0 to 1080. This resolution will be scaled to fit the resolution of the player’s screen.
SizeToContent	When enabled, sizes the widget as desired.	`true` / `false` to represent whether this option is enabled or not.

The location and layout of your UI elements is platform-dependent. The resolution of the UI will be determined by the platform the player is using, and the UI will be scaled to fit.

Generally, your workflow for positioning a widget will be setting the fields in the following Order:

Anchors to specify where the widget should appear on the canvas, even when the canvas is resized.
Alignment to specify what part of the widget is positioned at the anchor location.
Offsets to apply an offset from the anchor point.
SizeToContent to size the widget as needed.

The following shows how changing the Offsets Margin changes where the widget appears relative to the anchor location.

Offsets Top Margin is 0.0

Offsets Top Margin is 50.0

The following shows how changing the Alignment field affects which part of the widget is at the anchor location.

Alignment set to middle of widget, vector2{X := 0.5, Y := 0.5}

Alignment set to top left of widget, vector2{X := 0.0, Y := 0.0}

The following shows how changing the Minimum and Maximum Anchors can affect the size of a widget.

Minimum and Maximum Anchors are same: vector2{X := 0.5, Y := 0.5}

Minimum and Maximum Anchors are different: Minimum := vector2{X := 0.4, Y := 0.4}, Maximum := vector2{X := 0.6, Y := 0.6}

Example of Positioning Widgets on the Screen

The following code is an example of positioning widgets at various points around the screen.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable