Esempi di campi Verse

I campi Verse possono essere definiti direttamente in UMG. Le variabili vengono create in un widget utente che viene poi collegato alle proprietà del widget nel codice Verse. Le variabili comunicano dati Verse e vengono riportate nel digest degli asset; inoltre permettono di creare una UI dinamica personalizzata, senza doversi affidare ai modelli di visualizzazione dei dispositivi. 

Esempio di UI per transazioni all'interno dell'isola

L'esempio della vetrina si estende all'API Marketplace, aggiungendo elementi di UI personalizzati tramite i campi Verse e l'interfaccia utente di Verse. I dati vengono riportati dall'API a un layer dati, mentre la classe Verse viene impiegata per monitorare i giocatori e rispondere ai loro acquisti di oggetti.

I seguenti file nel modello creano il look della UI personalizzata: 

• shop_setup_device_template - Questo file definisce la var Shop e richiama la funzione ShowUI per visualizzare la UI codificata nel file ui_shop.

• ui_shop - Una classe che consolida tutti i widget in un file Verse attraverso la UI Verse. UMG gestisce l'immagine del personaggio, i dettagli dell'oggetto, i titoli e il prezzo, oltre alle righe di oggetti. L'API Verse gestisce gli strati di sfondo e i pulsanti.

• ui_shop_offer_item - Una classe per aggiungere il pulsante Visualizza a ogni riga di oggetti.

• link_volume_to_shop_device - Uno script per dispositivo che utilizza il dispositivo Volume come attivatore per mostrare l'interfaccia del negozio.

Tutti i materiali, le texture e i widget utente utilizzati in questo esempio si trovano nella cartella UI > Verse > InIslandTransaction.

UI del negozio

Il design della UI principale del negozio è codificato in un OverlayRoot. L'OverlayRoot sfrutta un blocco materiale per richiamare le istanze Materiale per lo sfondo principale e quello dell'offerta.

set OverlayRoot = overlay:
            Slots := array:
                overlay_slot:
                    Widget := BackgroundWidget                      
                    VerticalAlignment := vertical_alignment.Fill
                    HorizontalAlignment := horizontal_alignment.Fill                    
                overlay_slot:
                    Widget := CloseButton
                    Padding := margin {Left := 824.0, Bottom := 30.0}
                    VerticalAlignment := vertical_alignment.Bottom

Un secondo widget di overlay contenente un riquadro stack viene quindi aggiunto. Tale riquadro serve a creare il corpo delle offerte. L'ultimo slot per riquadro stack è riservato all'OfferDetailsOverlayRoot, che è un widget utente contenente il design dei dettagli.

 overlay_slot:
                                Widget := stack_box:
                                    Orientation := orientation.Horizontal
                                    Slots := array:
                                        stack_box_slot:
                                            Widget := stack_box:
                                                Orientation := orientation.Vertical
                                                Slots := array:
                                                    stack_box_slot:
                                                        Widget := HeaderWidget

PopulateOffers

La funzione PopulateOffers crea il numero di righe oggetti inserite per ogni oggetto elencato nell'OfferItemWidget, generando così un'azione ripetibile che funziona per qualsiasi offerta presente nel riquadro stack. Ad esempio, se hai tre offerte, questa funzione creerà tre widget per offerte per ciascuno dei tuoi oggetti.

    PopulateOffers(InOffers:[]offer) : void =
       
        for (Offer : InOffers):


            var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}

Per ciascuna offerta, la funzione UpdateSelectedOfferDetails aggiorna i seguenti dati:

• Name (nome)

• Icon (icona)

• ShortDescription (descrizione breve)

• PriceFloat (float prezzo)

    UpdateSelectedOfferDetails(SelectedOffer : offer) : void =


        var PriceFloat : float = 0.0


            if (PriceVB := price_vbucks[SelectedOffer.Price]):
                set PriceFloat = GetPriceVBucks(PriceVB)

Il metodo HandleBuyButtonClicked invia il giocatore nel flusso di lavoro del pagamento di Epic Games, non appena viene effettuato l'acquisto.

    HandleBuyButtonClicked(SelectedOffer : offer) <suspends> : void =
       
        BuyButton.OnClick().Await()
       
        if (PlayerUI := GetPlayerUI[Player]):
            HideUI(PlayerUI)
       
        BuyOffer(Player, SelectedOffer)

Attivatore di dispositivo

In questo esempio, un dispositivo Volume viene utilizzato come attivatore per aprire la UI del negozio. Tuttavia, puoi utilizzare qualsiasi dispositivo come attivatore sostitutivo, oppure non utilizzare alcun dispositivo. I giocatori possono selezionare gli oggetti individualmente, aprendo la relativa UI.

# A Verse-authored creative device that can be placed in a level
link_volume_to_shop_device := class(creative_device):

    @editable
    var ShopTemplate:shop_setup_device_template = shop_setup_device_template{}
    
    @editable
    var OfferVolume:volume_device = volume_device{}