SDK pour Cocos Creator / Intégrer le SDK côté application
  Retour à la documentation

SDK pour Cocos Creator

Intégrer le SDK côté application

  1. Concevez une interface pour le système de connexion, le magasin en jeu et les autres pages de votre application.
  2. Implémentez dans votre application la logique d'authentification utilisateur, d'affichage du magasin, d'achat, etc., en utilisant les méthodes SDK.
Note
Vous pouvez créer votre propre solution en suivant le manuel Cocos Creator ou utiliser la scène de démo comme modèle.
Pour commencer à utiliser les fonctionnalités de base du SDK, suivez ces tutoriels étape par étape :Les scripts utilisés sont disponibles dans le répertoire <xsollaExtention>/assets/scripts/samples du SDK.
Note
Les scripts des tutoriels utilisent des méthodes SDK. Assurez-vous d’avoir installer et initialiser le SDK correctement.

Inscription et connexion utilisateur par nom d'utilisateur/adresse e-mail et mot de passe

Ces instructions montrent comment utiliser les méthodes SDK pour implémenter ce qui suit :

Vous pouvez authentifier les utilisateurs à l’aide de leur nom d’utilisateur ou de leur adresse e-mail. Dans les exemples ci-dessous, nous authentifions les utilisateurs à l’aide de leur nom d’utilisateur, tandis que l’adresse e-mail est utilisée pour confirmer l’inscription et réinitialiser le mot de passe.

Note
Si vous utilisez le widget Login sur votre site (dans un magasin en ligne, par exemple), assurez-vous d’implémenter les mêmes méthodes d’authentification utilisateur sur votre site et dans votre application. Par défaut, le widget utilise l’adresse e-mail pour l’authentification. Pour configurer la connexion utilisateur par nom d’utilisateur, contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com.

Implémenter l'inscription utilisateur

Ce tutoriel décrit l’implémentation de la logique suivante :

Créer une interface de page

Créez une scène de page d’inscription et ajoutez les éléments suivants :

  • champ de nom d’utilisateur ;
  • champ d’adresse e-mail utilisateur ;
  • champ de mot de passe utilisateur ;
  • bouton d’inscription.

Exemple de structure de page :

Créer un composant de script d'inscription

  1. Créez un RegistrationComponent et ajoutez les propriétés suivantes :
    • usernameEditBox ;
    • emailEditBox ;
    • passwordEditBox ;
    • signUpButton — facultatif. Utilisé lors de la liaison d'une fonction de rappel au bouton à l'aide d'un code.

  1. Ajoutez à la classe RegistrationComponent une méthode qui est appelée lorsque l'utilisateur clique sur SignUpButton, et implémentez la logique pour gérer l'événement clic, comme indiqué dans l'exemple de script.
  2. Ajoutez RegistrationComponent au nœud de la scène. Vous pouvez ajouter un nouveau nœud ou utiliser un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  3. Liez les éléments de la scène aux propriétés de RegistrationComponent comme illustré dans l'image :

  1. Liez une fonction de rappel au bouton d'inscription de l'une des manières suivantes :
    • à l'aide du panneau Inspector, comme illustré dans l'image ci-dessous ;
    • en insérant le bloc de code ci-dessous dans le script de la page.

Liaison de fonction de rappel à l’aide du panneau Inspector :

Liaison de fonction de rappel à l’aide de code :

Copy
Full screen
Small screen
  • typescript
start() {
 this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
 }
Note

Dans les exemples de script, les méthodes onComplete et onError appellent la méthode standard console.log. En cas d’erreur, le code d’erreur et la description sont passés dans le paramètre error.

Vous pouvez ajouter d’autres actions, telles que l’ouverture d’une page de demande de renvoi d’e-mail d’inscription ou d’une page de connexion, après une inscription réussie.

Exemple de script de classe (RegistrationComponent) :
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('RegistrationComponent')
export class RegistrationComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(EditBox)
    emailEditBox: EditBox;

    @property(EditBox)
    passwordEditBox: EditBox;

    @property(Button)
    signUpButton: Button;

    start() {
        this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
    }

    onSignUpClicked() {
        XsollaAuth.registerNewUser(this.usernameEditBox.string, this.passwordEditBox.string, this.emailEditBox.string, 'xsollatest', null, null, token => {
            if(token != null) {
                console.log(`Successful login. Token - ${token.access_token}`);
            }
            else {
                console.log('Thank you! We have sent you a confirmation email');
            }
        }, err => {
            console.log(err);
        });
    }
}

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 mobile, configurez les liens profonds pour renvoyer l’utilisateur à l’application après la confirmation d’inscription.

Note
Vous pouvez désactiver la confirmation d’inscription par e-mail si vos normes de sécurité vous le permettent. Pour la désactiver, contactez votre responsable de la réussite client ou envoyez un e-mail à csm@xsolla.com.

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

Ce tutoriel décrit l’implémentation de la logique suivante :

Créer une interface de page

Créez une scène de page de demande de renvoi d’e-mail de confirmation et ajoutez les éléments suivants :

  • Champ de nom d’utilisateur/adresse e-mail ;
  • bouton de renvoi d’e-mail.

Exemple de structure de page :

Créer un composant de script de renvoi d'e-mail

  1. Créez un ResendConfirmationEmailComponent et ajoutez les propriétés suivantes :
    • usernameTextBox ;
    • resendEmailButton — facultatif. Utilisé lors de la liaison d'une fonction de rappel au bouton à l'aide d'un code.

  1. Ajoutez à la classe ResendConfirmationEmailComponent une méthode qui est appelée lorsque l'utilisateur clique sur ResendEmail, et implémentez la logique pour gérer l'événement clic, comme indiqué dans l'exemple de script.
  2. Ajoutez ResendConfirmationEmailComponent au nœud de la scène. Vous pouvez ajouter un nouveau nœud ou utiliser un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  3. Liez les éléments de la scène aux propriétés de ResendConfirmationEmailComponent comme illustré dans l'image :

  1. Liez une fonction de rappel au bouton de demande de renvoi d'e-mail de confirmation d'inscription de l'une des manières suivantes :
    • à l'aide du panneau Inspector, comme illustré dans l'image ci-dessous ;
    • en insérant le bloc de code ci-dessous dans le script de la page de demande de renvoi d'e-mail de confirmation.

Liaison de fonction de rappel à l’aide du panneau Inspector :

Liaison de fonction de rappel à l’aide de code :

Copy
Full screen
Small screen
  • typescript
start() {
	this.resendEmailButton.node.on(Button.EventType.CLICK, this.onResendEmailClicked, this);
  }

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.

Note

Dans les exemples de script, les méthodes onComplete et onError appellent la méthode standard console.log. Ajoutez d’autres actions si nécessaire.

En cas d’erreur, le code d’erreur et la description sont passés dans le paramètre error.

Exemple de script de classe (ResendConfirmationEmailComponent) :
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('ResendConfirmationEmailComponent')
export class ResendConfirmationEmailComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(Button)
    resendEmailButton: Button;

    start() {
        this.resendEmailButton.node.on(Button.EventType.CLICK, this.onResendEmailClicked, this);
    }

    onResendEmailClicked() {
        XsollaAuth.resendAccountConfirmationEmail(this.usernameEditBox.string, 'xsollatest', null, () => {
            console.log('A verification link has been successfully sent to your email');
        }, err => {
            console.log(err);
        });
    }
}

Implémenter la connexion utilisateur

Ce tutoriel décrit l’implémentation de la logique suivante :

Créer une interface de page

Créez une scène de page de connexion et ajoutez les éléments suivants :

  • champ de nom d’utilisateur ;
  • champ de mot de passe ;
  • bascule se souvenir de moi ;
  • bouton de connexion.

Exemple de structure de page :

Créer un composant de script de connexion

  1. Créez un LoginComponent et ajoutez les propriétés suivantes :
    • usernameEditBox ;
    • passwordEditBox ;
    • remeberMeToggle ;
    • loginButton — facultatif. Utilisé lors de la liaison d'une fonction de rappel au bouton à l'aide d'un code.

  1. Ajoutez à la classe LoginComponent une méthode qui est appelée lorsque l'utilisateur clique sur LoginButton, et implémentez la logique pour gérer l'événement clic, comme indiqué dans l'exemple de script.
  2. Ajoutez LoginComponent au nœud de la scène. Vous pouvez ajouter un nouveau nœud ou utiliser un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  3. Liez les éléments de la scène aux propriétés de LoginComponent comme illustré dans l'image :

  1. Liez une fonction de rappel au bouton de connexion de l'une des manières suivantes :
    • à l'aide du panneau Inspector, comme illustré dans l'image ci-dessous ;
    • en insérant le bloc de code ci-dessous dans le script de la page.

Liaison de fonction de rappel à l’aide du panneau Inspector :

Liaison de fonction de rappel à l’aide de code :

Copy
Full screen
Small screen
  • typescript
start() {
	 this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
  }
Note

Dans les exemples de script, les méthodes onComplete et onError appellent la méthode standard console.log. Ajoutez d’autres actions si nécessaire.

En cas d’erreur, le code d’erreur et la description sont passés dans le paramètre error.

Exemple de script de classe (LoginComponent) :
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox, Toggle } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('LoginComponent')
export class LoginComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(EditBox)
    passwordEditBox: EditBox;

    @property(Toggle)
    remeberMeToggle: Toggle;

    @property(Button)
    loginButton: Button;

    start() {
        this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
    }

    onLoginClicked() {
        XsollaAuth.authByUsernameAndPassword(this.usernameEditBox.string, this.passwordEditBox.string, this.remeberMeToggle.isChecked, token => {
            console.log('Successful login. Token - ${token.access_token}');
        }, err => {
            console.log(err);
        });
    }
}

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

Ce tutoriel décrit l’implémentation de la logique suivante :

Créer une interface de page

Créez une scène de page de réinitialisation de mot de passe et ajoutez ce qui suit :

  • champ de nom d’utilisateur ;
  • bouton de réinitialisation du mot de passe.

Exemple de structure de page :

Créer un composant de script de réinitialisation du mot de passe

  1. Créez un ResetPasswordComponent et ajoutez les propriétés suivantes :
    • usernameEditBox ;
    • resetPasswordButton — facultatif. Utilisé lors de la liaison d'une fonction de rappel au bouton à l'aide d'un code.

  1. Ajoutez à la classe ResetPasswordComponent une méthode qui est appelée lorsque l'utilisateur clique sur ResetPassword, et implémentez la logique pour gérer l'événement clic, comme indiqué dans l'exemple de script.
  2. Ajoutez LoginComponent au nœud de la scène. Vous pouvez ajouter un nouveau nœud ou utiliser un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  3. Liez les éléments de la scène aux propriétés de ResetPasswordComponent comme illustré dans l'image :

  1. Liez une fonction de rappel au bouton de réinitialisation du mot de passe de l'une des manières suivantes :
    • à l'aide du panneau Inspector, comme illustré dans l'image ci-dessous ;
    • en insérant le bloc de code ci-dessous dans le script de la page.

Liaison de fonction de rappel à l’aide du panneau Inspector :

Liaison de fonction de rappel à l’aide de code :

Copy
Full screen
Small screen
  • typescript
start() {
        this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
    }
Note

Dans les exemples de script, les méthodes onComplete et onError appellent la méthode standard console.log. Ajoutez d’autres actions si nécessaire.

En cas d’erreur, le code d’erreur et la description sont passés dans le paramètre error.

Exemple de script de classe (ResetPasswordComponent) :
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('ResetPasswordComponent')
export class ResetPasswordComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(Button)
    resetPasswordButton: Button;

    start() {
        this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
    }

    onResetPasswordClicked() {
        XsollaAuth.resetPassword(this.usernameEditBox.string, null, () => {
            console.log('Follow the instructions we sent to your email');
        }, err => {
            console.log(err);
        });
    }
}

Connexion via les réseaux sociaux

Note
Le SDK pour Cocos Creator prend en charge la connexion via les réseaux sociaux uniquement pour les builds Android et iOS.

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.

Ce tutoriel décrit l’implémentation de la logique suivante :

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

Les exemples sont fournis pour une introduction de base aux méthodes SDK. Les applications nécessitent généralement des interfaces et une logique plus complexes.

Créer une interface de page

Créez une scène de page de connexion et ajoutez-y le bouton de connexion via les réseaux sociaux.

Exemple de structure de page :

Créer un composant de script de connexion via les réseaux sociaux

  1. Créez un SocialLoginComponent. Pour lier une fonction de rappel au bouton de connexion via les réseaux sociaux en utilisant du code, ajoutez la propriété socialLoginButton.
  2. Ajoutez une méthode à la classe SocialLoginComponent qui est appelée lors du clic sur SocialLogin, et ajoutez la logique pour gérer l'événement de clic, comme illustré dans l'exemple de script.

  1. Ajoutez le SocialLoginComponent à un nœud sur la scène. Pour cela, ajoutez un nouveau nœud ou utilisez un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  2. Liez le bouton SocialLogin à la propriété socialLoginButton du SocialLoginComponent, comme illustré dans l'image :

  1. Liez une fonction de rappel au bouton de connexion via les réseaux sociaux de l'une des manières suivantes :
    • à l'aide du panneau Inspector, comme illustré dans l'image ci-dessous ;
    • en insérant le bloc de code ci-dessous dans le script de la page.

Liaison de fonction de rappel à l’aide du panneau Inspector :

Liaison de fonction de rappel à l’aide de code :

Copy
Full screen
Small screen
  • typescript
start() {
        this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
}
Note

Dans les exemples de script, les méthodes onComplete, onCanceled et onError appellent la méthode standard console.log. En cas d’erreur, le code d’erreur et la description sont passés dans le paramètre error.

Vous pouvez ajouter d’autres actions, telles que l’ouverture d’une page de demande de renvoi d’e-mail d’inscription ou d’une page de connexion, après une inscription réussie.

Exemple de script de classe (SocialLoginComponent) :
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component } from 'cc';
import { Token, XsollaAuth } from '../../api/XsollaAuth';
const { ccclass, property } = _decorator;


namespace authorization {

    @ccclass('SocialLoginComponent')
    export class SocialLoginComponent extends Component {

        @property(Button)
        socialLoginButton: Button;


        start() {
            this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
        }


        onSocialLoginClicked() {
            XsollaAuth.authSocial('facebook', (token: Token) => {
                console.log(`Successful social authentication. Token - ${token.access_token}`);
            }, () => {
                console.log('Social auth was canceled');
            }, (error:string) => {
                console.log(error);
            });
        }
    }
}

Affichage du catalogue des objets

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

  • objets virtuels ;
  • lots ;
  • packages de monnaie virtuelle.

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.

Ce tutoriel décrit l’implémentation de la logique suivante :

Note

Dans l’exemple, pour chaque objet, le catalogue affiche :

  • le nom ;
  • la description ;
  • le prix ;
  • l’image.

Vous pouvez également afficher d’autres informations sur l’objet si ces informations sont stockées dans le magasin en jeu.

Implémenter l'affichage des objets virtuels

Créer un widget d'objet

  1. Créez un prefeb. Pour ce faire, sélectionnez Create > Node Prefab dans le menu contextuel du dossier.
  2. Ouvrez le prefab créé.
  3. Ajoutez un composant UITransform à la racine du prefab, comme illustré dans l'image ci-dessous, et définissez la taille du contenu.

  1. Ajoutez les éléments d'interface suivants en tant qu'objets enfants du prefab et configurez leur apparence :
    • image d'arrière-plan du widget ;
    • nom d'objet ;
    • description d'objet ;
    • prix d'objet ;
    • image d'objet.

Exemple de structure de widget :

Créer un script de widget d'objet

  1. Créez un StoreItemComponent et ajoutez les propriétés suivantes :
    • iconSprite ;
    • itemNameLabel ;
    • itemDescriptionLabel ;
    • priceLabel.

  1. Ajoutez à la classe StoreItemComponent la méthode init et la logique de son initialisation, comme illustré dans l'exemple de script.
  2. Liez le StoreItemComponent au nœud racine du prefab.
  3. Liez les éléments du prefab aux propriétés du StoreItemComponent, comme illustré dans l'image :

Exemple de script de classe (StoreItemComponent) :

Copy
Full screen
Small screen
  • typescript
import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreItem } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
const { ccclass, property } = _decorator;


@ccclass('StoreItemComponent')
export class StoreItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    private _data: StoreItem;

    init(data: StoreItem) {

        this._data = data;

        this.itemNameLabel.string = data.name;
        this.itemDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

Créer une interface de page

Créez une scène de page de catalogue des objets et ajoutez-y l’élément ScrollView.

Exemple de structure de page :

Pour faire correspondre ScrollView avec le prefab StoreItem, configurez sa taille. Pour ce faire :

  1. Modifiez la valeur du paramètre ContentSize dans le nœud ScrollView et le nœud interne view.
  2. Liez le composant Layout au nœud content et configurez-le. Dans l’exemple, les paramètres suivants sont sélectionnés :
    • Type == vertical ;
    • ResizeMode == Container.

Créer un composant de script de catalogue des objets

  1. Créez un ItemsCatalogComponent et ajouter les propriétés suivantes :
    • itemsScrollView ;
    • storeItemPrefab.

  1. Ajoutez à la classe ItemsCatalogComponent la fonction de cycle de vie start et la logique de son initialisation, comme indiqué dans l'exemple de script.
  2. Ajoutez le ItemsCatalogComponent à un nœud sur la scène. Pour cela, ajoutez un nouveau nœud ou utilisez un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  3. Liez les éléments du prefab aux propriétés du ItemsCatalogComponent, comme illustré dans l'image :

Exemple de script de classe (ItemsCatalogComponent) :

Copy
Full screen
Small screen
  • typescript
import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { StoreItemComponent } from './StoreItemComponent';
const { ccclass, property } = _decorator;


@ccclass('ItemsCatalogComponent')
export class ItemsCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    storeItemPrefab: Prefab;

    start() {
        XsollaCatalog.getCatalog(null, null, [], itemsData => {
            for (let i = 0; i < itemsData.items.length; ++i) {
                let storeItem = instantiate(this.storeItemPrefab);
                this.itemsScrollView.content.addChild(storeItem);
                storeItem.getComponent(StoreItemComponent).init(itemsData.items[i]);
            }
        });
    }
}

Exemple de résultat de fonctionnement du script :

Implémenter l'affichage des lots

Créer un widget de lot

  1. Créez un prefeb. Pour ce faire, sélectionnez Create > Node Prefab dans le menu contextuel du dossier.
  2. Ouvrez le prefab créé.
  3. Ajoutez un composant UITransform à la racine du prefab comme illustré dans l'image ci-dessous et définissez la taille du contenu.

  1. Ajoutez les éléments d'interface suivants en tant qu'objets enfants du prefab et configurez leur apparence :
    • image d'arrière-plan du widget ;
    • nom de lot ;
    • description de lot ;
    • prix de lot ;
    • image de lot ;
    • description de contenu du lot (objets et leur quantité).

Exemple de structure de widget :

Créer un script de widget de lot

  1. Créez un BundleItemComponent et ajoutez les propriétés suivantes :
    • iconSprite ;
    • bundleNameLabel ;
    • bundleDescriptionLabel ;
    • priceLabel ;
    • contentDescriptionlabel.

  1. Ajoutez à la classe BundleItemComponent la méthode init et la logique de son initialisation, comme illustré dans l'exemple de script.
  2. Liez le BundleItemComponent au nœud racine du prefab.
  3. Liez les éléments du prefab aux propriétés du BundleItemComponent, comme illustré dans l'image :

Exemple de script de classe (BundleItemComponent) :

Copy
Full screen
Small screen
  • typescript
import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreBundle } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
const { ccclass, property } = _decorator;


@ccclass('BundleItemComponent')
export class BundleItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    bundleNameLabel: Label;

    @property(Label)
    bundleDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    @property(Label)
    contentDescriptionLabel: Label;

    init(data: StoreBundle) {

        this.bundleNameLabel.string = data.name;
        this.bundleDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });

        this.contentDescriptionLabel.string = 'This bundle includes '+ data.content.length + ' items: ';
        var bandles = data.content.map(bundle => bundle.name).join(', ');
        this.contentDescriptionLabel.string += bandles;
    }
}

Créer une interface de page

Créez une scène de page de catalogue des lots et ajoutez-y l’élément ScrollView.

Exemple de structure de page :

Pour faire correspondre ScrollView avec le prefab BundleItem, configurez sa taille. Pour ce faire :

  1. Modifiez la valeur du paramètre ContentSize dans le nœud ScrollView et le nœud interne view.
  2. Liez le composant Layout au nœud content et configurez-le. Dans l’exemple, les paramètres suivants sont sélectionnés :
    • Type == vertical ;
    • ResizeMode == Container.

Créer un composant de script de catalogue des lots

  1. Créez un BundlesCatalogComponent et ajouter les propriétés suivantes :
    • itemsScrollView
    • bundleItemPrefab

  1. Ajoutez à la classe BundlesCatalogComponent la fonction de cycle de vie start et la logique de son initialisation, comme indiqué dans l'exemple de script.
  2. Ajoutez un BundlesCatalogComponent à un nœud sur la scène. Pour cela, ajoutez un nouveau nœud ou utilisez un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  3. Liez les éléments du prefab aux propriétés de BundlesCatalogComponent, comme illustré dans l'image :

Exemple de script de classe (BundlesCatalogComponent) :

Copy
Full screen
Small screen
  • typescript
import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { BundleItemComponent } from './BundleItemComponent';
const { ccclass, property } = _decorator;


@ccclass('BundlesCatalogComponent')
export class BundlesCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    bundleItemPrefab: Prefab;

    start() {
        XsollaCatalog.getBundleList(null, null, [], itemsData => {
        for (let i = 0; i < itemsData.items.length; ++i) {
                let bundleItem = instantiate(this.bundleItemPrefab);
                this.itemsScrollView.content.addChild(bundleItem);
                bundleItem.getComponent(BundleItemComponent).init(itemsData.items[i]);
            }
        });
    }
}

Exemple de résultat de fonctionnement du script :

Implémenter l'affichage de catalogue des packages de monnaie virtuelle

Créer un widget de package de monnaie virtuelle

  1. Créez un prefeb. Pour ce faire, sélectionnez Create > Node Prefab dans le menu contextuel du dossier.
  2. Ouvrez le prefab créé.
  3. Ajoutez un composant UITransform à la racine du prefab, comme illustré dans l'image ci-dessous, et définissez la taille du contenu.

  1. Ajoutez les éléments d'interface suivants en tant qu'objets enfants du prefab et configurez leur apparence :
    • image d'arrière-plan du widget ;
    • nom de monnaie ;
    • description de monnaie ;
    • prix de monnaie ;
    • image de monnaie.

Exemple de structure de widget :

Créer un script de widget de package de monnaie virtuelle

  1. Créez un CurrencyPackageItemComponent et ajoutez les propriétés suivantes :
    • iconSprite ;
    • currencyNameLabel ;
    • currencyDescriptionLabel ;
    • priceLabel.

  1. Ajoutez à la classe CurrencyPackageItemComponent la méthode init et la logique de son initialisation, comme illustré dans l'exemple de script.
  2. Liez le BundleItemComponent au nœud racine du prefab.
  3. Liez les éléments du prefab aux propriétés du CurrencyPackageItemComponent, comme illustré dans l'image :

Exemple de script de classe (CurrencyPackageItemComponent) :

Copy
Full screen
Small screen
  • typescript
import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { VirtualCurrencyPackage } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
const { ccclass, property } = _decorator;


@ccclass('CurrencyPackageItemComponent')
export class CurrencyPackageItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    currencyNameLabel: Label;

    @property(Label)
    currencyDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    init(data: VirtualCurrencyPackage) {

        this.currencyNameLabel.string = data.name;
        this.currencyDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

Créer une interface de page

Créez une scène de page de catalogue des packages de monnaie virtuelle et ajoutez-y l’élément ScrollView.

Exemple de structure de page :

Pour faire correspondre ScrollView avec le prefab CurrencyPackageItem, configurez sa taille. Pour ce faire :

  1. Modifiez la valeur du paramètre ContentSize dans le nœud ScrollView et le nœud interne view.
  2. Liez le composant Layout au nœud content et configurez-le. Dans l’exemple, les paramètres suivants sont sélectionnés :
    • Type == vertical ;
    • ResizeMode == Container.

Créer un composant de script de catalogue des packages de monnaie virtuelle

  1. Créez un CurrencyPackagesCatalogComponent et ajouter les propriétés suivantes :
    • itemsScrollView ;
    • currencyPackageItemPrefab.

  1. Ajoutez à la classe CurrencyPackagesCatalogComponent la fonction de cycle de vie start et la logique de son initialisation, comme indiqué dans l'exemple de script.
  2. Ajoutez le CurrencyPackagesCatalogComponent à un nœud sur la scène. Pour cela, ajoutez un nouveau nœud ou utilisez un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
  3. Liez les éléments du prefab aux propriétés du CurrencyPackagesCatalogComponent, comme illustré dans l'image :

Exemple de script de classe (CurrencyPackagesCatalogComponent) :

Copy
Full screen
Small screen
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { CurrencyPackageItemComponent } from './CurrencyPackageItemComponent';
const { ccclass, property } = _decorator;


@ccclass('CurrencyPackagesCatalogComponent')
export class CurrencyPackagesCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    currencyPackageItemPrefab: Prefab;

    start() {
        XsollaCatalog.getVirtualCurrencyPackages(null, null, [], itemsData => {
        for (let i = 0; i < itemsData.items.length; ++i) {
                let currencyPackageItem = instantiate(this.currencyPackageItemPrefab);
                this.itemsScrollView.content.addChild(currencyPackageItem);
                currencyPackageItem.getComponent(CurrencyPackageItemComponent).init(itemsData.items[i]);
            }
        });
    }
}

    Exemple de résultat de fonctionnement du script :

    Vendre des objets virtuels contre des devises réelles

    Cette section explique comment utiliser les méthodes SDK pour implémenter la vente de biens contre des devises réelles. Les objets virtuels sont utilisés comme exemple de biens.

    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.

    Ce tutoriel décrit l’implémentation de la logique suivante :

    Avis

    Dans l’exemple de script, des informations d’identification d’un compte de démo sont utilisées pour se connecter (nom d’utilisateur : xsolla, mot de passe : xsolla). Ce compte est uniquement disponible pour le projet démo.

    L’exemple de script ne comprend pas l’implémentation de l’affichage page par page des objets du catalogue (pagination). Pour implémenter la pagination, utilisez les paramètres offset et limitde la méthode SDK getCatalog. Le nombre maximum d’objets par page est de 50. Si le catalogue contient plus de 50 objets, la pagination est nécessaire.

    Compléter le widget d'objet

    Ajoutez un bouton d’achat au widget de l’objet et configurez son apparence.
    Note
    Dans l’exemple, la classe modifiée devient RC_StoreItemComponent.
    Exemple de structure de widget :

    Compléter le script de widget d'objet

    1. Pour lier une fonction de rappel au bouton d'achat à l'aide d'un code, ajoutez la propriété buyButton au RC_StoreItemComponent.
    2. Ajoutez à la classe RC_StoreItemComponent une méthode qui est appelée lorsque l'utilisateur clique sur BuyButton, et ajoutez la logique pour gérer l'événement clic, comme indiqué dans l'exemple de script.
    3. Liez une fonction de rappel au bouton d'achat de l'une des manières suivantes :

      • à l'aide du panneau Inspector, comme illustré dans l'image ci-dessous ;
      • en insérant le bloc de code ci-dessous dans le script de la page.

    Liaison de fonction de rappel à l’aide du panneau Inspector :

    Liaison de fonction de rappel à l’aide de code :

    Copy
    Full screen
    Small screen
    • typescript
    start() {
	this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
  }

    Exemple de script de classe (RC_StoreItemComponent) :

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Button, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreItem, XsollaCatalog } from '../../api/XsollaCatalog';
import { TokenStorage } from '../../common/TokenStorage';
import { OrderTracker } from '../../common/OrderTracker';
import { XsollaPayments } from '../../api/XsollaPayments';
const { ccclass, property } = _decorator;


export namespace sellForRealMoneyItem {


    @ccclass('RC_StoreItemComponent')
    export class RC_StoreItemComponent extends Component {


        @property(Sprite)
        iconSprite: Sprite;


        @property(Label)
        itemNameLabel: Label;


        @property(Label)
        itemDescriptionLabel: Label;


        @property(Label)
        priceLabel: Label;


        @property(Button)
        buyButton: Button;


        private _data: StoreItem;


        start() {
            this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
        }


        init(data: StoreItem) {

            this._data = data;


            this.itemNameLabel.string = data.name;
            this.itemDescriptionLabel.string = data.description;

            if (data.virtual_prices.length > 0) {
                this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
            } else {
                this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
            }


            assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
                if(err == null) {
                const spriteFrame = new SpriteFrame();
                const texture = new Texture2D();
                texture.image = imageAsset;
                spriteFrame.texture = texture;
                this.iconSprite.spriteFrame = spriteFrame;
                } else {
                    console.log(`Cant load image with url ${data.image_url}`);
                }
            });
        }


        onBuyClicked() {
            XsollaCatalog.fetchPaymentToken(TokenStorage.getToken().access_token, this._data.sku, 1, undefined, undefined, undefined, undefined, undefined, result => {
                OrderTracker.checkPendingOrder(result.token, result.orderId, () => {
                    console.log('success purchase!');
                }, error => {
                    console.log(`Order checking failed - Status code: ${error.status}, Error code: ${error.code}, Error message: ${error.description}`);
                });
                XsollaPayments.openPurchaseUI(result.token);
            }, error => {
                console.log(error.description);
            });
        }
    }
}

    Compléter le composant de script de catalogue des objets

    Note
    Dans le script d’exemple, la classe modifiée devient RC_ItemsCatalogComponent.

    Ajoutez la logique pour obtenir un jeton d’autorisation valide à la méthode start de la classe RC_ItemsCatalogComponent, comme indiqué dans l’exemple de script.

    Exemple de script de classe (RC_ItemsCatalogComponent) :

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { RC_StoreItemComponent } from './RC_StoreItemComponent';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { TokenStorage } from 'db://xsolla-commerce-sdk/scripts/common/TokenStorage';
const { ccclass, property } = _decorator;




@ccclass('RC_ItemsCatalogComponent')
export class RC_ItemsCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;


    @property(Prefab)
    storeItemPrefab: Prefab;


    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            TokenStorage.saveToken(token, false);
            XsollaCatalog.getCatalog(null, null, [], itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let storeItem = instantiate(this.storeItemPrefab);
                        this.itemsScrollView.content.addChild(storeItem);
                        storeItem.getComponent(RC_StoreItemComponent).init(itemsData.items[i]);
                    }
                });
        });
    }
}

    Exemple de résultat de fonctionnement du script :

    Vendre des objets virtuels contre de la monnaie virtuelle

    Cette section explique comment utiliser les méthodes SDK pour implémenter la vente de biens contre de la monnaie virtuelle. Les objets virtuels sont utilisés comme exemple de biens.

    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.

    Ce tutoriel décrit l’implémentation de la logique suivante :

    Avis

    Dans l’exemple de script, des informations d’identification d’un compte de démo sont utilisées pour se connecter (nom d’utilisateur : xsolla, mot de passe : xsolla). Ce compte est uniquement disponible pour le projet démo.

    L’exemple de script ne comprend pas l’implémentation de l’affichage page par page des objets du catalogue (pagination). Pour implémenter la pagination, utilisez les paramètres offset et limitde la méthode SDK getCatalog. Le nombre maximum d’objets par page est de 50. Si le catalogue contient plus de 50 objets, la pagination est nécessaire.

    Compléter le widget d'objet

    Ajoutez un bouton d’achat au widget de l’objet et configurez son apparence.
    Note
    Dans l’exemple, la classe modifiée devient VC_StoreItemComponent.
    Exemple de structure de widget :

    Compléter le script de widget d'objet

    1. Pour lier une fonction de rappel au bouton d'achat à l'aide d'un code, ajoutez la propriété buyButton au VC_StoreItemComponent.
    2. Ajoutez à la classe VC_StoreItemComponent une méthode qui est appelée lorsque l'utilisateur clique sur BuyButton, et ajoutez la logique pour gérer l'événement clic, comme indiqué dans l'exemple de script.
    3. Liez une fonction de rappel au bouton d'achat de l'une des manières suivantes :

      • à l'aide du panneau Inspector, comme illustré dans l'image ci-dessous ;
      • en insérant le bloc de code ci-dessous dans le script de la page.

    Liaison de fonction de rappel à l’aide du panneau Inspector :

    Liaison de fonction de rappel à l’aide de code :

    Copy
    Full screen
    Small screen
    • typescript
    start() {
	this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
  }

    Exemple de script de classe (VC_StoreItemComponent) :

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Button, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreItem, XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { TokenStorage } from 'db://xsolla-commerce-sdk/scripts/common/TokenStorage';
import { OrderTracker } from 'db://xsolla-commerce-sdk/scripts/common/OrderTracker';
const { ccclass, property } = _decorator;


@ccclass('VC_StoreItemComponent')
export class VC_StoreItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    @property(Button)
    buyButton: Button;

    private _data: StoreItem;

    start() {
        this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
    }

    init(data: StoreItem) {

        this._data = data;

        this.itemNameLabel.string = data.name;
        this.itemDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }

    onBuyClicked() {
        XsollaCatalog.purchaseItemForVirtualCurrency(TokenStorage.getToken().access_token, this._data.sku, this._data.virtual_prices[0].sku, orderId => {
            OrderTracker.checkPendingOrder(TokenStorage.getToken().access_token, orderId, () => {
                console.log('success purchase!');
            }, error => {
                console.log(`Order checking failed - Status code: ${error.status}, Error code: ${error.code}, Error message: ${error.description}`);
            });
        }, error => {
            console.log(error.description);
        });
    }
}

    Compléter le composant de script de catalogue des objets

    Note
    Dans le script d’exemple, la classe modifiée devient VC_ItemsCatalogComponent.

    Ajoutez la logique pour obtenir un jeton d’autorisation valide à la méthode start de la classe VC_ItemsCatalogComponent, comme indiqué dans l’exemple de script.

    Exemple de script de classe (VC_ItemsCatalogComponent) :

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { VC_StoreItemComponent } from './VC_StoreItemComponent';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { TokenStorage } from 'db://xsolla-commerce-sdk/scripts/common/TokenStorage';
const { ccclass, property } = _decorator;


@ccclass('VC_ItemsCatalogComponent')
export class VC_ItemsCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    storeItemPrefab: Prefab;

    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            TokenStorage.saveToken(token, false);
            XsollaCatalog.getCatalog(null, null, [], itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let storeItem = instantiate(this.storeItemPrefab);
                        this.itemsScrollView.content.addChild(storeItem);
                        storeItem.getComponent(VC_StoreItemComponent).init(itemsData.items[i]);
                    }
                });
        });
    }
}

    Exemple de résultat de fonctionnement du script :

    Affichage du solde de la monnaie virtuelle

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

    Créer un widget d'affichage de solde

    1. Créez un prefeb. Pour ce faire, sélectionnez Create > Node Prefab dans le menu contextuel du dossier.
    2. Ouvrez le prefab créé.
    3. Ajoutez un composant UITransform à la racine du prefab, comme illustré dans l'image ci-dessous, et définissez la taille du contenu.

    1. Ajoutez les éléments d'interface suivants en tant qu'objets enfants du prefab et configurez leur apparence :
      • image d'arrière-plan du widget ;
      • nom de monnaie ;
      • quantité de monnaie ;
      • image de monnaie.

    Exemple de structure de widget :

    Créer un script de widget d'affichage de solde

    1. Créez un CurrencyBalanceItemComponent et ajoutez les propriétés suivantes :
      • iconSprite ;
      • currencyNameLabel ;
      • quantityLabel.

    1. Ajoutez à la classe CurrencyBalanceItemComponent la méthode init et la logique de son initialisation, comme illustré dans l'exemple de script.
    2. Liez le CurrencyBalanceItemComponent au nœud racine du prefab.
    3. Liez les éléments du prefab aux propriétés du CurrencyBalanceItemComponent, comme illustré dans l'image :

    Exemple de script de classe (CurrencyBalanceItemComponent) :

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { VirtualCurrencyBalance } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
const { ccclass, property } = _decorator;


@ccclass('CurrencyBalanceItemComponent')
export class CurrencyBalanceItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    currencyNameLabel: Label;

    @property(Label)
    quantityLabel: Label;

    init(data: VirtualCurrencyBalance) {

        this.currencyNameLabel.string = data.name;
        this.quantityLabel.string = data.amount.toString();

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

    Créer une interface de page

    Créez une scène de solde de la monnaie virtuelle et ajoutez-y l’élément ScrollView.

    Exemple de structure de page :

    Pour faire correspondre ScrollView avec le prefab CurrencyBalanceItem, configurez sa taille. Pour ce faire :

    1. Modifiez la valeur du paramètre ContentSize dans le nœud ScrollView et le nœud interne view.
    2. Liez le composant Layout au nœud content et configurez-le. Dans l’exemple, les paramètres suivants sont sélectionnés :
      • Type == vertical ;
      • ResizeMode == Container.

    Créer un composant de script de solde de la monnaie

    1. Créez un CurrencyBalanceComponent et ajouter les propriétés suivantes :
      • itemsScrollView ;
      • currencyBalanceItemPrefab.

    1. Ajoutez à la classe CurrencyBalanceComponent la fonction de cycle de vie start et la logique de son initialisation, comme indiqué dans l'exemple de script.
    2. Ajoutez le CurrencyBalanceComponent à un nœud sur la scène. Pour cela, ajoutez un nouveau nœud ou utilisez un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
    3. Liez les éléments du prefab aux propriétés du CurrencyBalanceItemComponent, comme illustré dans l'image :
    Note
    Dans l’exemple de script, des informations d’identification d’un compte de démo sont utilisées pour se connecter (nom d’utilisateur : xsolla, mot de passe : xsolla). Ce compte est uniquement disponible pour le projet démo.
    Exemple de script de classe (CurrencyBalanceComponent) :
    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { XsollaInventory } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
import { CurrencyBalanceItemComponent } from './CurrencyBalanceItemComponent';
const { ccclass, property } = _decorator;


@ccclass('CurrencyBalanceComponent')
export class CurrencyBalanceComponent extends Component {

    @property(ScrollView)
    itemsList: ScrollView;

    @property(Prefab)
    currencyBalanceItemPrefab: Prefab;

    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            XsollaInventory.getVirtualCurrencyBalance(token.access_token, null, itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let currencyBalanceItem = instantiate(this.currencyBalanceItemPrefab);
                        this.itemsList.content.addChild(currencyBalanceItem);
                             currencyBalanceItem.getComponent(CurrencyBalanceItemComponent).init(itemsData.items[i]);
                    }
                });
        });

    }
}

    Exemple de résultat de fonctionnement du script :

    Affichage des objets de l'inventaire

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

    Créer un widget d'objet

    1. Créez un prefeb. Pour ce faire, sélectionnez Create > Node Prefab dans le menu contextuel du dossier.
    2. Ouvrez le prefab créé.
    3. Ajoutez un composant UITransform à la racine du prefab, comme illustré dans l'image ci-dessous, et définissez la taille du contenu.

    1. Ajoutez les éléments d'interface suivants en tant qu'objets enfants du prefab et configurez leur apparence :
      • image d'arrière-plan du widget ;
      • nom d'objet d'inventaire ;
      • description d'objet d'inventaire ;
      • quantité d'objets ;
      • image d'objet.

    Exemple de structure de widget :

    Créer un script de widget d'objet

    1. Créez un InventoryItemComponent et ajoutez les propriétés suivantes :
      • iconSprite ;
      • itemNameLabel ;
      • itemDescriptionLabel ;
      • quantityLabel.

    1. Ajoutez à la classe InventoryItemComponent la méthode init et la logique de son initialisation, comme illustré dans l'exemple de script.
    2. Liez le InventoryItemComponent au nœud racine du prefab.
    3. Liez les éléments du prefab aux propriétés du InventoryItemComponent, comme illustré dans l'image :

    Exemple de script de classe (InventoryItemComponent) :

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { InventoryItem } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
const { ccclass, property } = _decorator;

@ccclass('InventoryItemComponent')
export class InventoryItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    quantityLabel: Label;

    init(data: InventoryItem) {

        this.itemNameLabel.string = data.name;
        this.itemDescriptionLabel.string = data.description;
        this.quantityLabel.string = data.quantity.toString();

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

    Créer une interface de page

    Créez une scène de page d’inventaire et ajoutez-y l’élément ScrollView.

    Exemple de structure de page :

    Pour faire correspondre ScrollView avec le prefab InventoryItem, configurez sa taille. Pour ce faire :

    1. Modifiez la valeur du paramètre ContentSize dans le nœud ScrollView et le nœud interne view.
    2. Liez le composant Layout au nœud content et configurez-le. Dans l’exemple, les paramètres suivants sont sélectionnés :
      • Type == vertical ;
      • ResizeMode == Container.

    Créer un composant de script de page d'inventaire

    1. Créez un InventoryItemsComponent et ajouter les propriétés suivantes :
      • itemsScrollView ;
      • inventoryItemPrefab.

    1. Ajoutez à la classe InventoryItemsComponent la fonction de cycle de vie start et la logique de son initialisation, comme indiqué dans l'exemple de script.
    2. Ajoutez le InventoryItemsComponent à un nœud sur la scène. Pour cela, ajoutez un nouveau nœud ou utilisez un nœud existant avec le composant XsollaSettingsManager que vous avez ajouté lors de l'initialisation du SDK.
    3. Liez les éléments du prefab aux propriétés du InventoryItemsComponent, comme illustré dans l'image :
    Note
    Dans l’exemple de script, des informations d’identification d’un compte de démo sont utilisées pour se connecter (nom d’utilisateur : xsolla, mot de passe : xsolla). Ce compte est uniquement disponible pour le projet démo.
    Exemple de script de classe (InventoryItemsComponent) :
    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { XsollaInventory } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
import { InventoryItemComponent } from './InventoryItemComponent';
const { ccclass, property } = _decorator;


@ccclass('InventoryItemsComponent')
export class InventoryItemsComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    inventoryItemPrefab: Prefab;

    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            XsollaInventory.getInventory(token.access_token, null, itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let inventoryItem = instantiate(this.inventoryItemPrefab);
                        this.itemsScrollView.content.addChild(inventoryItem);
                        inventoryItem.getComponent(InventoryItemComponent).init(itemsData.items[i]);
                    }
                });
        });

    }
}

    Exemple de résultat de fonctionnement du script :

    Votre progression
    Merci pour votre commentaire !
    Dernière mise à jour: 22 Janvier 2024

    Faute de frappe ou autre erreur dans le texte ? Sélectionnez le texte concerné et appuyez sur Ctrl+Entée.

    Signaler un problème
    Nous améliorons continuellement notre contenu grâce à vos commentaires.
    Indiquez votre adresse e-mail pour un suivi
    Merci pour votre commentaire !