Positioning Widgets on the Screen in Unreal Editor for Fortnite

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

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.

|  |  |
| --- | --- |
|  | 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 |
|  | MyButton : button_device = button_device{} |
|  |  |
|  | # A localizable message to display as text in the UI |
|  | TextForMyUI<localizes> : message = "Center" |
|  |  |
|  | # A mapping between the Player and the widget that may have been added to their UI |
|  | var MaybeMyUIPerPlayer : [player]?canvas = map{} |
|  |  |
|  | # Runs when the device is started in a running game |
|  | OnBegin<override>()<suspends> : void = |
|  | MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction) |
|  |  |
|  | # A custom UI can only be associated with a specific player, and only that player can see it |
|  | HandleButtonInteraction(Agent : agent) : void = |
|  | # Agents can be a player or AI, but you can only get the UI of a player |
|  | # so you must cast the Agent, who interacted with the Button device, to the player type |
|  | if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]): |
|  | if (MyUI := MaybeMyUIPerPlayer[InPlayer]?): |
|  | PlayerUI.RemoveWidget(MyUI) |
|  | if (set MaybeMyUIPerPlayer[InPlayer] = false) {} |
|  | else: |
|  | NewUI := CreateMyUI() |
|  | PlayerUI.AddWidget(NewUI) |
|  | if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {} |
|  |  |
|  | # A canvas widget that displays a button with the text "Center" in the middle of the screen |
|  | CreateMyUI() : canvas = |
|  | MyCanvas : canvas = canvas: |
|  | Slots := array: |
|  | canvas_slot: |
|  | Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} |
|  | Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} |
|  | Alignment := vector2{X := 0.5, Y := 0.5} |
|  | SizeToContent := true |
|  | Widget := button_loud{DefaultText := TextForMyUI} |
|  |  |
|  | return MyCanvas |