Widgets interaktionsfähig machen in Unreal Editor für Fortnite | Fortnite Dokumentation

Du kannst deine Widgets interaktiv machen, indem du:

Füge das Argument player_ui_slot{InputMode := ui_input_mode.All } hinzu, wenn du ein Widget mit der Funktion AddWidget() hinzufügst.
Bindung eines Event-Handlers an das Ereignis des Widgets.

Derzeit kannst du die folgenden Widgets interaktionsfähig machen:

In den folgenden Abschnitten findest du Beispiele dafür, wie du diese Widgets interaktiv gestalten kannst.

Schaltflächeninteraktionen

Interaktion mit einer Schaltfläche in Verse-UI

Mit den folgenden Schritten kannst du eine Benutzeroberfläche mit einer Schaltfläche erstellen und ein Verhalten hinzufügen, das den ausgewählten Schaltflächentext auf dem Bildschirm ausgibt, wenn der Spieler die Schaltfläche betätigt:

Öffne die Verse-Datei, die du in Widget entfernen erstellt hast.
Erstelle eine Funktion mit dem Namen CreateMyUI() mit der du die Benutzeroberfläche erstellst. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, 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 := MyUIButton return MyInteractableButtons
Ändere den Typ für MaybeMyUIPerPlayer in [player]?canvas: var MaybeMyUIPerPlayer : [player]?canvas = map{}
Ändere die Zuweisung für NewUI um deine neue Funktion CreateMyUI() aufzurufen.
Verse
```
     # UI are added per Player.
     HandleButtonInteraction(Agent : agent) : void =
         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}) {}
```
# UI are added per Player. HandleButtonInteraction(Agent : agent) : void = 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}) {}
Füge das Argument player_ui_slot{InputMode := ui_input_mode.All} hinzu, wenn du ein neues Widget hinzufügst, damit der Spieler seinen Mauszeiger auf dem Canvas verwenden kann, wenn er erstellt wird.
Verse
```
     # UI are added per Player.
     HandleButtonInteraction(Agent : agent) : void =
         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, player_ui_slot{InputMode := ui_input_mode.All})
                 if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
```
# UI are added per Player. HandleButtonInteraction(Agent : agent) : void = 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, player_ui_slot{InputMode := ui_input_mode.All}) if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
Alle UI-Schaltflächen haben ein OnClick() listenable Ereignis das du abonnieren kannst. Der Event-Handler sollte einen Rückgabetyp void und einen Parameter vom Typ widget_message erwarten. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, 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 := MyUIButton return MyInteractableButtons HandleSelectedUIButton(Message : widget_message) : void = # Definiere, was passiert, wenn der Spieler die Taste drückt.
In HandleSelectedUIButton wird der Text der Schaltfläche auf dem Bildschirm ausgegeben und das Widget vom Bildschirm entfernt. Eine widget_message weiß, welcher Spieler und welches UI-Element es ausgewählt hat, so dass du diese Informationen verwenden kannst, um den Text der Schaltfläche zu erhalten und das Widget zu finden, das dem Spieler angezeigt wird, um es vom Bildschirm zu entfernen.
Verse
```
     HandleSelectedUIButton(Message : widget_message) : void =
         if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]):
             Print("Player selected {SelectedButton.GetText()}")
             PlayerUI.RemoveWidget(MyUI)
             if (set MaybeMyUIPerPlayer[Message.Player] = false) {}
```
HandleSelectedUIButton(Message : widget_message) : void = if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]): Print("Player selected {SelectedButton.GetText()}") PlayerUI.RemoveWidget(MyUI) if (set MaybeMyUIPerPlayer[Message.Player] = false) {}

Im Folgenden findest du den vollständigen Code für dieses Beispiel.

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

Schieberegler-Interaktionen

Mit den folgenden Schritten kannst du eine Benutzeroberfläche mit einem Schieberegler erstellen und ein Verhalten hinzufügen, das den eingestellten Wert auf dem Bildschirm ausgibt, wenn der Spieler mit dem Schieberegler interagiert:

Öffne die Verse-Datei, die du in Button Interactions erstellt hast.
Aktualisiere die Funktion mit dem Namen CreateMyUI() mit dem Schieberegler. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, 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 := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} 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 := MyUIButton return MyInteractableWidgets
Alle UI-Schieberegler haben ein OnValueChanged() listenable Ereignis das du abonnieren kannst. Der Event-Handler sollte einen Rückgabetyp void und einen Parameter vom Typ widget_message erwarten. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyUISlider.OnValueChanged().Subscribe(HandleValueChangedUISlider) MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, 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 := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} 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 := MyUIButton return MyInteractableWidgets HandleValueChangedUISlider(Message : widget_message) : void = # Definiere, was passiert, wenn der Spieler den Wert des Schiebereglers ändert
In HandleValueChangedUISlider wird der Wert des Schiebereglers auf dem Bildschirm ausgegeben. Eine widget_message weiß, welcher Spieler interagiert hat und welches UI-Element er ausgewählt hat, sodass du diese Informationen verwenden kannst, um den Wert des Schiebereglers zu ermitteln und das Widget zu finden, das dem Spieler angezeigt wird.
Verse
```
     HandleValueChangedUISlider(Message : widget_message) : void =
         if:
             PlayerUI := GetPlayerUI[Message.Player]
             MyUI := MaybeMyUIPerPlayer[Message.Player]?
             ChangedSlider := slider_regular[Message.Source]
         then:
             Print("Player changed slider value to {ChangedSlider.GetValue()}")
```
HandleValueChangedUISlider(Message : widget_message) : void = if: PlayerUI := GetPlayerUI[Message.Player] MyUI := MaybeMyUIPerPlayer[Message.Player]? ChangedSlider := slider_regular[Message.Source] then: Print("Player changed slider value to {ChangedSlider.GetValue()}")

Im Folgenden findest du den vollständigen Code für dieses Beispiel.

Verse

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

     interactable_slider := class(creative_device):

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