Integrar el SDK en el lado de la aplicación
- Diseñe una interfaz para el sistema de inicio de sesión, la tienda del juego y otras páginas de su aplicación.
- Implemente en su aplicación la lógica de autenticación de usuarios, visualización de la tienda, compra, etc. con métodos del SDK.
<xsollaExtention>/assets/scripts/samples
del SDK.Registro de usuarios e inicio de sesión mediante nombre de usuario, correo electrónico y contraseña
Estas indicaciones muestran cómo usar los métodos del SDK para implementar:
- registro de usuarios
- reenvío de solicitud de correo electrónico de confirmación del registro
- inicio de sesión de usuarios
- restablecimiento de contraseña
Puede autenticar a los usuarios con su nombre de usuario o su dirección de correo electrónico. En los siguientes ejemplos autenticamos a los usuarios con su nombre de usuario, mientras que la dirección de correo electrónico se usa para confirmar el registro y para restablecer la contraseña.
Implementar el registro de usuarios
Este tutorial describe la implementación de la siguiente lógica:Cree interfaz de página
Cree una escena para una página de registro y añada los siguientes elementos:
- campo de nombre de usuario
- campo de dirección de correo electrónico de usuario
- campo de contraseña de usuario
- botón de registro
Ejemplo de estructura de página:
Cree componente de script de registro
- Cree un RegistrationComponent y añada las siguientes propiedades:
usernameEditBox
emailEditBox
passwordEditBox
signUpButton
— opcional. Se utiliza cuando se vincula una función de devolución de llamada al botón mediante un código
- Añada un método a la clase del
RegistrationComponent
que se solicita al hacer clic enSignUpButton
, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo. - Añada el RegistrationComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos de la escena a las propiedades del
RegistrationComponent
como se muestra en la imagen:
- Vincule una devolución de llamada al botón de registro de una de las siguientes formas:
- utilizando el panel
Inspector , como se muestra en la siguiente imagen - insertando el siguiente bloque de código en el script de la página
- utilizando el panel
Vinculación de la devolución de llamada con el panel
Vinculación de la devolución de llamada con código:
- typescript
start() {
this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
}
En los ejemplos del script, los métodos onComplete
y onError
llaman al método estándar console.log
. Si se produce un error, el código de error y la descripción se transmiten en el parámetro error
.
Puede añadir otras acciones, como abrir una página con una solicitud de reenvío de un correo electrónico de registro o abrir una página de inicio de sesión si el registro se realiza correctamente.
- 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);
});
}
}
Configurar el correo electrónico de confirmación de registro
Tras registrarse correctamente, el usuario recibe un correo electrónico de confirmación de registro en la dirección especificada. Puede personalizar los correos electrónicos enviados a los usuarios en Cuenta del editor.
Si está desarrollando una aplicación para móviles, configure vínculos profundos para devolver al usuario a una aplicación después de que confirme su registro.
Implemente la solicitud de reenvío de correo electrónico de confirmación de registro
Este tutorial describe la implementación de la siguiente lógica:Crear controlador de interfaz
Cree una escena para una página con una solicitud para reenviar un correo electrónico de confirmación y añada los siguientes elementos:
- campo de nombre de usuario/correo electrónico
- botón de reenvío de correo electrónico
Ejemplo de estructura de página:
Cree componente de script de reenvío de correo electrónico
- Cree un ResendConfirmationEmailComponent y añada las siguientes propiedades:
usernameTextBox
resendEmailButton
— opcional. Se utiliza cuando se vincula una función de devolución de llamada al botón mediante un código
- Añada un método a la clase del
ResendConfirmationEmailComponent
que se solicita al hacer clic enResendEmail
, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo. - Añada el ResendConfirmationEmailComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos de la escena a las propiedades del
ResendConfirmationEmailComponent
como se muestra en la imagen:
- Vincule una devolución de llamada al botón de solicitud de correo electrónico de confirmación de registro de una de las siguientes formas:
- utilizando el panel
Inspector , como se muestra en la siguiente imagen - insertando el siguiente bloque de código en el script de la página con una solicitud de reenvío de correo electrónico de confirmación
- utilizando el panel
Vinculación de la devolución de llamada con el panel
Vinculación de la devolución de llamada con código:
- typescript
start() {
this.resendEmailButton.node.on(Button.EventType.CLICK, this.onResendEmailClicked, this);
}
Si la solicitud tiene éxito, el usuario recibe un correo electrónico de confirmación de registro en la dirección de correo electrónico especificada durante el registro.
En los ejemplos del script, los métodos onComplete
y onError
hacen una llamada al método console.log
estándar. Puede añadir otras acciones.
En caso de error, el código de error y la descripción se transmiten en el 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);
});
}
}
Implementar el inicio de sesión del usuario
Este tutorial describe la implementación de la siguiente lógica:Cree interfaz de página
Cree una escena para una página de inicio de sesión y añada los siguientes elementos:
- campo de nombre de usuario
- campo de contraseña
- interruptor “Recuérdame”
- botón de inicio de sesión
Ejemplo de estructura de página:
Cree componente de script de inicio de sesión
- Cree un LoginComponent y añada las siguientes propiedades:
usernameEditBox
passwordEditBox
remeberMeToggle
loginButton
— opcional. Se utiliza cuando se vincula una función de devolución de llamada al botón mediante un código
- Añada un método a la clase del
LoginComponent
que se solicita al hacer clic enLoginButton
, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo. - Añada el LoginComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos de la escena a las propiedades del
LoginComponent
como se muestra en la imagen:
- Vincule una devolución de llamada al botón de inicio de sesión de una de las siguientes formas:
- utilizando el panel
Inspector , como se muestra en la siguiente imagen - insertando el siguiente bloque de código en el script de la página
- utilizando el panel
Vinculación de la devolución de llamada con el panel
Vinculación de la devolución de llamada con código:
- typescript
start() {
this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
}
En los ejemplos del script, los métodos onComplete
y onError
hacen una llamada al método console.log
estándar. Puede añadir otras acciones.
En caso de error, el código de error y la descripción se transmiten en el 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);
});
}
}
Implementar el restablecimiento de contraseña
Este tutorial describe la implementación de la siguiente lógica:Crear controlador de interfaz
Cree una escena para una página de restablecimiento de contraseña y añada lo siguiente:
- campo de nombre de usuario
- botón de restablecimiento de contraseña
Ejemplo de estructura de página:
Cree componente de script de restablecimiento de contraseña
- Cree un ResetPasswordComponent y añada las siguientes propiedades:
usernameEditBox
resetPasswordButton
— opcional. Se utiliza cuando se vincula una función de devolución de llamada al botón mediante un código
- Añada un método a la clase del
ResetPasswordComponent
que se solicita al hacer clic enResetPassword
, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo. - Añada el ResetPasswordComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos de la escena a las propiedades del
ResetPasswordComponent
como se muestra en la imagen:
- Vincule una devolución de llamada al botón de restablecimiento de contraseña de una de las siguientes formas:
- utilizando el panel
Inspector , como se muestra en la siguiente imagen - insertando el siguiente bloque de código en el script de la página
- utilizando el panel
Vinculación de la devolución de llamada con el panel
Vinculación de la devolución de llamada con código:
- typescript
start() {
this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
}
En los ejemplos del script, los métodos onComplete
y onError
hacen una llamada al método console.log
estándar. Puede añadir otras acciones.
En caso de error, el código de error y la descripción se transmiten en el 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);
});
}
}
Inicio de sesión mediante red social
Esta guía muestra cómo usar los métodos del SDK para implementar el registro e inicio de sesión de usuario mediante cuenta de red social.
A diferencia de la autenticación de usuarios mediante nombre de usuario/dirección de correo electrónico del usuario y contraseña, no tiene que implementar lógicas independientes para el registro de usuarios. Si el primer inicio de sesión del usuario se realiza a través de una red social, se creará automáticamente una nueva cuenta.
Si ha implementado el inicio de sesión mediante red social en su aplicación como método de autenticación alternativo, la cuenta de la red social se vincula automáticamente a una cuenta de usuario existente si se cumplen las siguientes condiciones:
- Un usuario que se registró con nombre de usuario/dirección de correo electrónico y contraseña inició sesión en su aplicación a través de una cuenta de red social.
- Una red social devuelve una dirección de correo electrónico.
- La dirección de correo electrónico del usuario en una red social es la misma que la dirección de correo electrónico utilizada para registrarse en su aplicación.
Este tutorial describe la implementación de la siguiente lógica:
Los ejemplos muestran cómo configurar el inicio de sesión del usuario a través de una cuenta de Facebook. Puede configurar todas las redes sociales de la misma manera.
Los ejemplos sirven para familiarizarse con los métodos del SDK. Las aplicaciones suelen requerir interfaces y lógica más complejas.
Cree interfaz de página
Cree una escena para una página de inicio de sesión mediante red social y añada el botón de inicio de sesión mediante red social.
Ejemplo de estructura de página:
Cree componente de script de inicio de sesión mediante red social
- Cree un SocialLoginComponent. Para vincular una función callback al botón de inicio de sesión social utilizando código, añada la propiedad
socialLoginButton
. - Añada un método a la clase
SocialLoginComponent
, el cual será llamado al hacer clic enSocialLogin
, y agregue la lógica para gestionar el evento del clic, como se muestra en el ejemplo del script.
- Agregue el SocialLoginComponent al nodo de la escena. Puede añadir un nuevo nodo o utilizar uno existente con el componente
XsollaSettingsManager
que agregó durante la inicialización del SDK. - Vincule el botón
SocialLogin
a la propiedadsocialLoginButton
delSocialLoginComponent
, como se muestra en la imagen:
- Vincule un callback al botón de inicio de sesión social de una de las siguientes maneras:
- utilizando el panel
Inspector , como se muestra en la imagen de abajo - al insertar el siguiente bloque de código en el script de la página
- utilizando el panel
Vinculación de la devolución de llamada con el panel
Vinculación de la devolución de llamada con código:
- typescript
start() {
this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
}
En los ejemplos del script, los métodos onComplete
, onCanceled
y onError
llaman al método estándar console.log
. En caso de error, el código y la descripción del error se pasan en el parámetro error
.
Puede añadir otras acciones, como abrir una página con una solicitud de reenvío para un correo electrónico de registro, o abrir una página de inicio de sesión si el registro se realiza correctamente.
- 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);
});
}
}
}
Visualización del catálogo de artículos
Este tutorial muestra cómo utilizar los métodos del SDK para visualizar los siguientes artículos en una tienda en el juego:
- artículos virtuales
- lotes
- paquetes de moneda virtual
Antes de empezar, configure los artículos en la Cuenta del editor:
- Configure artículos virtuales y grupos de artículos virtuales.
- Configure paquetes de monedas virtuales.
- Configure lotes.
Este tutorial describe la implementación de la siguiente lógica:
El ejemplo de cada artículo de un catálogo muestra:
- nombre
- descripción
- precio
- imagen
También puede mostrar otra información sobre el artículo si esta información está almacenada en una tienda en el juego.
Implementar la visualización de artículos virtuales
Cree widget de artículos
- Cree un prefab. Para ello, seleccione
Create > Node Prefab en el menú contextual de la carpeta. - Abra el prefab creado.
- Añada un componente
UITransform
a la raíz del prefab como se muestra en la siguiente imagen y establezca el tamaño del contenido.
- Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure su aspecto visual:
- imagen de fondo del widget
- nombre del artículo
- descripción del artículo
- precio del artículo
- imagen del artículo
Ejemplo de estructura del widget:
Cree script de widget de artículos
- Cree un
StoreItemComponent
y añada las siguientes propiedades:iconSprite
itemNameLabel
itemDescriptionLabel
priceLabel
- Añada el
init
método y la lógica de inicialización a la clase deStoreItemComponent
como se muestra en el script de ejemplo. - Adjunte el componente StoreItemComponent al nodo raíz del prefab.
- Vincule los elementos prefab a las propiedades de
StoreItemComponent
como se muestra en la imagen:
Ejemplo de 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}`);
}
});
}
}
Cree interfaz de página
Cree una escena para una página de catálogo de artículos y añada el elemento ScrollView
.
Ejemplo de estructura de página:
Para que el ScrollView
coincida con el prefab StoreItem
creado, configure su tamaño:
- Cambie el valor del parámetro
ContentSize
en el nodoScrollView
y en el nodoview
interno. - Vincule el componente
Layout
al nodocontent
y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:Type == vertical
ResizeMode == Container
Cree componente de script de catálogo de artículos
- Cree un ItemsCatalogComponent y añada las siguientes propiedades:
itemsScrollView
storeItemPrefab
- Añada la
start función de ciclo de vida y la lógica de inicialización a la clase deItemsCatalogComponent
como se muestra en el script de ejemplo. - Añada el ItemsCatalogComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos prefab a las propiedades de
ItemsCatalogComponent
como se muestra en la imagen:
Ejemplo de script de clase (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]);
}
});
}
}
Ejemplo de resultado del trabajo del script:
Implementar la visualización de lotes
Cree widget de lotes
- Cree un prefab. Para ello, seleccione
Create > Node Prefab en el menú contextual de la carpeta. - Abra el prefab creado.
- Añada un componente
UITransform
a la raíz del prefab como se muestra en la siguiente imagen y establezca el tamaño del contenido.
- Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure su aspecto visual:
- imagen de fondo del widget
- nombre del lote
- descripción del lote
- precio del lote
- imagen del lote
- descripción del contenido del lote (artículos y cantidad)
Ejemplo de estructura del widget:
Cree script de widget de lotes
- Cree un BundleItemComponent y añada las siguientes propiedades:
iconSprite
bundleNameLabel
bundleDescriptionLabel
priceLabel
contentDescriptionlabel
- Añada el
init
método y la lógica de inicialización a la clase deBundleItemComponent
como se muestra en el script de ejemplo. - Adjunte el componente BundleItemComponent al nodo raíz del prefab.
- Vincule los elementos prefab a las propiedades de
BundleItemComponent
como se muestra en la imagen:
Ejemplo de 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;
}
}
Cree interfaz de página
Cree una escena para una página de catálogo de lotes y añada el elemento ScrollView
.
Ejemplo de estructura de página:
Para que el ScrollView
coincida con el prefab BundleItem
creado, configure su tamaño:
- Cambie el valor del parámetro
ContentSize
en el nodoScrollView
y en el nodoview
interno. - Vincule el componente
Layout
al nodocontent
y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:Type == vertical
ResizeMode == Container
Cree componente de script de catálogo de lotes
- Cree un BundlesCatalogComponent y añada las siguientes propiedades:
itemsScrollView
bundleItemPrefab
- Añada la
start función de ciclo de vida y la lógica de inicialización a la clase deBundlesCatalogComponent
como se muestra en el script de ejemplo. - Añada el BundlesCatalogComponent al nodo de la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos prefab a las propiedades de
BundlesCatalogComponent
como se muestra en la imagen:
Ejemplo de script de clase (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]);
}
});
}
}
Ejemplo de resultado del trabajo del script:
Implemente la visualización del catálogo de paquetes de moneda virtual
Cree widget para paquete de moneda virtual
- Cree un prefab. Para ello, seleccione
Create > Node Prefab en el menú contextual de la carpeta. - Abra el prefab creado.
- Añada un componente
UITransform
a la raíz del prefab como se muestra en la siguiente imagen y establezca el tamaño del contenido.
- Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure su aspecto visual:
- imagen de fondo del widget
- nombre de la moneda
- descripción de la moneda
- precio de la moneda
- imagen de la moneda
Ejemplo de estructura del widget:
Cree script de widget para el paquete de moneda virtual
- Cree un CurrencyPackageItemComponent y añada las siguientes propiedades:
iconSprite
currencyNameLabel
currencyDescriptionLabel
priceLabel
- Añada el
init
método y la lógica de inicialización a la clase deCurrencyPackageItemComponent
como se muestra en el script de ejemplo. - Adjunte el componente CurrencyPackageItemComponent al nodo raíz del prefab.
- Vincule los elementos prefab a las propiedades de
CurrencyPackageItemComponent
como se muestra en la imagen:
Ejemplo de 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}`);
}
});
}
}
Cree interfaz de página
Cree una escena para una página de catálogo de paquetes de moneda virtual y añada el elemento ScrollView
.
Ejemplo de estructura de página:
Para que el ScrollView
coincida con el prefab CurrencyPackageItem
creado, configure su tamaño:
- Cambie el valor del parámetro
ContentSize
en el nodoScrollView
y en el nodoview
interno. - Vincule el componente
Layout
al nodocontent
y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:Type == vertical
ResizeMode == Container
Cree componente de script de catálogo de paquetes de moneda
- Cree un
CurrencyPackagesCatalogComponent
y añada las siguientes propiedades:itemsScrollView
currencyPackageItemPrefab
- Añada la
start función de ciclo de vida y la lógica de inicialización a la clase deCurrencyPackagesCatalogComponent
como se muestra en el script de ejemplo. - Añada el CurrencyPackagesCatalogComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos prefab a las propiedades de
CurrencyPackagesCatalogComponent
como se muestra en la imagen:
Ejemplo de script de clase (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]);
}
});
}
}
Ejemplo de resultado del trabajo del script:
Vender artículos virtuales a cambio de moneda real
Esta sección explica cómo utilizar los métodos del SDK para implementar la venta de artículos por moneda real usando artículos virtuales.
Antes de empezar, implemente la visualización de artículos virtuales en un catálogo. En el siguiente ejemplo, describimos cómo implementar la compra de artículos virtuales. La configuración para otros tipos de artículos es similar.
Este tutorial describe la implementación de la siguiente lógica:
En el ejemplo de script para iniciar sesión, utilizamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla
, contraseña: xsolla
). Esta cuenta solo está disponible para el proyecto de demostración.
El script de ejemplo no contiene la implementación de la visualización página por página de los artículos del catálogo (paginación). Use los parámetros offset
y limit
del método getCatalog
del SDK para implementar la paginación. El número máximo de artículos en una página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.
Completar widget de artículos
Añadir un botón de compra al widget de artículos y configurar sus parámetros visuales.RC_StoreItemComponent
.Script completo de widget de artículos
- Para vincular una función de devolución de llamada al botón de compra mediante código, añada la propiedad
buyButton
alRC_StoreItemComponent
. - Añada un método a la clase
RC_StoreItemComponent
que se solicita al hacer clic enBuyButton
, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo. - Vincule una devolución de llamada al botón de compra de una de las siguientes formas:
- utilizando el panel
Inspector como se muestra en la siguiente imagen - insertando el siguiente bloque de código en el script de la página
- utilizando el panel
Vinculación de la devolución de llamada con el panel
Vinculación de la devolución de llamada con código:
- typescript
start() {
this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
}
Ejemplo de 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);
});
}
}
}
Complete un componente de script de catálogo de artículos
RC_ItemsCatalogComponent
.Añada la lógica para obtener un token de autorización válido al método start
de la clase RC_ItemsCatalogComponent
, como se muestra en el script de ejemplo.
Ejemplo de script de clase (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]);
}
});
});
}
}
Ejemplo de resultado del trabajo del script:
Vender artículos virtuales a cambio de moneda virtual
Esta sección explica cómo utilizar los métodos del SDK para implementar la venta de artículos por moneda virtual usando artículos virtuales.
Antes de empezar, implemente la visualización de artículos virtuales en un catálogo. En el siguiente ejemplo, describimos cómo implementar la compra de artículos virtuales. La configuración para otros tipos de artículos es similar.
Este tutorial describe la implementación de la siguiente lógica:
En el ejemplo de script para iniciar sesión, utilizamos las credenciales de una cuenta de demostración (nombre de usuario: xsolla
, contraseña: xsolla
). Esta cuenta solo está disponible para el proyecto de demostración.
El script de ejemplo no contiene la implementación de la visualización página por página de los artículos del catálogo (paginación). Use los parámetros offset
y limit
del método getCatalog
del SDK para implementar la paginación. El número máximo de artículos en una página es 50. Si el catálogo tiene más de 50 artículos, es necesario realizar la paginación.
Completar widget de artículos
Añadir un botón de compra al widget de artículos y configurar sus parámetros visuales.VC_StoreItemComponent
.Script completo de widget de artículos
- Para vincular una función de devolución de llamada al botón de compra mediante código, añada la propiedad
buyButton
alVC_StoreItemComponent
. - Añada un método a la clase
VC_StoreItemComponent
que se solicita al hacer clic enBuyButton
, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo. - Vincule una devolución de llamada al botón de compra de una de las siguientes formas:
- utilizando el panel
Inspector como se muestra en la siguiente imagen - insertando el siguiente bloque de código en el script de la página
- utilizando el panel
Vinculación de la devolución de llamada con el panel
Vinculación de la devolución de llamada con código:
- typescript
start() {
this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
}
Ejemplo de 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);
});
}
}
Complete un componente de script de catálogo de artículos
VC_ItemsCatalogComponent
.Añada la lógica para obtener un token de autorización válido al método start
de la clase VC_ItemsCatalogComponent
, como se muestra en el script de ejemplo.
Ejemplo de script de clase (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]);
}
});
});
}
}
Ejemplo de resultado del trabajo del script:
Visualización del saldo de moneda virtual
Este tutorial muestra cómo utilizar los métodos del SDK para visualizar el saldo de moneda virtual en su aplicación.
Cree widget para mostrar el saldo
- Cree un prefab. Para ello, seleccione
Create > Node Prefab en el menú contextual de la carpeta. - Abra el prefab creado.
- Añada un componente
UITransform
a la raíz del prefab como se muestra en la siguiente imagen y establezca el tamaño del contenido.
- Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure su aspecto visual:
- imagen de fondo del widget
- nombre de la moneda
- cantidad de la moneda
- imagen de la moneda
Ejemplo de estructura del widget:
Cree script de widget para mostrar el saldo
- Cree un CurrencyBalanceItemComponent y añada las siguientes propiedades:
iconSprite
currencyNameLabel
quantityLabel
- Añada el
init
método y la lógica de inicialización a la clase deCurrencyBalanceItemComponent
como se muestra en el script de ejemplo. - Adjunte el componente CurrencyBalanceItemComponent al nodo raíz del prefab.
- Vincule los elementos prefab a las propiedades de
CurrencyBalanceItemComponent
como se muestra en la imagen:
Ejemplo de 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}`);
}
});
}
}
Cree interfaz de página
Cree una escena para una página del saldo de moneda virtual y añada el elemento ScrollView
.
Ejemplo de estructura de página:
Para que el ScrollView
coincida con el prefab CurrencyBalanceItem
creado, configure su tamaño:
- Cambie el valor del parámetro
ContentSize
en el nodoScrollView
y en el nodoview
interno. - Vincule el componente
Layout
al nodocontent
y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:Type == vertical
ResizeMode == Container
Cree componente de script de saldo de moneda virtual
- Cree un CurrencyBalanceComponent y añada las siguientes propiedades:
itemsScrollView
currencyBalanceItemPrefab
- Añada la
start función de ciclo de vida y la lógica de inicialización a la clase deCurrencyBalanceComponent
como se muestra en el script de ejemplo. - Añada el
CurrencyBalanceComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componenteXsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos prefab a las propiedades de
CurrencyBalanceItemComponent
como se muestra en la imagen:
xsolla
, contraseña: xsolla
). Esta cuenta solo está disponible para el proyecto de demostración.- 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]);
}
});
});
}
}
Ejemplo de resultado del trabajo del script:
Visualización de artículos en el inventario
Este tutorial muestra cómo usar los métodos del SDK para mostrar artículos en el inventario del usuario.
Cree widget de artículos
- Cree un prefab. Para ello, seleccione
Create > Node Prefab en el menú contextual de la carpeta. - Abra el prefab creado.
- Añada un componente
UITransform
a la raíz del prefab como se muestra en la siguiente imagen y establezca el tamaño del contenido.
- Añada los siguientes elementos de interfaz de usuario como objetos secundarios prefab y configure su aspecto visual:
- imagen de fondo del widget
- nombre del artículo del inventario
- descripción del artículo del inventario
- cantidad del artículo del inventario
- imagen del artículo del inventario
Ejemplo de estructura del widget:
Cree script de widget de artículos
- Cree un InventoryItemComponent y añada las siguientes propiedades:
iconSprite
itemNameLabel
itemDescriptionLabel
quantityLabel
- Añada el
init
método y la lógica de inicialización a la clase deInventoryItemComponent
como se muestra en el script de ejemplo. - Adjunte el componente InventoryItemComponent al nodo raíz del prefab.
- Vincule los elementos prefab a las propiedades de
InventoryItemComponent
como se muestra en la imagen:
Ejemplo de 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}`);
}
});
}
}
Cree interfaz de página
Cree una escena para una página de inventario y añada el elemento ScrollView
.
Ejemplo de estructura de página:
Para que el ScrollView
coincida con el prefab InventoryItem
creado, configure su tamaño:
- Cambie el valor del parámetro
ContentSize
en el nodoScrollView
y en el nodoview
interno. - Vincule el componente
Layout
al nodocontent
y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:Type == vertical
ResizeMode == Container
Cree componente de script de página de inventario
- Cree un InventoryItemsComponent y añada las siguientes propiedades:
itemsScrollView
inventoryItemPrefab
- Añada la
start función de ciclo de vida y la lógica de inicialización alInventoryItemsComponent
como se muestra en el script de ejemplo. - Añada el InventoryItemsComponent al nodo en la escena. Puede añadir un nuevo nodo o utilizar un nodo existente con el componente
XsollaSettingsManager
que añadió durante la inicialización del SDK. - Vincule los elementos prefab a las propiedades de
InventoryItemsComponent
como se muestra en la imagen:
xsolla
, contraseña: xsolla
). Esta cuenta solo está disponible para el proyecto de demostración.- 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]);
}
});
});
}
}
Ejemplo de resultado del trabajo del script:
¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.