Exemples de champs Verse

Les champs Verse peuvent être définis directement dans UMG. Les variables sont créées dans un widget utilisateur, puis liées aux propriétés du widget dans le code Verse. Les variables transmettent les données Verse et sont spécifiées dans le résumé des ressources. Elles permettent également de créer une interface utilisateur dynamique personnalisée sans dépendre des modèles d'affichage des appareils. 

Exemple d'interface des transactions sur l'île

L'exemple de vitrine est développé dans l'API Marketplace en ajoutant des éléments d'interface utilisateur personnalisés via les champs Verse et l'interface utilisateur Verse. Les données sont transmises de l'API à une couche de données, et une classe Verse est utilisée pour effectuer le suivi des joueurs et répondre aux joueurs qui achètent des objets.

Les fichiers suivants du modèle définissent l'apparence de l'interface utilisateur personnalisée : 

• shop_setup_device_template : ce fichier définit var Shop et appelle la fonction ShowUI pour afficher l'interface codée dans le fichier ui_shop.

• ui_shop : une classe qui regroupe tous les widgets dans un fichier Verse via l'interface utilisateur Verse. UMG gère l'image du personnage, les détails des objets, les en-têtes et les prix, ainsi que les rangées d'objets. L'API Verse gère les couches d'arrière-plan et les boutons.

• ui_shop_offer_item : une classe à ajouter au bouton Afficher de chaque rangée d'objets.

• link_volume_to_shop_device : un script d'appareil qui utilise l'appareil Volume comme déclencheur pour afficher l'interface de la boutique.

L'ensemble des matériaux, textures et widgets utilisateur utilisés dans cet exemple se trouvent dans les dossiers IU > Verse > InIslandTransaction.

Interface utilisateur de la boutique

La conception de l'interface utilisateur de la boutique principale est codée dans un widget de superposition nommé Racine. Le widget de superposition racine utilise un bloc de matériaux pour appeler les instances de matériaux pour les matériaux d'arrière-plan de l'arrière-plan principal et de l'arrière-plan de l'offre.

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 deuxième widget de superposition est ajouté, qui contient une boîte empilable. La boîte empilable est utilisée pour créer le corps des offres. L'emplacement de boîte empilable final est réservé à OfferDetailsOverlayRoot, qui est un widget utilisateur contenant la conception des détails.

 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 fonction PopulateOffers génère le nombre de rangées d'objets saisi pour chaque objet répertorié dans OfferItemWidget, créant ainsi une action répétable qui s'applique à chaque offre dans la boîte empilable. Par exemple, si vous avez trois offres, cette fonction crée trois widgets d'offre pour chacun de vos objets.

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


            var OfferItemWidget : ui_shop_offer_item = ui_shop_offer_item {}

Pour chaque offre, la fonction UpdateSelectedOfferDetails met à jour les données suivantes :

• Nom

• Icône

• ShortDescription

• PriceFloat

    UpdateSelectedOfferDetails(SelectedOffer : offer) : void =


        var PriceFloat : float = 0.0


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

La méthode HandleBuyButtonClicked dirige le joueur vers le processus de paiement d'Epic Games lorsqu'il effectue un achat.

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

Déclenchement d'appareil

Dans cet exemple, un appareil Volume sert de déclencheur pour ouvrir l'interface utilisateur de la boutique. Vous pouvez utiliser n'importe quel appareil comme déclencheur de remplacement, voire pas d'appareil du tout. Les joueurs peuvent interagir avec les objets individuellement afin d'ouvrir l'interface utilisateur.

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