Integre o SDK no lado do aplicativo
- Projete uma interface para o sistema de login, a loja do jogo e outras páginas para o seu aplicativo.
- 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.
<xsollaExtention>/assets/scripts/samples
do SDK.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:
- cadastro de usuários
- reenvio de solicitações de e-mails de confirmação de cadastro
- login de usuários
- redefinição de senha de usuários
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.
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
- 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
- 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. - 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. - Vincule os elementos da cena às propriedades do
RegistrationComponent
, conforme demonstrado na imagem:
- 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
- usando o painel
Vinculando um retorno de chamada usando o painel
Vinculando um retorno de chamada via código:
- typescript
start() {
this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
}
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.
- 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.
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
- 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
- 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. - 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. - Vincule os elementos da cena às propriedades do
ResendConfirmationEmailComponent
, conforme demonstrado na imagem:
- 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
- usando o painel
Vinculando um retorno de chamada usando o painel
Vinculando um retorno de chamada via código:
- 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.
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
.
- 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
- 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
- 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. - 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. - Vincule os elementos da cena às propriedades do
LoginComponent
, conforme demonstrado na imagem:
- 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
- usando o painel
Vinculando um retorno de chamada usando o painel
Vinculando um retorno de chamada via código:
- typescript
start() {
this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
}
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
.
- 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
- 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
- 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. - 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. - Vincule os elementos da cena às propriedades do
ResetPasswordComponent
, conforme demonstrado na imagem:
- 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
- usando o painel
Vinculando um retorno de chamada usando o painel
Vinculando um retorno de chamada via código:
- typescript
start() {
this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
}
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
.
- 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
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
- 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
. - Adicione um método à classe
SocialLoginComponent
que é chamado ao clicar emSocialLogin
, e adicione a lógica da manipulação do evento de clique, como demonstrado no script de exemplo.
- 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. - Vincule o botão
SocialLogin
à propriedadesocialLoginButton
doSocialLoginComponent
conforme demonstrado na imagem:
- 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
- usando o painel
Vinculando um retorno de chamada usando o painel
Vinculando um retorno de chamada via código:
- typescript
start() {
this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
}
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.
- 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:
- Configure itens virtuais e grupos de itens virtuais.
- Configure pacotes de moedas virtuais.
- Configurar pacotes.
Esse tutorial descreve a implementação da seguinte lógica:
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
- Crie um prefab. Para fazer isso, selecione
Create > Node Prefab a partir do menu contextual do diretório. - Abra o prefab criado.
- Adicione um componente
UITransform
à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.
- 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
- Crie um
StoreItemComponent
e adicione as seguintes propriedades:iconSprite
itemNameLabel
itemDescriptionLabel
priceLabel
- Adicione um método
init
e uma lógica de inicialização à classeStoreItemComponent
, conforme demonstrado no script de exemplo. - Anexe o StoreItemComponent ao nodo raiz do prefab.
- Vincule os elementos prefab às propriedades do
StoreItemComponent
, conforme demonstrado na imagem:
Exemplo de um script de widget (StoreItemComponent):
- 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:
- Altere o valor do parâmetro
ContentSize
no nodoScrollView
e no nodoview
interno. - Vincule o componente
Layout
ao nodocontent
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
- Crie um ItemsCatalogComponent e adicione as seguintes propriedades:
itemsScrollView
storeItemPrefab
- Adicione a função de clico de vida
start e a lógica de inicialização à classeItemsCatalogComponent
, conforme demonstrado no script de exemplo. - 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. - Vincule os elementos prefab às propriedades do
ItemsCatalogComponent
conforme exibido na imagem:
Exemplo de um script de classe (ItemsCatalogComponent):
- 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
- Crie um prefab. Para fazer isso, selecione
Create > Node Prefab a partir do menu contextual do diretório. - Abra o prefab criado.
- Adicione um componente
UITransform
à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.
- 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
- Crie um BundleItemComponent e adicione as seguintes propriedades:
iconSprite
bundleNameLabel
bundleDescriptionLabel
priceLabel
contentDescriptionlabel
- Adicione um método
init
e uma lógica de inicialização à classeBundleItemComponent
, conforme demonstrado no script de exemplo. - Anexe o BundleItemComponent ao nodo raiz do prefab.
- Vincule os elementos prefab às propriedades do
BundleItemComponent
, conforme demonstrado na imagem:
Exemplo de um script de widget (BundleItemComponent):
- 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:
- Altere o valor do parâmetro
ContentSize
no nodoScrollView
e no nodoview
interno. - Vincule o componente
Layout
ao nodocontent
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
- Crie um BundlesCatalogComponent e adicione as seguintes propriedades:
itemsScrollView
bundleItemPrefab
- Adicione a função de clico de vida
start e a lógica de inicialização à classeBundlesCatalogComponent
, conforme demonstrado no script de exemplo. - 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. - Vincule os elementos prefab às propriedades do
BundlesCatalogComponent
conforme exibido na imagem:
Exemplo de um script de classe (BundlesCatalogComponent):
- 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
- Crie um prefab. Para fazer isso, selecione
Create > Node Prefab a partir do menu contextual do diretório. - Abra o prefab criado.
- Adicione um componente
UITransform
à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.
- 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
- Crie um CurrencyPackageItemComponent e adicione as seguintes propriedades:
iconSprite
currencyNameLabel
currencyDescriptionLabel
priceLabel
- Adicione um método
init
e uma lógica de inicialização à classeCurrencyPackageItemComponent
, conforme demonstrado no script de exemplo. - Anexe o CurrencyPackageItemComponent ao nodo raiz do prefab.
- Vincule os elementos prefab às propriedades do
CurrencyPackageItemComponent
, conforme demonstrado na imagem:
Exemplo de um script de widget (CurrencyPackageItemComponent):
- 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:
- Altere o valor do parâmetro
ContentSize
no nodoScrollView
e no nodoview
interno. - Vincule o componente
Layout
ao nodocontent
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
- Crie um
CurrencyPackagesCatalogComponent
e adicione as seguintes propriedades:itemsScrollView
currencyPackageItemPrefab
- Adicione a função de clico de vida
start e a lógica de inicialização à classeCurrencyPackagesCatalogComponent
, conforme demonstrado no script de exemplo. - 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. - Vincule os elementos prefab às propriedades do
CurrencyPackagesCatalogComponent
conforme exibido na imagem:
Exemplo de um script de classe (CurrencyPackagesCatalogComponent ):
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:
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.RC_StoreItemComponent
.Complete o script do widget de item
- Para vincular uma função de retorno de chamada para o botão de compra usando código, adicione a propriedade
buyButton
aoRC_StoreItemComponent
. - Adicione um método à classe
RC_StoreItemComponent
que é chamado ao clicar emBuyButton
, e adicione a lógica de manipulação do evento de clique, conforme demonstrado no script de exemplo. - 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
- usando o painel
Vinculando um retorno de chamada usando o painel
Vinculando um retorno de chamada via código:
- typescript
start() {
this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
}
Exemplo de um script de widget (RC_StoreItemComponent):
- 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
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):
- 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:
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.VC_StoreItemComponent
.Complete o script do widget de item
- Para vincular uma função de retorno de chamada para o botão de compra usando código, adicione a propriedade
buyButton
aoVC_StoreItemComponent
. - Adicione um método à classe
VC_StoreItemComponent
que é chamado ao clicar emBuyButton
, e adicione a lógica de manipulação do evento de clique, conforme demonstrado no script de exemplo. - 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
- usando o painel
Vinculando um retorno de chamada usando o painel
Vinculando um retorno de chamada via código:
- typescript
start() {
this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
}
Exemplo de um script de widget (VC_StoreItemComponent):
- 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
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):
- 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
- Crie um prefab. Para fazer isso, selecione
Create > Node Prefab a partir do menu contextual do diretório. - Abra o prefab criado.
- Adicione um componente
UITransform
à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.
- 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
- Crie um CurrencyBalanceItemComponent e adicione as seguintes propriedades:
iconSprite
currencyNameLabel
quantityLabel
- Adicione um método
init
e uma lógica de inicialização à classeCurrencyBalanceItemComponent
, conforme demonstrado no script de exemplo. - Anexe o CurrencyBalanceItemComponent ao nodo raiz do prefab.
- Vincule os elementos prefab às propriedades do
CurrencyBalanceItemComponent
, conforme demonstrado na imagem:
Exemplo de um script de widget (CurrencyBalanceItemComponent):
- 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:
- Altere o valor do parâmetro
ContentSize
no nodoScrollView
e no nodoview
interno. - Vincule o componente
Layout
ao nodocontent
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
- Crie um CurrencyBalanceComponent e adicione as seguintes propriedades:
itemsScrollView
currencyBalanceItemPrefab
- Adicione a função de clico de vida
start e a lógica de inicialização à classeCurrencyBalanceComponent
, conforme demonstrado no script de exemplo. - Adicione
CurrencyBalanceComponent ao nodo na cena. Você pode adicionar um novo nodo ou usar um nodo existente com o componenteXsollaSettingsManager
que você adicionou durante a inicialização do SDK. - Vincule os elementos prefab às propriedades do
CurrencyBalanceItemComponent
conforme exibido na imagem:
xsolla
, senha: xsolla
). Essa conta só está disponível no projeto de demonstração.- 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
- Crie um prefab. Para fazer isso, selecione
Create > Node Prefab a partir do menu contextual do diretório. - Abra o prefab criado.
- Adicione um componente
UITransform
à raiz do prefab, conforme demonstrado na imagem abaixo, e configure o tamanho do conteúdo.
- 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
- Crie um InventoryItemComponent e adicione as seguintes propriedades:
iconSprite
itemNameLabel
itemDescriptionLabel
quantityLabel
- Adicione um método
init
e uma lógica de inicialização à classeInventoryItemComponent
, conforme demonstrado no script de exemplo. - Anexe o InventoryItemComponent ao nodo raiz do prefab.
- Vincule os elementos prefab às propriedades do
InventoryItemComponent
, conforme demonstrado na imagem:
Exemplo de um script de widget (InventoryItemComponent):
- 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:
- Altere o valor do parâmetro
ContentSize
no nodoScrollView
e no nodoview
interno. - Vincule o componente
Layout
ao nodocontent
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
- Crie um InventoryItemsComponent e adicione as seguintes propriedades:
itemsScrollView
inventoryItemPrefab
- Adicione a função de clico de vida
start e a lógica de inicialização à classeInventoryItemsComponent
, conforme demonstrado no script de exemplo. - 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. - Vincule os elementos prefab às propriedades do
InventoryItemsComponent
conforme exibido na imagem:
xsolla
, senha: xsolla
). Essa conta só está disponível no projeto de demonstração.- 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:
Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.