Créer des widgets interactifs

Procédez comme suit pour rendre vos widgets interactifs :

• Ajoutez l'argument player_ui_slot{InputMode := ui_input_mode.All } lorsque vous ajoutez un widget à l'aide de la fonction AddWidget().

• Liez un gestionnaire d'événements à l'événement du widget.

Actuellement, vous pouvez rendre les widgets suivants interactifs :

• Bouton

• Curseur

Consultez les sections suivantes pour savoir comment rendre ces widgets interactifs.

Interagir avec des boutons

Procédez comme suit pour créer une interface utilisateur avec un bouton, et ajouter un comportement qui affiche le texte du bouton sélectionné à l'écran lorsque le joueur interagit avec le bouton :

1. Ouvrez le fichier Verse que vous avez créé à la rubrique Supprimer un widget.

2. Créez une fonction nommée CreateMyUIt() dans laquelle vous allez créer l'interface utilisateur. 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

3. Remplacez le type de MaybeMyUIPerPlayer par [player]?canvas : var MaybeMyUIPerPlayer : [player]?canvas = map{}

4. Modifiez l'assignation de NewUI pour appeler votre nouvelle fonction CreateMyUI().

   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}) {}
   

   Copy full snippet(10 lines long)

5. Ajoutez l'argument player_ui_slot{InputMode := ui_input_mode.All} lors de l'ajout d'un nouveau widget afin que le joueur puisse utiliser son curseur sur la zone de dessin lorsqu'il est créé.

   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}) {}
   

   Copy full snippet(10 lines long)

6. Tous les boutons de l'interface utilisateur possèdent un événement OnClick() listenable auquel vous pouvez vous abonner. Le gestionnaire d'événements doit avoir un type de retour void et un paramètre de type widget_message. 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 = # Indiquez ce qui se passe lorsque le joueur appuie sur le bouton

7. Dans HandleSelectedUIButton, affichez le texte du bouton à l'écran et supprimez le widget de l'écran. Étant donné que widget_message sait quel joueur et quel élément de l'interface utilisateur l'ont sélectionné, vous pouvez utiliser ces informations pour obtenir le texte du bouton et trouver le widget présenté au joueur pour le supprimer de l'écran.

   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) {}
   

   Copy full snippet(5 lines long)

8. Le code complet de cet exemple est le suivant.

   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
   
   Expand code Copy full snippet(54 lines long)

Interactions avec un curseur

Procédez comme suit pour créer une interface utilisateur avec un curseur et ajouter un comportement qui imprime la valeur définie à l'écran lorsque le joueur interagit avec le curseur :

1. Ouvrez le fichier Verse que vous avez créé à la rubrique Interagir avec des boutons.

2. Mettez à jour la fonction nommée CreateMyUI() avec le curseur. 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

3. Tous les curseurs de l'interface utilisateur possèdent un événement OnValueChanged() listenable auquel vous pouvez vous abonner. Le gestionnaire d'événements doit avoir un type de retour void et un paramètre de type widget_message. 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 = # Indiquer ce qui se passe lorsque le joueur modifie la valeur du curseur

4. Dans HandleValueChangedUISlider, affichez la valeur du curseur à l'écran. Étant donné que widget_message sait quel joueur a interagi avec l'interface utilisateur et quel élément de l'interface utilisateur il a sélectionné, vous pouvez utiliser ces informations pour obtenir la valeur du curseur et trouver le widget présenté au joueur.

   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()}")
   

   Copy full snippet(7 lines long)

5. Le code complet de cet exemple est le suivant.

   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
   
   Expand code Copy full snippet(79 lines long)