SDK para o Cocos Creator / Integre o SDK no lado do aplicativo
  Voltar aos Documentos

SDK para o Cocos Creator

Integre o SDK no lado do aplicativo

  1. Projete uma interface para o sistema de login, a loja do jogo e outras páginas para o seu aplicativo.
  2. Implemente na lógica do seu aplicativo a autenticação de usuários, a exibição da loja, compras e muito mais usando os métodos SDK.
Observação
Você pode criar sua própria solução seguindo o manual do Cocos Creator, ou use a cena de demonstração como modelo.
Para começar a usar os recursos básicos do SDK, siga esses tutoriais passo a passo:Você pode encontrar os scripts utilizados no diretório <xsollaExtention>/assets/scripts/samples do SDK.
Observação
Os scripts nos tutoriais usam métodos SDK. Certifique-se de instalar e inicializar o SDK corretamente.

Cadastro e login de usuário via nome de usuário/e-mail e senha

Esta instrução mostra como usar métodos SDK para implementar:

Você pode autenticar usuários com seu nome de usuário ou endereço de e-mail. Nos exemplos a seguir, autenticamos os usuários com seu nome de usuário, enquanto o endereço de e-mail é usado para confirmar o cadastro e redefinir a senha.

Observação
Se você usar o widget de Login em seu site (em uma loja da web, por exemplo), certifique-se de ter implementado os mesmos métodos de autenticação de usuário no seu site e aplicativo. O widget usa o endereço de e-mail para autenticação por padrão. Para configurar o login do usuário via nome de usuário, entre em contato com seu Gerente de Sucesso do Cliente ou envie um e-mail para csm@xsolla.com.

Implemente o cadastro de usuários

Esse tutorial descreve a implementação da seguinte lógica:

Crie uma interface de página

Crie uma cena para uma página de cadastro e adicione os seguintes elementos:

  • campo de nome do usuário
  • campo de endereço de e-mail do usuário
  • campo de senha do usuário
  • botão para cadastrar

Exemplo de uma estrutura de página:

Crie um componente de script de cadastro

  1. Crie um RegistrationComponent e adicione as seguintes propriedades:
    • usernameEditBox
    • emailEditBox
    • passwordEditBox
    • signUpButton — opcional. Usado ao vincular uma função de retorno de chamada ao botão usando código

  1. Adicione um método à classe RegistrationComponent que é chamado ao clicar emSignUpButton, e adicionar a lógica para a manipulação do evento de clique, conforme demonstrado no exemplo de script.
  2. Adicione o RegistrationComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  3. Vincule os elementos da cena às propriedades do RegistrationComponent, conforme demonstrado na imagem:

  1. Vincule uma função de chamada ao botão de cadastro de uma das seguintes maneiras:
    • usando o painel Inspector, conforme exibido na imagem abaixo
    • inserindo o bloco de código abaixo no script da página

Vinculando um retorno de chamada usando o painel Inspector:

Vinculando um retorno de chamada via código:

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

Nos exemplos do script, os métodos onComplete e onError chamam o método padrão console.log. Em caso de erro, o código de erro e a descrição são passados no parâmetro error.

Você pode adicionar outras ações, como abrir uma página com uma solicitação de reenvio para um e-mail de cadastro ou abrir uma página de login se o cadastro for bem-sucedido.

Exemplo de um 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);
        });
    }
}

Configure o email de confirmação de cadastro

Após o cadastro bem-sucedido, um usuário recebe um e-mail de confirmação de cadastro no endereço especificado. Você pode personalizar os e-mails enviados aos usuários na Conta de Distribuidor.

Se você estiver desenvolvendo um aplicativo móvel, configure links profundos para retornar um usuário a um aplicativo depois que ele confirmar o cadastro.

Observação
Você pode desativar a confirmação de cadastro por meio de um endereço de e-mail se seus padrões de segurança permitirem que você faça isso. Entre em contato com seu Gerente de Sucesso do Cliente para desativá-lo ou entre em contato conosco em csm@xsolla.com.

Implemente a solicitação de reenvio de e-mail de confirmação de cadastro

Esse tutorial descreve a implementação da seguinte lógica:

Crie uma interface de página

Crie uma cena para uma página com uma solicitação para reenviar um e-mail de confirmação e adicione os seguintes elementos:

  • campo de nome de usuário/e-mail
  • botão para reenviar o e-mail

Exemplo de uma estrutura de página:

Crie um componente de script de reenvio de e-mail

  1. Crie um ResendConfirmationEmailComponent e adicione as seguintes propriedades:
    • usernameTextBox
    • resendEmailButton — opcional. Usado ao vincular uma função de retorno de chamada ao botão usando código

  1. Adicione um método à classe ResendConfirmationEmailComponent que é chamado ao clicar emResendEmail, e adicionar a lágica para a manipulação do evento de clique, conforme demonstrado no exemplo de script.
  2. Adicione o ResendConfirmationEmailComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  3. Vincule os elementos da cena às propriedades do ResendConfirmationEmailComponent, conforme demonstrado na imagem:

  1. Vincule um retorno de chamada ao botão de solicitação de e-mail de confirmação de cadastro de uma das seguintes maneiras:
    • usando o painel Inspector, como exibido na imagem abaixo
    • inserindo o bloco de código abaixo no script da página com uma solicitação para reenviar um e-mail de confirmação

Vinculando um retorno de chamada usando o painel Inspector:

Vinculando um retorno de chamada via código:

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

Se a solicitação for bem-sucedida, o usuário receberá um e-mail de confirmação de cadastro no endereço de e-mail especificado durante o cadastro.

Observação

Nos exemplos do script, os métodos onComplete e onError chamam o método padrão console.log. Você pode adicionar outras ações.

Em caso de erro, o código de erro e a descrição são passados no parâmetro error.

Exemplo de um 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);
        });
    }
}

Implemente o login do usuário

Esse tutorial descreve a implementação da seguinte lógica:

Crie uma interface de página

Crie uma cena para uma página de login e adicione os seguintes elementos:

  • campo de nome de usuário
  • campo de senha
  • opção lembrar dados
  • botão de login

Exemplo de uma estrutura de página:

Crie um componente de script de login

  1. Crie um LoginComponent e adicione as seguintes propriedades:
    • usernameEditBox
    • passwordEditBox
    • remeberMeToggle
    • loginButton — opcional. Usado ao vincular uma função de retorno de chamada ao botão usando código

  1. Adicione um método à classe LoginComponent que é chamado ao clicar emLoginButton, e adicionar a lógica para a manipulação do evento de clique, conforme demonstrado no exemplo de script.
  2. Adicione o LoginComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  3. Vincule os elementos da cena às propriedades do LoginComponent, conforme demonstrado na imagem:

  1. Vincule uma função de chamada ao botão de login de uma das seguintes maneiras:
    • usando o painel Inspector, conforme exibido na imagem abaixo
    • inserindo o bloco de código abaixo no script da página

Vinculando um retorno de chamada usando o painel Inspector:

Vinculando um retorno de chamada via código:

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

Nos exemplos do script, os métodos onComplete e onError chamam o método padrão console.log. Você pode adicionar outras ações.

Em caso de erro, o código de erro e a descrição são passados no parâmetro error.

Exemplo de um 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);
        });
    }
}

Implemente um sistema de redefinição de senha

Esse tutorial descreve a implementação da seguinte lógica:

Crie uma interface de página

Crie uma cena para uma página de redefinição e adicione o seguinte:

  • campo de nome de usuário
  • botão de redefinição de senha

Exemplo de uma estrutura de página:

Crie um componente de script de redefinição de senha

  1. Crie um ResetPasswordComponent e adicione as seguintes propriedades:
    • usernameEditBox
    • resetPasswordButton — opcional. Usado ao vincular uma função de retorno de chamada ao botão usando código

  1. Adicione um método à classe ResetPasswordComponent que é chamado ao clicar emResetPassword, e adicionar a lógica para a manipulação do evento de clique, conforme demonstrado no exemplo de script.
  2. Adicione o ResetPasswordComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  3. Vincule os elementos da cena às propriedades do ResetPasswordComponent, conforme demonstrado na imagem:

  1. Vincule uma função de chamada ao botão de redefinição de senha de uma das seguintes maneiras:
    • usando o painel Inspector, conforme exibido na imagem abaixo
    • inserindo o bloco de código abaixo no script da página

Vinculando um retorno de chamada usando o painel Inspector:

Vinculando um retorno de chamada via código:

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

Nos exemplos do script, os métodos onComplete e onError chamam o método padrão console.log. Você pode adicionar outras ações.

Em caso de erro, o código de erro e a descrição são passados no parâmetro error.

Exemplo de um 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);
        });
    }
}

Login social

Observação
O SDK para o Cocos Creator suporta o login social somente para compilações Android e iOS.

Esse guia mostra como você pode usar métodos SDK para implementar o cadastro e o login do usuário por meio de contas de redes sociais.

Diferentemente da autenticação de usuário via nome de usuário/endereço de e-mail e senha, você não precisa implementar lógicas separadas para o cadastro do usuário. Se o primeiro login do usuário for por meio de uma rede social, uma nova conta será criada automaticamente.

Se você tiver implementado o login social em seu aplicativo como um método de autenticação alternativo, a conta da rede social será vinculada automaticamente a uma conta de usuário existente se as seguintes condições forem atendidas:

  • Um usuário que se cadastrou com nome de usuário/endereço de e-mail e senha acessou seu aplicativo por meio de uma conta de rede social.
  • Uma rede social retorna um endereço de e-mail.
  • O endereço de e-mail do usuário em uma rede social é o mesmo que o endereço de e-mail usado para se cadastrar em seu aplicativo.

Esse tutorial descreve a implementação da seguinte lógica:

Os exemplos mostram como configurar o login do usuário por meio de uma conta do Facebook. Você pode configurar todas as redes sociais da mesma maneira.

Os exemplos fornecem uma introdução básica aos métodos SDK. Os aplicativos normalmente precisam de interfaces e lógicas mais complexas.

Crie uma interface de página

Crie uma cena para a página de login social e adicione o botão de login social a ela.

Exemplo de uma estrutura de página:

Crie um componente de script de login social

  1. Crie um SocialLoginComponent. Para vincular a função de retorno de chamada a um botão de login social usando códigos, adicione a propriedade socialLoginButton.
  2. Adicione um método à classe SocialLoginComponent que é chamado ao clicar em SocialLogin, e adicione a lógica da manipulação do evento de clique, como demonstrado no script de exemplo.

  1. Adicione SocialLoginComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  2. Vincule o botão SocialLogin à propriedade socialLoginButton do SocialLoginComponent conforme demonstrado na imagem:

  1. Vincule uma função de chamada ao botão de login social de uma das seguintes maneiras:
    • usando o painel Inspector, conforme exibido na imagem abaixo
    • inserindo o bloco de código abaixo no script da página

Vinculando um retorno de chamada usando o painel Inspector:

Vinculando um retorno de chamada via código:

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

Nos exemplos do script, os métodos onComplete, onCanceled e onError chamam o método padrão console.log. Em caso de erro, o código de erro e a descrição são passados no parâmetro error.

Você pode adicionar outras ações, como abrir uma página com uma solicitação de reenvio para um e-mail de cadastro ou abrir uma página de login se o cadastro for bem-sucedido.

Exemplo de um 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);
            });
        }
    }
}

Exibição do catálogo de itens

Este tutorial mostra como usar os métodos SDK para exibir os seguintes itens em uma loja no jogo:

  • itens virtuais
  • conjuntos
  • pacotes de moedas virtuais

Antes de começar, configure itens na Conta de Distribuidor:

  1. Configure itens virtuais e grupos de itens virtuais.
  2. Configure pacotes de moedas virtuais.
  3. Configurar pacotes.

Esse tutorial descreve a implementação da seguinte lógica:

Observação

O exemplo de cada item em um catálogo mostra:

  • nome
  • descrição
  • preço
  • imagem

Você também pode mostrar outras informações sobre o item se essas informações estiverem armazenadas em uma loja do jogo.

Implemente a exibição de itens virtuais

Crie um widget de item

  1. Crie um prefab. Para fazer isso, selecione Create > Node Prefab a partir do menu contextual do diretório.
  2. Abra o prefab criado.
  3. Adicione um componente UITransform à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.

  1. Adicione os seguintes elementos de interface como objetos criança prefab e configure o visual deles:
    • imagem de fundo do widget
    • nome do item
    • descrição do item
    • preço do item
    • imagem do item

Exemplo de estrutura do widget:

Crie o script do widget de item

  1. Crie um StoreItemComponent e adicione as seguintes propriedades:
    • iconSprite
    • itemNameLabel
    • itemDescriptionLabel
    • priceLabel

  1. Adicione um método init e uma lógica de inicialização à classe StoreItemComponent, conforme demonstrado no script de exemplo.
  2. Anexe o StoreItemComponent ao nodo raiz do prefab.
  3. Vincule os elementos prefab às propriedades do StoreItemComponent, conforme demonstrado na imagem:

Exemplo de um script de widget (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}`);
            }
        });
    }
}

Crie uma interface de página

Crie uma cena para uma página de catálogo de itens e adicione o elemento ScrollView a ela.

Exemplo de uma estrutura de página:

Para fazer com que ScrollView corresponda ao prefab StoreItem criado, configure o tamanho:

  1. Altere o valor do parâmetro ContentSize no nodo ScrollView e no nodo view interno.
  2. Vincule o componente Layout ao nodo content e configure-o. No exemplo, as seguintes configurações estão selecionadas:
    • Type == vertical
    • ResizeMode == Container

Crie um componente de script de catálogo de itens

  1. Crie um ItemsCatalogComponent e adicione as seguintes propriedades:
    • itemsScrollView
    • storeItemPrefab

  1. Adicione a função de clico de vida start e a lógica de inicialização à classe ItemsCatalogComponent, conforme demonstrado no script de exemplo.
  2. Adicione ItemsCatalogComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  3. Vincule os elementos prefab às propriedades do ItemsCatalogComponent conforme exibido na imagem:

Exemplo de um 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]);
            }
        });
    }
}

Exemplo do resultado de trabalho do script:

Implemente a exibição de pacotes

Crie um widget de pacote

  1. Crie um prefab. Para fazer isso, selecione Create > Node Prefab a partir do menu contextual do diretório.
  2. Abra o prefab criado.
  3. Adicione um componente UITransform à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.

  1. Adicione os seguintes elementos de interface como objetos criança prefab e configure o visual deles:
    • imagem de fundo do widget
    • nome do conjunto
    • descrição do conjunto
    • preço do conjunto
    • imagem do conjunto
    • descrição do conteúdo do conjunto (itens e a quantidade deles)

Exemplo de estrutura do widget:

Crie um script de widget de conjunto

  1. Crie um BundleItemComponent e adicione as seguintes propriedades:
    • iconSprite
    • bundleNameLabel
    • bundleDescriptionLabel
    • priceLabel
    • contentDescriptionlabel

  1. Adicione um método init e uma lógica de inicialização à classe BundleItemComponent, conforme demonstrado no script de exemplo.
  2. Anexe o BundleItemComponent ao nodo raiz do prefab.
  3. Vincule os elementos prefab às propriedades do BundleItemComponent, conforme demonstrado na imagem:

Exemplo de um script de widget (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;
    }
}

Crie uma interface de página

Crie uma cena para uma página de catálogo de conjuntos e adicione o elemento ScrollView a ela.

Exemplo de uma estrutura de página:

Para fazer com que ScrollView corresponda ao prefab BundleItem criado, configure o tamanho:

  1. Altere o valor do parâmetro ContentSize no nodo ScrollView e no nodo view interno.
  2. Vincule o componente Layout ao nodo content e configure-o. No exemplo, as seguintes configurações estão selecionadas:
    • Type == vertical
    • ResizeMode == Container

Crie um componente de script de catálogo de conjuntos

  1. Crie um BundlesCatalogComponent e adicione as seguintes propriedades:
    • itemsScrollView
    • bundleItemPrefab

  1. Adicione a função de clico de vida start e a lógica de inicialização à classe BundlesCatalogComponent, conforme demonstrado no script de exemplo.
  2. Adicione BundlesCatalogComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  3. Vincule os elementos prefab às propriedades do BundlesCatalogComponent conforme exibido na imagem:

Exemplo de um 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]);
            }
        });
    }
}

Exemplo do resultado de trabalho do script:

Implemente a exibição do catálogo de pacotes de moedas virtuais

Crie um widget para um pacote de moedas virtuais

  1. Crie um prefab. Para fazer isso, selecione Create > Node Prefab a partir do menu contextual do diretório.
  2. Abra o prefab criado.
  3. Adicione um componente UITransform à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.

  1. Adicione os seguintes elementos de interface como objetos criança prefab e configure o visual deles:
    • imagem de fundo do widget
    • nome da moeda
    • descrição da moeda
    • preço da moeda
    • imagem da moeda

Exemplo de estrutura do widget:

Crie um script de widget para pacotes de moedas virtuais

  1. Crie um CurrencyPackageItemComponent e adicione as seguintes propriedades:
    • iconSprite
    • currencyNameLabel
    • currencyDescriptionLabel
    • priceLabel

  1. Adicione um método init e uma lógica de inicialização à classe CurrencyPackageItemComponent, conforme demonstrado no script de exemplo.
  2. Anexe o CurrencyPackageItemComponent ao nodo raiz do prefab.
  3. Vincule os elementos prefab às propriedades do CurrencyPackageItemComponent, conforme demonstrado na imagem:

Exemplo de um script de widget (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}`);
            }
        });
    }
}

Crie uma interface de página

Crie uma cena para uma página de catálogo de pacotes de moedas virtuais e adicione o elemento ScrollView a ela.

Exemplo de uma estrutura de página:

Para fazer com que ScrollView corresponda ao prefab CurrencyPackageItem criado, configure o tamanho:

  1. Altere o valor do parâmetro ContentSize no nodo ScrollView e no nodo view interno.
  2. Vincule o componente Layout ao nodo content e configure-o. No exemplo, as seguintes configurações estão selecionadas:
    • Type == vertical
    • ResizeMode == Container

Crie um componente de script de catálogo de pacotes de moedas

  1. Crie um CurrencyPackagesCatalogComponent e adicione as seguintes propriedades:
    • itemsScrollView
    • currencyPackageItemPrefab

  1. Adicione a função de clico de vida start e a lógica de inicialização à classe CurrencyPackagesCatalogComponent, conforme demonstrado no script de exemplo.
  2. Adicione CurrencyPackagesCatalogComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
  3. Vincule os elementos prefab às propriedades do CurrencyPackagesCatalogComponent conforme exibido na imagem:

Exemplo de um 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]);
            }
        });
    }
}

    Exemplo do resultado de trabalho do script:

    Venda itens virtuais por moedas reais

    Essa seção explica como usar os métodos SDK para implementar a venda de itens com moedas reais usando itens virtuais.

    Antes de começar, implemente uma exibição de itens virtuais em um catálogo. No exemplo a seguir, descrevemos como implementar a compra de itens virtuais. A configuração para outros tipos de item é semelhante.

    Esse tutorial descreve a implementação da seguinte lógica:

    Aviso

    No exemplo de script para fazer login, usamos as credenciais de uma conta demonstrativa (nome de usuário: xsolla, senha: xsolla). Essa conta só está disponível no projeto de demonstração.

    O exemplo de script não contém a implementação da exibição “página por página” de itens no catálogo (paginação). Use os parâmetros offset e limit do método SDK getCatalog para implementar a paginação. O limite é de 50 itens por página. Se o catálogo tiver mais de 50 itens, a paginação será necessária.

    Complete o widget de item

    Adicione um botão de compra ao widget de item e configure seus elementos visuais.
    Observação
    No exemplo, a classe modificada é alterada para RC_StoreItemComponent.
    Exemplo de estrutura do widget:

    Complete o script do widget de item

    1. Para vincular uma função de retorno de chamada para o botão de compra usando código, adicione a propriedade buyButton ao RC_StoreItemComponent.
    2. Adicione um método à classe RC_StoreItemComponent que é chamado ao clicar em BuyButton, e adicione a lógica de manipulação do evento de clique, conforme demonstrado no script de exemplo.
    3. Vincule um retorno de chamada ao botão de compra em uma das seguintes maneiras:

      • usando o painel Inspector, conforme exibido na imagem abaixo
      • inserindo o bloco de código abaixo no script da página

    Vinculando um retorno de chamada usando o painel Inspector:

    Vinculando um retorno de chamada via código:

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

    Exemplo de um script de widget (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);
            });
        }
    }
}

    Conclua o componente de script de catálogo de itens

    Observação
    No script de exemplo, a classe modificada é alterada para RC_ItemsCatalogComponent.

    Adicione a lógica para obter um token de autorização válido no método start da classe RC_ItemsCatalogComponent, como exibido no exemplo de script.

    Exemplo de um 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]);
                    }
                });
        });
    }
}

    Exemplo do resultado de trabalho do script:

    Venda itens virtuais por moedas virtuais

    Essa seção explica como usar os métodos SDK para implementar a venda de itens com moedas virtuais usando itens virtuais.

    Antes de começar, implemente uma exibição de itens virtuais em um catálogo. No exemplo a seguir, descrevemos como implementar a compra de itens virtuais. A configuração para outros tipos de item é semelhante.

    Esse tutorial descreve a implementação da seguinte lógica:

    Aviso

    No exemplo de script para fazer login, usamos as credenciais de uma conta demonstrativa (nome de usuário: xsolla, senha: xsolla). Essa conta só está disponível no projeto de demonstração.

    O exemplo de script não contém a implementação da exibição “página por página” de itens no catálogo (paginação). Use os parâmetros offset e limit do método SDK getCatalog para implementar a paginação. O limite é de 50 itens por página. Se o catálogo tiver mais de 50 itens, a paginação será necessária.

    Complete o widget de item

    Adicione um botão de compra ao widget de item e configure seus elementos visuais.
    Observação
    No exemplo, a classe modificada é alterada para VC_StoreItemComponent.
    Exemplo de estrutura do widget:

    Complete o script do widget de item

    1. Para vincular uma função de retorno de chamada para o botão de compra usando código, adicione a propriedade buyButton ao VC_StoreItemComponent.
    2. Adicione um método à classe VC_StoreItemComponent que é chamado ao clicar em BuyButton, e adicione a lógica de manipulação do evento de clique, conforme demonstrado no script de exemplo.
    3. Vincule um retorno de chamada ao botão de compra em uma das seguintes maneiras:

      • usando o painel Inspector, conforme exibido na imagem abaixo
      • inserindo o bloco de código abaixo no script da página

    Vinculando um retorno de chamada usando o painel Inspector:

    Vinculando um retorno de chamada via código:

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

    Exemplo de um script de widget (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);
        });
    }
}

    Conclua o componente de script de catálogo de itens

    Observação
    No script de exemplo, a classe modificada é alterada para VC_ItemsCatalogComponent.

    Adicione a lógica para obter um token de autorização válido no método start da classe VC_ItemsCatalogComponent, como exibido no exemplo de script.

    Exemplo de um 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]);
                    }
                });
        });
    }
}

    Exemplo do resultado de trabalho do script:

    Exibição do saldo de moedas virtuais

    Esse tutorial mostra como usar os métodos SDK para exibir o saldo da moeda virtual em seu aplicativo.

    Crie o widget para exibição de saldo

    1. Crie um prefab. Para fazer isso, selecione Create > Node Prefab a partir do menu contextual do diretório.
    2. Abra o prefab criado.
    3. Adicione um componente UITransform à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.

    1. Adicione os seguintes elementos de interface como objetos criança prefab e configure o visual deles:
      • imagem de fundo do widget
      • nome da moeda
      • quantia da moeda
      • imagem da moeda

    Exemplo de estrutura do widget:

    Crie o script do widget para exibir o saldo

    1. Crie um CurrencyBalanceItemComponent e adicione as seguintes propriedades:
      • iconSprite
      • currencyNameLabel
      • quantityLabel

    1. Adicione um método init e uma lógica de inicialização à classe CurrencyBalanceItemComponent, conforme demonstrado no script de exemplo.
    2. Anexe o CurrencyBalanceItemComponent ao nodo raiz do prefab.
    3. Vincule os elementos prefab às propriedades do CurrencyBalanceItemComponent, conforme demonstrado na imagem:

    Exemplo de um script de widget (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}`);
            }
        });
    }
}

    Crie uma interface de página

    Crie uma cena para uma página de saldo de moedas virtuais e adicione o elemento ScrollView a ela.

    Exemplo de uma estrutura de página:

    Para fazer com que ScrollView corresponda ao prefab CurrencyBalanceItem criado, configure o tamanho:

    1. Altere o valor do parâmetro ContentSize no nodo ScrollView e no nodo view interno.
    2. Vincule o componente Layout ao nodo content e configure-o. No exemplo, as seguintes configurações estão selecionadas:
      • Type == vertical
      • ResizeMode == Container

    Crie um componente de script de saldo de moedas

    1. Crie um CurrencyBalanceComponent e adicione as seguintes propriedades:
      • itemsScrollView
      • currencyBalanceItemPrefab

    1. Adicione a função de clico de vida start e a lógica de inicialização à classe CurrencyBalanceComponent, conforme demonstrado no script de exemplo.
    2. Adicione CurrencyBalanceComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
    3. Vincule os elementos prefab às propriedades do CurrencyBalanceItemComponent conforme exibido na imagem:
    Observação
    No exemplo de script para fazer login, usamos as credenciais de uma conta demonstrativa (nome de usuário: xsolla, senha: xsolla). Essa conta só está disponível no projeto de demonstração.
    Exemplo de um 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]);
                    }
                });
        });

    }
}

    Exemplo do resultado de trabalho do script:

    Exibição de itens no inventário

    Esse tutorial mostra como usar os métodos SDK para exibir itens no inventário do usuário.

    Crie um widget de item

    1. Crie um prefab. Para fazer isso, selecione Create > Node Prefab a partir do menu contextual do diretório.
    2. Abra o prefab criado.
    3. Adicione um componente UITransform à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.

    1. Adicione os seguintes elementos de interface como objetos criança prefab e configure o visual deles:
      • imagem de fundo do widget
      • nome do item de inventário
      • descrição do item de inventário
      • quantidade do item
      • imagem do item

    Exemplo de estrutura do widget:

    Crie o script do widget de item

    1. Crie um InventoryItemComponent e adicione as seguintes propriedades:
      • iconSprite
      • itemNameLabel
      • itemDescriptionLabel
      • quantityLabel

    1. Adicione um método init e uma lógica de inicialização à classe InventoryItemComponent, conforme demonstrado no script de exemplo.
    2. Anexe o InventoryItemComponent ao nodo raiz do prefab.
    3. Vincule os elementos prefab às propriedades do InventoryItemComponent, conforme demonstrado na imagem:

    Exemplo de um script de widget (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}`);
            }
        });
    }
}

    Crie uma interface de página

    Crie uma cena para uma página de inventário e adicione o elemento ScrollView a ela.

    Exemplo de uma estrutura de página:

    Para fazer com que ScrollView corresponda ao prefab InventoryItem criado, configure o tamanho:

    1. Altere o valor do parâmetro ContentSize no nodo ScrollView e no nodo view interno.
    2. Vincule o componente Layout ao nodo content e configure-o. No exemplo, as seguintes configurações estão selecionadas:
      • Type == vertical
      • ResizeMode == Container

    Crie um componente de script de página de inventário

    1. Crie um InventoryItemsComponent e adicione as seguintes propriedades:
      • itemsScrollView
      • inventoryItemPrefab

    1. Adicione a função de clico de vida start e a lógica de inicialização à classe InventoryItemsComponent, conforme demonstrado no script de exemplo.
    2. Adicione InventoryItemsComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componente XsollaSettingsManager que você adicionou durante a inicialização do SDK.
    3. Vincule os elementos prefab às propriedades do InventoryItemsComponent conforme exibido na imagem:
    Observação
    No exemplo de script para fazer login, usamos as credenciais de uma conta demonstrativa (nome de usuário: xsolla, senha: xsolla). Essa conta só está disponível no projeto de demonstração.
    Exemplo de um 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]);
                    }
                });
        });

    }
}

    Exemplo do resultado de trabalho do script:

    Seu progresso
    Obrigado pelo seu feedback!
    Última atualização: 22 de Janeiro de 2024

    Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

    Relatar um problema
    Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
    Forneça um e-mail para que possamos responder
    Obrigado pelo seu feedback!