Как сделать виджеты интерактивными

Вы можете сделать виджеты интерактивными следующим образом:

• добавив аргумент player_ui_slot{InputMode := ui_input_mode.All } при добавлении виджета с помощью функции AddWidget();

• привязав обработчик события к событию виджета.

В настоящее время вы можете сделать интерактивными следующие виджеты:

• Кнопка

• Ползунок

В следующих разделах приведены примеры того, как сделать эти виджеты интерактивными.

Взаимодействие с кнопкой

Выполните следующие шаги, чтобы создать интерфейс с кнопкой и добавить поведение, которое печатает текст выбранной кнопки на экране при взаимодействии с ней игрока:

1. Откройте файл Verse, созданный согласно указаниям в разделе Удаление виджета.

2. Создайте функцию с названием CreateMyUI(), в которой вы будете создавать интерфейс. 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. Измените тип MaybeMyUIPerPlayer на [player]?canvas: var MaybeMyUIPerPlayer : [player]?canvas = map{}

4. Присвойте новое значение NewUI, чтобы вызвать новую функцию 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. Добавьте аргумент player_ui_slot{InputMode := ui_input_mode.All} при добавлении нового виджета, чтобы игрок мог использовать свой курсор на рабочей области при его создании.

   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. Все кнопки интерфейса имеют событие с атрибутом listenable — OnClick(), на которое можно подписаться. Предполагается, что обработчик события будет иметь возвращаемый тип void и один параметр типа 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 = # Определите, что происходит, когда игрок нажимает на кнопку

7. В HandleSelectedUIButton выведите текст кнопки на экран и удалите виджет с экрана. widget_message знает, какой игрок и элемент интерфейса его выбрали, поэтому вы можете использовать эту информацию, чтобы получить текст кнопки и найти виджет, отображаемый для игрока, чтобы удалить его с экрана.

   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. Ниже приведён полный код для данного примера.

   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)

Взаимодействие с ползунком

Выполните следующие шаги, чтобы создать интерфейс с ползунком и добавить поведение, которое печатает заданное значение на экране при взаимодействии игрока с ползунком:

1. Откройте файл Verse, созданный согласно указаниям в разделе Взаимодействие с кнопкой.

2. Обновите функцию CreateMyUI(), добавив в неё ползунок. 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. Все ползунки в интерфейсе имеют событие с атрибутом listenable — `OnValueChanged()`, на которое можно подписаться. Предполагается, что обработчик события будет иметь возвращаемый тип void и один параметр типа 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 = # Определите, что происходит, когда игрок изменяет значение ползунка

4. В HandleValueChangedUISlider выведите значение ползунка на экран. widget_message знает, какой игрок взаимодействовал с элементом интерфейса и какой именно элемент был выбран, поэтому вы можете использовать эту информацию, чтобы получить значение ползунка и найти виджет, отображаемый для игрока.

   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. Ниже приведён полный код для данного примера.

   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)