Widget'ları Etkileşime Geçilebilir Hale Getirme

Aşağıdakileri yaparak widget’larını etkileşime geçilebilir hale getirebilirsin:

• AddWidget() fonksiyonunu kullanarak bir widget eklerken player_ui_slot{InputMode := ui_input_mode.All } bağımsız değişkenini ekleme.

• Widget’ın olayına bir olay işleyici bağlama.

Şu anda aşağıdaki widget’ları etkileşime geçilebilir hale getirebilirsin:

• Buton

• Kaydırıcı

Aşağıdaki bölümlerde bu widget’ların nasıl etkileşime geçilebilir hale getirileceğinin örnekleri bulunuyor.

Buton Etkileşimleri

Buton ile kullanıcı arayüzü oluşturmak ve oyuncu butonla etkileşime geçtiğinde seçilen buton metnini ekrana yazdıran bir davranış eklemek için şu adımları izle:

1. Widget Kaldırma bölümünde oluşturduğun Verse dosyasını aç.

2. Kullanıcı arayüzünü oluşturacağın CreateMyUI() adlı bir fonksiyon oluştur. 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 türünü [player]?canvas olarak değiştir: var MaybeMyUIPerPlayer : [player]?canvas = map{}

4. NewUI atamasını, CreateMyUI() adlı yeni fonksiyonunu çağıracak şekilde değiştir.

   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. Oyuncunun tuval oluşturulduğunda imlecini kullanabilmesi için yeni bir widget eklerken player_ui_slot{InputMode := ui_input_mode.All} bağımsız değişkenini ekle.

   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. Tüm kullanıcı arayüzü butonlarında abone olabileceğin bir OnClick() listenable olayı vardır. Olay işleyicinin bir void dönüş türüne ve widget_message türünde bir parametreye sahip olması beklenir. 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 = # Oyuncu butona bastığında ne olacağını tanımla

7. HandleSelectedUIButton olayında butonun metnini ekrana yazdır ve widget’ı ekrandan kaldır. widget_message, hangi oyuncunun ve kullanıcı arayüzü öğesinin onu seçtiğini bilir, dolayısıyla oyuncuya gösterilen widget’ı ekrandan kaldırmak için buton metnine erişmek ve söz konusu widget’ı bulmak üzere bu bilgiyi kullanabilirsin.

   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. Bu örnek için tam kod aşağıdaki gibidir.

   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)

Kaydırıcı Etkileşimleri

Kaydırıcılı bir kullanıcı arayüzü oluşturmak ve oyuncu kaydırıcıyla etkileşime geçtiğinde ayarlanan değeri ekrana yazdıran bir davranış eklemek için şu adımları izle:

1. Buton Etkileşimleri içinde oluşturduğunuz Verse dosyasını açar.

2. CreateMyUI() adlı fonksiyonu kaydırıcıyla güncelle. 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. Tüm kullanıcı arayüzü kaydırıcılarında abone olabileceğin bir OnValueChanged() listenable olayı vardır. Olay işleyicinin bir void dönüş türüne ve widget_message türünde bir parametreye sahip olması beklenir. 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 = # Oyuncu kaydırıcının değerini değiştirdiğinde ne olacağını tanımla

4. HandleValueChangedUISlider içinde kaydırıcının değerini ekrana yazdır. Bir widget_message, hangi oyuncunun kullanıcı arayüzüyle etkileşime geçtiğini ve kullanıcı arayüzü öğesini seçtiğini bilir, dolayısıyla kaydırıcının değerine erişmek ve oyuncuyua gösterilen widget’ı bulmak için bu bilgiyi kullanabilirsin.

   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. Bu örnek için tam kod aşağıdaki gibidir.

   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)