Cet tutoriel montre comment utiliser les méthodes SDK pour implémenter :

• l’inscription utilisateur ;
• la demande utilisateur de renvoi d’e-mail de confirmation d’inscription ;
• la connexion utilisateur ;
• la réinitialisation du mot de passe utilisateur.

Code source

Voir le code source des exemples sur GitHub.

Implémenter l'inscription utilisateur

Créer un widget

1. Accédez à Content Browser et créez un répertoire UI. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • champ de nom d'utilisateur ;
   • champ d'adresse e-mail ;
   • champ de mot de passe ;
   • bouton d'inscription.

L’image ci-dessous montre un exemple de structure de la page.

3. Ouvrez un blueprint de niveau :
   1. Choisissez un niveau dans Content Browser ;
   2. Dans le menu principal, accédez à Blueprints > Open Level Blueprint.
4. Implémentez l'affichage du widget à l'exécution du niveau. Pour ce faire, ajoutez des nœuds comme illustré ci-dessous. Dans le nœud CreateWidget, spécifiez le widget créé.

Ajouter la gestion des événements

1. Dans le panneau Hierarchy, sélectionnez un bouton d'inscription.
2. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

3. Ouvrez une vue Graph.
4. Liez l'appel à la méthode SDK RegisterUser sur l'objet XsollaLoginSubsystem au nœud OnClicked et implémentez le passage de données saisies par l'utilisateur.
5. Implémentez les fonctions de rappel :
   • OnRegistered — appelée après une inscription réussie ;
   • OnError — appelée en cas d'erreur.

6. Pour démarrer le débogage du widget, exécutez le niveau.

Exemple d’implémentation de la gestion des événements :

Configurer un e-mail de confirmation d'inscription

Après une inscription réussie, l’utilisateur reçoit un e-mail de confirmation d’inscription à l’adresse spécifiée. Vous pouvez customiser les e-mails envoyés aux utilisateurs dans le Compte éditeur.

Si vous développez une application Android, configurez les liens profonds pour renvoyer l’utilisateur à l’application après la confirmation d’inscription.

Implémenter la demande utilisateur de renvoi d'e-mail de confirmation d'inscription

Créer un widget

1. Accédez à Content Browser et ouvrez un répertoire UI. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • champ de nom d'utilisateur/adresse e-mail ;
   • bouton de renvoi d'e-mail.

L’image ci-dessous montre un exemple de structure de la page.

3. Ouvrez un blueprint de niveau :
   1. Choisissez un niveau dans Content Browser ;
   2. Dans le menu principal, accédez à Blueprints > Open Level Blueprint.
4. Dans le nœud CreateWidget, spécifiez le widget créé.

Ajouter la gestion des événements

1. Dans le panneau Hierarchy, sélectionnez un bouton de renvoi d'e-mail.
2. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

3. Ouvrez une vue Graph.
4. Liez l'appel à la méthode SDK ResendAccountConfirmationEmail sur l'objet XsollaLoginSubsystem au nœud OnClicked et implémentez le passage de données saisies par l'utilisateur.
5. Implémentez les fonctions de rappel OnEmailResent et OnError.
6. Pour démarrer le débogage du widget, exécutez le niveau.

Après une demande réussie, l’utilisateur reçoit un e-mail de confirmation d’inscription à l’adresse e-mail spécifiée lors de l’inscription.

Exemple d’implémentation de la gestion des événements :

Implémenter la connexion utilisateur

Créer un widget

1. Accédez à Content Browser et ouvrez un répertoire UI. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • champ de nom d'utilisateur ;
   • champ de mot de passe ;
   • case à cocher se souvenir de moi ;
   • bouton de connexion.

L’image ci-dessous montre un exemple de structure de la page.

3. Ouvrez un blueprint de niveau :
   1. Choisissez un niveau dans Content Browser ;
   2. Dans le menu principal, accédez à Blueprints > Open Level Blueprint.
4. Dans le nœud CreateWidget, spécifiez le widget créé.

Ajouter la gestion des événements

1. Dans le panneau Hierarchy, sélectionnez un bouton de connexion.
2. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

3. Ouvrez une vue Graph.
4. Liez l'appel à la méthode SDK AuthenticateUser sur l'objet XsollaLoginSubsystem au nœud OnClicked et implémentez le passage de données saisies par l'utilisateur.
5. Implémentez les fonctions de rappel OnAuthenticated et OnError.

6. Pour démarrer le débogage du widget, exécutez le niveau.

Exemple d’implémentation de la gestion des événements :

Implémenter la réinitialisation du mot de passe utilisateur

Créer un widget

1. Accédez à Content Browser et ouvrez un répertoire UI. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • champ de nom d'utilisateur/adresse e-mail ;
   • bouton de réinitialisation du mot de passe.

L’image ci-dessous montre un exemple de structure de la page.

3. Ouvrez un blueprint de niveau :
   1. Choisissez un niveau dans Content Browser ;
   2. Dans le menu principal, accédez à Blueprints > Open Level Blueprint.
4. Dans le nœud CreateWidget, spécifiez le widget créé.

Ajouter la gestion des événements

1. Dans le panneau Hierarchy, sélectionnez un bouton de réinitialisation du mot de passe.
2. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

3. Ouvrez une vue Graph.
4. Liez l'appel à la méthode SDK ResetUserPassword sur l'objet XsollaLoginSubsystem au nœud OnClicked et implémentez le passage de données saisies par l'utilisateur.
5. Implémentez les fonctions de rappel OnEmailSent et OnError.
6. Pour démarrer le débogage du widget, exécutez le niveau.

Exemple d’implémentation de la gestion des événements :

Après une demande de réinitialisation de mot de passe réussie, l’utilisateur reçoit un e-mail contenant un lien de réinitialisation du mot de passe. Accédez au Compte éditeur sous la section votre projet de connexion > Security > OAuth 2.0 > OAuth 2.0 redirect URIs pour configurer une adresse URL ou un chemin vers lequel l’utilisateur est redirigé après une authentification, une confirmation par e-mail ou une réinitialisation du mot de passe réussies.

Ce guide explique comment utiliser les méthodes SDK pour implémenter l’inscription et la connexion utilisateur via un compte de réseau social.

Contrairement à l’authentification utilisateur par nom d’utilisateur/adresse e-mail et mot de passe, vous n’avez pas à implémenter de logique distincte pour l’inscription des utilisateurs. Si l’utilisateur se connecte pour la première fois via un réseau social, un nouveau compte est automatiquement créé.

Si vous avez implémenté la connexion via les réseaux sociaux dans votre application comme méthode d’authentification alternative, le compte de réseau social est automatiquement lié à un compte utilisateur existant si les conditions suivantes sont remplies :

• l'utilisateur inscrit par nom d'utilisateur/adresse e-mail et mot de passe se connecte à votre application via un compte de réseau social ;
• le réseau social renvoie une adresse e-mail ;
• l'adresse e-mail de l'utilisateur sur le réseau social est la même que l'adresse e-mail utilisée pour l'inscription dans votre application.

Code source

Voir le code source des exemples sur GitHub.

Les exemples montrent comment configurer la connexion utilisateur via un compte Twitter. Vous pouvez configurer tous les réseaux sociaux de la même manière.

La logique et l’interface des exemples sont simples, celles de votre application seront bien plus complexes. Le projet de démo décrit une option possible d’implémentation du système d’authentification.

Créer un widget

1. Accédez à Content Browser et créez un répertoire UI.
2. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
3. Dans le blueprint du widget, ajoutez le bouton de connexion via un réseau social.

L’image ci-dessous montre un exemple de structure de la page.

4. Ouvrez un blueprint de niveau :
   1. Choisissez un niveau dans Content Browser ;
   2. Dans le menu principal, accédez à Blueprints > Open Level Blueprint.
5. Implémentez l'affichage du widget à l'exécution du niveau. Pour ce faire, ajoutez des nœuds comme illustré ci-dessous. Dans le nœud CreateWidget, spécifiez le widget créé.

Ajouter la gestion des événements

1. Dans le panneau Hierarchy, sélectionnez un bouton de connexion.
2. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

3. Ouvrez une vue Graph.
4. Implémentez une page de connexion qui s'ouvre dans un navigateur intégré :

1. 1. Liez un appel à la méthode SDK GetSocialAuthenticationUrl sur l'objet XsollaLoginSubsystem au nœud OnClicked et implémentez le passage de données saisies par l'utilisateur. Passez la valeur Twitter au paramètre ProviderName ;
   2. Ajoutez les fonctions de rappel :
      • OnUrlReceived — appelée si l'URL de la page est reçue avec succès. L'URL reçue est passée dans le paramètre Url,
      • OnError — appelée en cas d'erreur.

5. Implémenter la connexion utilisateur :
   1. appelez la méthode SDK LaunchSocialAuthentication sur l'objet XsollaLoginSubsystem ;
   2. Passez l'URL de la page de connexion.

6. Pour obtenir un jeton, suivez la modification de l'URL de la page de connexion après une connexion utilisateur réussie :
   1. Implémentez la fermeture du navigateur après une connexion réussie ;
   2. Appelez la méthode OnSocialAuthCompleted et abonnez-vous à l'événement BrowserClosed.

Ce tutoriel montre comment utiliser les méthodes SDK pour afficher les objets suivants dans le magasin en jeu :

• objets virtuels ;
• groupes d’objets virtuels ;
• lots ;
• packages de monnaie virtuelle.

Code source

Voir le code source des exemples sur GitHub.

Avant de commencer, configurez les objets dans le Compte éditeur :

1. Configurez les objets virtuels et les groupes d’objets virtuels.
2. Configurez les packages de monnaie virtuelle.
3. Configurez les lots.

La logique et l’interface des exemples sont simples, celles de votre application seront bien plus complexes. Le projet de démo décrit une option possible d’implémentation du catalogue des objets dans le magasin en jeu.

Créer un widget de page de catalogue

1. Accédez à Content Browser et créez un répertoire UI.
2. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
3. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :

1. • boutons pour basculer entre l'affichage des objets et celui de packages de monnaie virtuelle ;
   • zone d'affichage des groupes d'objets ;
   • zone d'affichage de la liste des objets ;
   • zone d'affichage de la liste des packages de monnaie virtuelle.

L’image ci-dessous montre un exemple de structure de la page.

4. Ouvrez un blueprint de niveau :
   1. Choisissez un niveau dans Content Browser ;
   2. Dans le menu principal, accédez à Blueprints > Open Level Blueprint.
5. Implémentez l'affichage du widget à l'exécution du niveau. Pour ce faire, ajoutez des nœuds comme illustré ci-dessous. Dans le nœud CreateWidget, spécifiez le widget créé.

Ajouter un widget de gestion des événements pour la page de catalogue

1. Dans le panneau Hierarchy, sélectionnez un bouton pour passer à la liste des objets.
2. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

3. Dans le panneau Hierarchy, sélectionnez un bouton pour passer à liste des packages de monnaie virtuelle.
4. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

5. Ouvrez une vue Graph.
6. Implémentez la logique pour basculer d'une liste à l'autre. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Implémenter l'affichage de groupes d'objets virtuels

Créer une classe de groupe d'objets

1. Accédez à Content Browser. Dans le menu contextuel, cliquez sur Blueprint Class.
2. Dans la section All classes, sélectionnez Object, puis cliquez sur Select.
3. Utilisez BP_ItemGroupData comme nom de classe.
4. Ouvrez le blueprint de la classe créée.
5. Dans le panneau My Blueprint, cliquez sur Add New et sélectionnez Variable.
6. Dans le panneau Details :

1. 1. Spécifiez GroupData dans le champ Variable Name ;
   2. Sélectionnez XsollaItemGroup dans le champ Variable Type ;
   3. Cochez les cases Instance Editable et Expose on Spawn.

Créer un widget de groupe d'objets

1. Accédez à Content Browser et créez un répertoire UI, puis, dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez un élément pour le nom du groupe d'objets.

L’image ci-dessous montre un exemple de structure du widget.

3. Ouvrez une vue Graph.
4. Cliquez sur Class settings.
5. Dans le panneau Details, accédez à Interfaces > Implemented interfaces.
6. Cliquez sur Add et sélectionnez UserObjectListEntry. Il s'agit d'une interface UE standard qui permet à la primitive d'interface d'implémenter un comportement normal pour l'élément de la liste.
7. Implémentez la logique de création d'un groupe d'objets :

1. 1. Ajoutez le nœud EventOnListItemObjectSet pour créer un élément de la liste et initialiser le widget ;
   2. Passez la valeur de l'objet stockant les données du groupe à l'élément contenant le nom du groupe. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous ;

1. 3. Implémentez la logique d'affichage de tous les objets dans la catégorie All. Pour ce faire, modifiez le blueprint comme illustré dans l'image ci-dessous

8. Implémentez la logique pour mettre en surbrillance un groupe d'objets sélectionné dans la liste. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Ajouter une liste de groupes d'objets à la page du catalogue

1. Ouvrez le blueprint du widget de la page du catalogue.
2. Ajoutez l'élément List View à la zone d'affichage des groupes d'objets.
3. Sous le panneau Details, dans le champ Entry Widget Class, sélectionnez la classe créée précédemment pour un groupe d'objets.
4. Implémentez la logique d'ajout d'objets aux groupes :

1. 1. Ouvrez une vue Graph ;
   2. Liez l'appel à la méthode SDK GetItemGroups sur l'objet XsollaLoginSubsystem au nœud EventConstruct et implémentez le passage de données saisies par l'utilisateur et implémentez le passage de données saisies par l'utilisateur ;
   3. Implémentez la logique d'ajout d'objets aux groupes. Cette action doit être effectuée lors du traitement d'une mise à jour réussie des groupes d'objets virtuels. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

5. Implémentez la logique d'affichage de tous les objets dans la catégorie All. Pour ce faire, modifiez le blueprint comme illustré dans l'image ci-dessous

Implémenter l'affichage des objets virtuels

Créer une classe d'objet

1. Accédez à Content Browser. Dans le menu contextuel, cliquez sur Blueprint Class.
2. Dans la section All classes, sélectionnez Object, puis cliquez sur Select.
3. Utilisez BP_CatalogItemData comme nom de classe.
4. Ouvrez le blueprint de la classe créée.
5. Dans le panneau My Blueprint, cliquez sur Add New et sélectionnez Variable.
6. Dans le panneau Details :

1. 1. Spécifiez CatalogItem dans le champ Variable Name ;
   2. Sélectionnez StoreItem dans le champ Variable Type ;
   3. Cochez les cases Instance Editable et Expose on Spawn.

Créer un widget d'objet

1. Accédez à Content Browser et créez un répertoire UI. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • nom d'objet ;
   • prix de l'objet.

L’image ci-dessous montre un exemple de structure du widget.

3. Ouvrez une vue Graph.
4. Cliquez sur Class settings.
5. Dans le panneau Details, accédez à Interfaces > Implemented interfaces.
6. Cliquez sur Add et sélectionnez UserObjectListEntry. Il s'agit d'une interface UE standard qui permet à la primitive d'interface d'implémenter un comportement normal pour l'élément de la liste.
7. Implémentez la logique de création d'un groupe d'objets :

1. 1. Ajoutez le nœud EventOnListItemObjectSet pour créer un élément de la liste et initialiser le widget ;
   2. Passez les valeurs de l'objet stockant les données de l'objet aux éléments contenant le nom de l'objet et son prix. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Ajouter une liste d'objets à la page du catalogue

1. Ouvrez le blueprint du widget de la page du catalogue.
2. Ajoutez l'élément List View à la zone d'affichage de la liste d'objets.
3. Sous le panneau Details, dans le champ Entry Widget Class, sélectionnez la classe créée précédemment pour un objet.
4. Implémentez la logique d'ajout d'objets aux groupes :

1. 1. Ouvrez une vue Graph ;
   2. Liez l'appel à la méthode SDK GetVirtualItems sur l'objet XsollaLoginSubsystem au nœud EventConstruct et implémentez le passage de données saisies par l'utilisateur et implémentez le passage de données saisies par l'utilisateur ;
   3. Implémentez la logique d'ajout d'objets aux groupes. Cette action doit être effectuée lors du traitement d'une mise à jour réussie des groupes d'objets virtuels. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

5. Implémentez la logique de vérification de l'appartenance d'un objet à un groupe spécifique. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

6. Implémentez la logique d'ajout d'objets aux groupes. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Implémenter l'affichage des objets virtuels par groupes

1. Ouvrez le blueprint du widget de la page du catalogue.
2. Dans le panneau Hierarchy, sélectionnez la liste des groupes d'objets.
3. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Item Clicked.

4. Ouvrez une vue Graph.
5. Implémentez la logique pour filtrer les objets par groupes. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Implémenter l'affichage des lots

Dans cette instruction, les lots et les objets virtuels sont affichés dans une seule liste. De plus, nous utilisons le même widget pour afficher un seul lot ou un seul objet.

Ajouter la liste des lots sur la page du catalogue

1. Ouvrez le blueprint d'une page de catalogue.
2. Ouvrez une vue Graph.
3. Complétez la logique d'ajout de lots à une liste. Implémentez l'appel à la méthode SDK GetBundles en séquence avec celui à la méthode GetVirtualItems, comme illustré dans l'image ci-dessous.

Compléter le widget d'objet

1. Ouvrez le blueprint d'un widget d'objet.
2. Ajoutez un bouton pour afficher le contenu du lot à côté du nom de l'objet.

L’image ci-dessous montre un exemple de structure du widget.

3. Ouvrez une vue Graph.
4. Complétez la logique de création d'un objet en ajoutant une condition d'affichage pour le bouton d'affichage du contenu du lot. Un exemple est présenté dans l'image ci-dessous.

Ajouter une logique d'affichage du contenu du lot

1. Dans le blueprint du widget d'objet, ouvrez une vue Designer.
2. Dans le panneau Hierarchy, sélectionnez un bouton pour afficher le contenu du lot.
3. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

4. Ouvrez une vue Graph.
5. Implémentez la logique d'affichage du contenu du lot (liste des objets dans le lot avec la quantité de chaque objet). Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Implémenter l'affichage des packages de monnaie virtuelle

Créer une classe de package de monnaie virtuelle

1. Accédez à Content Browser. Dans le menu contextuel, cliquez sur Blueprint Class.
2. Dans la section All classes, sélectionnez Object, puis cliquez sur Select.
3. Utilisez BP_VcPackItemData comme nom de classe.
4. Ouvrez le blueprint de la classe créée.
5. Dans le panneau My Blueprint, cliquez sur Add New et sélectionnez Variable.
6. Dans le panneau Details :

1. 1. Spécifiez PackItem dans le champ Variable Name ;
   2. Sélectionnez VirtualCurrencyPackage dans le champ Variable Type ;
   3. Cochez les cases Instance Editable et Expose on Spawn.

Créer un widget de package de monnaie virtuelle

1. Accédez à Content Browser et créez un répertoire UI. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • nom de package ;
   • prix du package.

L’image ci-dessous montre un exemple de structure du widget.

3. Ouvrez une vue Graph.
4. Cliquez sur Class settings.
5. Dans le panneau Details, accédez à Interfaces > Implemented interfaces.
6. Cliquez sur Add et sélectionnez UserObjectListEntry. Il s'agit d'une interface UE standard qui permet à la primitive d'interface d'implémenter un comportement normal pour l'élément de la liste.
7. Implémentez la logique de création d'un groupe d'objets :

1. 1. Ajoutez le nœud EventOnListItemObjectSet pour créer un élément de la liste et initialiser le widget ;
   2. Passez la valeur de l'objet stockant les données du package à l'élément contenant le nom et le prix du package. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Ajouter la liste des packages de monnaie virtuelle sur la page du catalogue

1. Ouvrez le blueprint du widget de la page du catalogue.
2. Ajoutez l'élément List View à la zone d'affichage de la liste des packages de monnaie virtuelle.
3. Sous le panneau Details, dans le champ Entry Widget Class, sélectionnez la classe créée précédemment pour le package de monnaie virtuelle.
4. Implémentez la logique d'ajout de packages à la liste :

1. 1. Ouvrez une vue Graph ;
   2. Liez l'appel à la méthode SDK GetVirtualCurrencyPackage sur l'objet XsollaStoreSubsystem au nœud EventConstruct et implémentez le passage de données saisies par l'utilisateur ;
   3. Implémentez la logique d'ajout d'un package à la liste. Cette action doit être effectuée lors du traitement d'une mise à jour réussie des packages de monnaie virtuelle. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Cette instruction montre comment utiliser les méthodes SDK pour implémenter la vente d’objets virtuels contre des devises réelles.

Avant de commencer, implémentez l’affichage des objets virtuels dans le catalogue. Dans l’exemple suivant, nous décrivons comment implémenter l’achat d’objets virtuels. La configuration pour les autres types de biens est similaire.

La logique et l’interface des exemples sont simples, celles de votre application seront bien plus complexes. Le projet de démo décrit une option possible d’implémentation de la vente de biens contre des devises réelles et de l’affichage du catalogue des objets.

Code source

Voir le code source des exemples sur GitHub.

Complet le widget de la page du catalogue

1. Ouvrez le widget de la page du catalogue.
2. Ouvrez une vue Graph.
3. Pour ouvrir la page de paiement dans un navigateur :
   1. Implémentez l'obtention d'un jeton de paiement :
      1. Ajoutez le nœud InitiatePurchase et liez à celui-ci l'appel à la méthode SDK FetchPaymentToken sur l'objet XsollaStoreSubsystem ;
      2. À la méthode FetchPaymentToken, passez l'UGS de l'objet acheté et du jeton d'autorisation utilisateur.

1. 2. Appelez la méthode SDK LaunchPaymentConsole sur l'objet XsollaStoreSubsystem et passez-lui un jeton de paiement.

Exemple d’implémentation de l’ouverture de la page de paiement et de l’obtention du statut du paiement :

Compléter la classe d'objet

1. Ouvrez le blueprint BP_CatalogItemData.
2. Dans le panneau My Blueprint, cliquez sur Add New et sélectionnez Variable.
3. Dans le panneau Details :

1. 1. Spécifiez CatalogWidget dans le champ Variable Name ;
   2. Sélectionnez W_StoreCatalog dans le champ Variable Type ;
   3. Cochez les cases Instance Editable et Expose on Spawn.

Le résultat est que chaque élément de la liste sera lié à un widget parent et pourra appeler ses méthodes.

Compléter l'ajout d'une liste d'objets à la page du catalogue

1. Ouvrez le blueprint du widget de page du catalogue.
2. Ouvrez une vue Graph.
3. Modifiez la logique de remplissage de la liste des objets comme illustré dans l'image ci-dessous.

Compléter le widget d'objet

1. Ouvrez le blueprint d'un widget d'objet.
2. Ajoutez un bouton d'achat d'objet.

L’image ci-dessous montre un exemple de structure du widget.

3. Dans le panneau Hierarchy, sélectionnez un bouton pour passer d'achat d'objet.
4. Dans le panneau Details, cliquez sur l'icône + à côté de l'événement On Clicked.

5. Ouvrez une vue Graph.
6. Implémentez la logique pour le clic sur un bouton d'achat d'objet. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Par conséquent, lorsque l’utilisateur clique sur le bouton d’achat d’un objet, la page de paiement s’ouvre dans le navigateur selon la logique implémentée dans le widget de la page du catalogue.

Cette instruction montre comment utiliser les méthodes SDK pour implémenter la vente d’objets virtuels contre de la monnaie virtuelle.

Avant de commencer, implémentez l’affichage des objets virtuels dans le catalogue.

Note

Dans l’exemple suivant, nous décrivons comment implémenter l’achat d’objets virtuels. La configuration des autres types de biens est similaire.

Code source

Voir le code source des exemples sur GitHub.

La logique et l’interface des exemples sont simples, celles de votre application seront bien plus complexes. Le projet de démo décrit une option possible d’implémentation de la vente de biens contre de la monnaie virtuelle et de l’affichage du catalogue des objets.

Pour implémenter la vente d’objets virtuels contre de la monnaie virtuelle :

1. Ajoutez la logique d’achat d’un objet au widget de la page du catalogue.
2. Ajoutez à la classe d’objet le mécanisme d’initiation de la logique d’achat d’un objet.
3. Complétez l’ajout d’une liste d’objets à la page du catalogue.
4. Ajoutez un bouton d’achat au widget d’objet.
5. Ajoutez la logique d’achat contre de la monnaie virtuelle au widget d’objet :
   1. Ouvrez le blueprint du widget d’objet ;
   2. Accédez à une vue Graph ;
   3. Ajoutez des nœuds comme illustré ci-dessous.

Le résultat est que le prix en monnaie virtuelle spécifié pour un objet sera affiché dans le widget et utilisé pour acheter l’objet. Si le prix d’un objet est exprimé dans plusieurs monnaies virtuelles, la première monnaie virtuelle de la liste sera utilisée pour l’affichage et l’achat.

Ce tutoriel montre comment utiliser les méthodes SDK pour afficher les objets de l’inventaire utilisateur.

La logique et l’interface des exemples sont simples, celles de votre application seront bien plus complexes. Le projet de démo décrit une option possible d’implémentation du catalogue des objets dans le magasin en jeu.

Code source

Voir le code source des exemples sur GitHub.

Créer un widget de page d'inventaire

1. Accédez à Content Browser et créez un répertoire UI.
2. Dans le menu contextuel, accédez à User Interface > Widget Blueprint.
3. Dans le blueprint du widget, ajoutez la zone d'affichage de la liste des objets.

L’image ci-dessous montre un exemple de structure d’inventaire.

4. Ouvrez un blueprint de niveau :
   1. Choisissez un niveau dans Content Browser ;
   2. Dans le menu principal, accédez à Blueprints > Open Level Blueprint.
5. Implémentez l'affichage du widget à l'exécution du niveau. Pour ce faire, ajoutez des nœuds comme illustré ci-dessous. Dans le nœud CreateWidget, spécifiez le widget créé.

Créer une classe d'objet

1. Accédez à Content Browser. Dans le menu contextuel, cliquez sur Blueprint Class.
2. Dans la section All classes, sélectionnez Object, puis cliquez sur Select.
3. Utilisez BP_UserInventoryItemData comme nom de classe.
4. Ouvrez le blueprint de la classe créée.
5. Dans le panneau My Blueprint, cliquez sur Add New et sélectionnez Variable.
6. Dans le panneau Details :

1. 1. Spécifiez UserInventoryItem dans le champ Variable Name ;
   2. Sélectionnez InventoryItem dans le champ Variable Type ;
   3. Cochez les cases Instance Editable et Expose on Spawn.

7. Dans le panneau My Blueprint, cliquez sur Add New et sélectionnez Variable.
8. Dans le panneau Details :
   1. Spécifiez ExpiresIn dans le champ Variable Name ;
   2. Sélectionnez Integer64 dans le champ Variable Type.
   3. Cochez les cases Instance Editable et Expose on Spawn.

Créer un widget d'objet

1. Accédez à Content Browser et créez un répertoire UI, puis, dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • nom d'objet ;
   • fonctionnalité d'objet :
     • pour les objets à durée limitée — statut de l'objet (actif ou expiré),
     • pour les objets consommables — quantité d'objets,
     • pour les objets non consommables — aucune fonctionnalité n'est affichée.

L’image ci-dessous montre un exemple de structure du widget.

3. Ouvrez une vue Graph.
4. Cliquez sur Class settings.
5. Dans le panneau Details, accédez à Interfaces > Implemented interfaces.
6. Cliquez sur Add et sélectionnez UserObjectListEntry. Il s'agit d'une interface UE standard qui permet à la primitive d'interface d'implémenter un comportement normal pour l'élément de la liste.
7. Implémentez la logique de création d'un objet :

1. 1. Ajoutez le nœud OnListItemObjectSet pour créer un élément de la liste et initialiser le widget ;
   2. Passez la valeur de l'objet stockant les données de l'objet à l'élément contenant le nom de l'objet. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous ;

1. 3. Implémentez la logique de définition du type d'objet en passant les données sur l'objet en fonction de son type à l'élément contenant les caractéristiques de l'objet. Pour ce faire, ajoutez des nœuds comme illustré dans la photo ci-dessous.

Ajouter une liste d'objets à la page d'inventaire

1. Ouvrez le blueprint du widget de la page de l'inventaire.
2. Ajoutez l'élément List View à la zone d'affichage de la liste d'objets.
3. Sous le panneau Details, dans le champ Entry Widget Class, sélectionnez la classe créée précédemment pour un groupe objets.
4. Implémentez la logique d'ajout d'objets aux groupes :

1. 1. Ouvrez la vue Graph.
   2. Liez l'appel en séquence aux méthodes SDK GetInventory et GetTimeLimitedItems sur l'objet XsollaInventorySubsystem au nœud EventConstruct, comme illustré dans l'image ci-dessous :

1. 3. Implémentez la logique de remplissage de la liste des objets. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

1. 4. Ajoutez la logique de définition du délai d'expiration d'un objet à durée limitée dans le temps. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Ce tutoriel montre comment utiliser les méthodes SDK pour afficher le solde de la monnaie virtuelle dans votre application.

Dans l’exemple, les monnaies virtuelles et leur solde s’affichent dans l’inventaire utilisateur. Par conséquent, assurez-vous d’implémenter l’affichage des objets dans l’inventaire utilisateur avant de commencer.

La logique et l’interface des exemples sont simples, celles de votre application seront bien plus complexes. Le projet de démo décrit une option possible d’implémentation du catalogue des objets dans le magasin en jeu.

Code source

Voir le code source des exemples sur GitHub.

Créer une classe d'affichage du solde

1. Accédez à Content Browser. Dans le menu contextuel, cliquez sur Blueprint Class.
2. Dans la section All classes, sélectionnez Object, puis cliquez sur Select.
3. Utilisez BP_VcBalanceItemData comme nom de classe.
4. Ouvrez le blueprint de la classe créée.
5. Dans le panneau My Blueprint, cliquez sur Add New et sélectionnez Variable.
6. Dans le panneau Details :

1. 1. Spécifiez VcBalanceItem dans le champ Variable Name ;
   2. Sélectionnez VirtualCurrencyBalance dans le champ Variable Type ;
   3. Cochez les cases Instance Editable et Expose on Spawn.

Créer un widget d'affichage de solde

1. Accédez à Content Browser et créez un répertoire UI, puis, dans le menu contextuel, accédez à User Interface > Widget Blueprint.
2. Dans le blueprint du widget, ajoutez les éléments d'interface suivants :
   • nom de la monnaie virtuelle ;
   • quantité de la monnaie virtuelle.

L’image ci-dessous montre un exemple de structure du widget.

3. Ouvrez une vue Graph.
4. Cliquez sur Class settings.
5. Dans le panneau Details, accédez à Interfaces > Implemented interfaces.
6. Cliquez sur Add et sélectionnez UserObjectListEntry. Il s'agit d'une interface UE standard qui permet à la primitive d'interface d'implémenter un comportement normal pour l'élément de la liste.
7. Implémentez la logique d'ajout d'une monnaie virtuelle à la liste :

1. 1. Ajoutez le nœud EventOnListItemObjectSet pour créer un élément de la liste et initialiser le widget ;
   2. Passez les valeurs de l'objet stockant les données de l'objet aux éléments contenant le nom de l'objet et son prix. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.

Compéter le widget d'affichage de l'inventaire

1. Ouvrez le blueprint du widget de la page de l'inventaire.
2. Ajoutez l'élément List View à la zone d'affichage de la liste des monnaies virtuelles.
3. Sous le panneau Details, dans le champ Entry Widget Class, sélectionnez la classe créée précédemment pour l'affichage du solde.
4. Implémentez la logique de remplissage de la liste des monnaies virtuelles :

1. 1. Ouvrez une vue Graph ;
   2. Liez l'appel à la méthode SDK GetVirtualCurrencyBalance sur l'objet XsollaInventorySubsystem au nœud EventConstruct ;
   3. Implémentez la logique de remplissage de la liste des monnaies virtuelles. Cette action doit être effectuée lors du traitement d'une mise à jour réussie du solde de la monnaie virtuelle. Pour ce faire, ajoutez des nœuds comme illustré dans l'image ci-dessous.