SDK para Cocos Creator / Integrar el SDK en el lado de la aplicación
  Volver a Documentos

SDK para Cocos Creator

Integrar el SDK en el lado de la aplicación

  1. Diseñe una interfaz para el sistema de inicio de sesión, la tienda del juego y otras páginas de su aplicación.
  2. 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.
Nota
Puede crear su propia solución siguiendo el manual de Cocos Creator, o utilizar la escena de demostración como plantilla.
Para empezar a usar las funciones básicas del SDK, siga estos tutoriales paso a paso:Puede encontrar los scripts usados en el directorio <xsollaExtention>/assets/scripts/samples del SDK.
Nota
Los scripts de los tutoriales utilizan métodos del SDK. Asegúrese de instalar e inicializar correctamente el 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:

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.

Nota
Si utiliza el widget de Login en su sitio web (p. ej., en una tienda web), asegúrese de haber implementado los mismos métodos de autenticación de usuarios en su sitio web y en su aplicación. Por defecto, el widget utiliza la dirección de correo electrónico para la autenticación. Para configurar el inicio de sesión del usuario mediante el nombre de usuario, contacte con su gestor del éxito del cliente o envíe un correo electrónico a csm@xsolla.com.

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

  1. 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

  1. Añada un método a la clase del RegistrationComponent que se solicita al hacer clic en SignUpButton, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo.
  2. 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.
  3. Vincule los elementos de la escena a las propiedades del RegistrationComponent como se muestra en la imagen:

  1. 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

Vinculación de la devolución de llamada con el panel Inspector:

Vinculación de la devolución de llamada con código:

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

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.

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


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

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(EditBox)
    emailEditBox: EditBox;

    @property(EditBox)
    passwordEditBox: EditBox;

    @property(Button)
    signUpButton: Button;

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

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

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.

Nota
Puede deshabilitar la confirmación de registro a través de una dirección de correo electrónico si sus estándares de seguridad se lo permiten. Contacte con su gestor del éxito del cliente para deshabilitarla o con nosotros escribiéndonos a csm@xsolla.com.

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

  1. 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

  1. Añada un método a la clase del ResendConfirmationEmailComponent que se solicita al hacer clic en ResendEmail, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo.
  2. 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.
  3. Vincule los elementos de la escena a las propiedades del ResendConfirmationEmailComponent como se muestra en la imagen:

  1. 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

Vinculación de la devolución de llamada con el panel Inspector:

Vinculación de la devolución de llamada con código:

Copy
Full screen
Small screen
  • 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.

Nota

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.

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


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

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(Button)
    resendEmailButton: Button;

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

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

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

  1. 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

  1. Añada un método a la clase del LoginComponent que se solicita al hacer clic en LoginButton, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo.
  2. 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.
  3. Vincule los elementos de la escena a las propiedades del LoginComponent como se muestra en la imagen:

  1. 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

Vinculación de la devolución de llamada con el panel Inspector:

Vinculación de la devolución de llamada con código:

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

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.

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


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

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(EditBox)
    passwordEditBox: EditBox;

    @property(Toggle)
    remeberMeToggle: Toggle;

    @property(Button)
    loginButton: Button;

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

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

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

  1. 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

  1. Añada un método a la clase del ResetPasswordComponent que se solicita al hacer clic en ResetPassword, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo.
  2. 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.
  3. Vincule los elementos de la escena a las propiedades del ResetPasswordComponent como se muestra en la imagen:

  1. 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

Vinculación de la devolución de llamada con el panel Inspector:

Vinculación de la devolución de llamada con código:

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

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.

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


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

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(Button)
    resetPasswordButton: Button;

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

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

Inicio de sesión mediante red social

Nota
El SDK de Cocos Creator solo permite el inicio de sesión mediante red social en las versiones de Android e iOS.

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

  1. 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.
  2. Añada un método a la clase SocialLoginComponent, el cual será llamado al hacer clic en SocialLogin, y agregue la lógica para gestionar el evento del clic, como se muestra en el ejemplo del script.

  1. 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.
  2. Vincule el botón SocialLogin a la propiedad socialLoginButton del SocialLoginComponent, como se muestra en la imagen:

  1. 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

Vinculación de la devolución de llamada con el panel Inspector:

Vinculación de la devolución de llamada con código:

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

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.

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


namespace authorization {

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

        @property(Button)
        socialLoginButton: Button;


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


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

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:

  1. Configure artículos virtuales y grupos de artículos virtuales.
  2. Configure paquetes de monedas virtuales.
  3. Configure lotes.

Este tutorial describe la implementación de la siguiente lógica:

Nota

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

  1. Cree un prefab. Para ello, seleccione Create > Node Prefab en el menú contextual de la carpeta.
  2. Abra el prefab creado.
  3. 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.

  1. 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

  1. Cree un StoreItemComponent y añada las siguientes propiedades:
    • iconSprite
    • itemNameLabel
    • itemDescriptionLabel
    • priceLabel

  1. Añada el init método y la lógica de inicialización a la clase de StoreItemComponent como se muestra en el script de ejemplo.
  2. Adjunte el componente StoreItemComponent al nodo raíz del prefab.
  3. Vincule los elementos prefab a las propiedades de StoreItemComponent como se muestra en la imagen:

Ejemplo de script de widget (StoreItemComponent):

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


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

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    private _data: StoreItem;

    init(data: StoreItem) {

        this._data = data;

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

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

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

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:

  1. Cambie el valor del parámetro ContentSize en el nodo ScrollView y en el nodo view interno.
  2. Vincule el componente Layout al nodo content 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

  1. Cree un ItemsCatalogComponent y añada las siguientes propiedades:
    • itemsScrollView
    • storeItemPrefab

  1. Añada la start función de ciclo de vida y la lógica de inicialización a la clase de ItemsCatalogComponent como se muestra en el script de ejemplo.
  2. 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.
  3. Vincule los elementos prefab a las propiedades de ItemsCatalogComponent como se muestra en la imagen:

Ejemplo de script de clase (ItemsCatalogComponent):

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


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

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    storeItemPrefab: Prefab;

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

Ejemplo de resultado del trabajo del script:

Implementar la visualización de lotes

Cree widget de lotes

  1. Cree un prefab. Para ello, seleccione Create > Node Prefab en el menú contextual de la carpeta.
  2. Abra el prefab creado.
  3. 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.

  1. 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

  1. Cree un BundleItemComponent y añada las siguientes propiedades:
    • iconSprite
    • bundleNameLabel
    • bundleDescriptionLabel
    • priceLabel
    • contentDescriptionlabel

  1. Añada el init método y la lógica de inicialización a la clase de BundleItemComponent como se muestra en el script de ejemplo.
  2. Adjunte el componente BundleItemComponent al nodo raíz del prefab.
  3. Vincule los elementos prefab a las propiedades de BundleItemComponent como se muestra en la imagen:

Ejemplo de script de widget (BundleItemComponent):

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


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

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    bundleNameLabel: Label;

    @property(Label)
    bundleDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    @property(Label)
    contentDescriptionLabel: Label;

    init(data: StoreBundle) {

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

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

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

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

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:

  1. Cambie el valor del parámetro ContentSize en el nodo ScrollView y en el nodo view interno.
  2. Vincule el componente Layout al nodo content y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:
    • Type == vertical
    • ResizeMode == Container

Cree componente de script de catálogo de lotes

  1. Cree un BundlesCatalogComponent y añada las siguientes propiedades:
    • itemsScrollView
    • bundleItemPrefab

  1. Añada la start función de ciclo de vida y la lógica de inicialización a la clase de BundlesCatalogComponent como se muestra en el script de ejemplo.
  2. 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.
  3. Vincule los elementos prefab a las propiedades de BundlesCatalogComponent como se muestra en la imagen:

Ejemplo de script de clase (BundlesCatalogComponent):

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


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

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    bundleItemPrefab: Prefab;

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

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

  1. Cree un prefab. Para ello, seleccione Create > Node Prefab en el menú contextual de la carpeta.
  2. Abra el prefab creado.
  3. 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.

  1. 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

  1. Cree un CurrencyPackageItemComponent y añada las siguientes propiedades:
    • iconSprite
    • currencyNameLabel
    • currencyDescriptionLabel
    • priceLabel

  1. Añada el init método y la lógica de inicialización a la clase de CurrencyPackageItemComponent como se muestra en el script de ejemplo.
  2. Adjunte el componente CurrencyPackageItemComponent al nodo raíz del prefab.
  3. Vincule los elementos prefab a las propiedades de CurrencyPackageItemComponent como se muestra en la imagen:

Ejemplo de script de widget (CurrencyPackageItemComponent):

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


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

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    currencyNameLabel: Label;

    @property(Label)
    currencyDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    init(data: VirtualCurrencyPackage) {

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

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

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

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:

  1. Cambie el valor del parámetro ContentSize en el nodo ScrollView y en el nodo view interno.
  2. Vincule el componente Layout al nodo content 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

  1. Cree un CurrencyPackagesCatalogComponent y añada las siguientes propiedades:
    • itemsScrollView
    • currencyPackageItemPrefab

  1. Añada la start función de ciclo de vida y la lógica de inicialización a la clase de CurrencyPackagesCatalogComponent como se muestra en el script de ejemplo.
  2. 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.
  3. Vincule los elementos prefab a las propiedades de CurrencyPackagesCatalogComponent como se muestra en la imagen:

Ejemplo de script de clase (CurrencyPackagesCatalogComponent):

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


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

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    currencyPackageItemPrefab: Prefab;

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

    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:

    Aviso

    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.
    Nota
    En el ejemplo, la clase modificada pasa a ser RC_StoreItemComponent.
    Ejemplo de estructura del widget:

    Script completo de widget de artículos

    1. Para vincular una función de devolución de llamada al botón de compra mediante código, añada la propiedad buyButton al RC_StoreItemComponent.
    2. Añada un método a la clase RC_StoreItemComponent que se solicita al hacer clic en BuyButton, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo.
    3. 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

    Vinculación de la devolución de llamada con el panel Inspector:

    Vinculación de la devolución de llamada con código:

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

    Ejemplo de script de widget (RC_StoreItemComponent):

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


export namespace sellForRealMoneyItem {


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


        @property(Sprite)
        iconSprite: Sprite;


        @property(Label)
        itemNameLabel: Label;


        @property(Label)
        itemDescriptionLabel: Label;


        @property(Label)
        priceLabel: Label;


        @property(Button)
        buyButton: Button;


        private _data: StoreItem;


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


        init(data: StoreItem) {

            this._data = data;


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

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


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


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

    Complete un componente de script de catálogo de artículos

    Nota
    En el script de ejemplo, la clase modificada pasa a ser 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):

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




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

    @property(ScrollView)
    itemsScrollView: ScrollView;


    @property(Prefab)
    storeItemPrefab: Prefab;


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

    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:

    Aviso

    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.
    Nota
    En el ejemplo, la clase modificada pasa a ser VC_StoreItemComponent.
    Ejemplo de estructura del widget:

    Script completo de widget de artículos

    1. Para vincular una función de devolución de llamada al botón de compra mediante código, añada la propiedad buyButton al VC_StoreItemComponent.
    2. Añada un método a la clase VC_StoreItemComponent que se solicita al hacer clic en BuyButton, y añada la lógica para gestionar el evento de clic, como se muestra en el script de ejemplo.
    3. 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

    Vinculación de la devolución de llamada con el panel Inspector:

    Vinculación de la devolución de llamada con código:

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

    Ejemplo de script de widget (VC_StoreItemComponent):

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


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

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    @property(Button)
    buyButton: Button;

    private _data: StoreItem;

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

    init(data: StoreItem) {

        this._data = data;

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

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

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

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

    Complete un componente de script de catálogo de artículos

    Nota
    En el script de ejemplo, la clase modificada pasa a ser 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):

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


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

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    storeItemPrefab: Prefab;

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

    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

    1. Cree un prefab. Para ello, seleccione Create > Node Prefab en el menú contextual de la carpeta.
    2. Abra el prefab creado.
    3. 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.

    1. 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

    1. Cree un CurrencyBalanceItemComponent y añada las siguientes propiedades:
      • iconSprite
      • currencyNameLabel
      • quantityLabel

    1. Añada el init método y la lógica de inicialización a la clase de CurrencyBalanceItemComponent como se muestra en el script de ejemplo.
    2. Adjunte el componente CurrencyBalanceItemComponent al nodo raíz del prefab.
    3. Vincule los elementos prefab a las propiedades de CurrencyBalanceItemComponent como se muestra en la imagen:

    Ejemplo de script de widget (CurrencyBalanceItemComponent):

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


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

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    currencyNameLabel: Label;

    @property(Label)
    quantityLabel: Label;

    init(data: VirtualCurrencyBalance) {

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

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

    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:

    1. Cambie el valor del parámetro ContentSize en el nodo ScrollView y en el nodo view interno.
    2. Vincule el componente Layout al nodo content y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:
      • Type == vertical
      • ResizeMode == Container

    Cree componente de script de saldo de moneda virtual

    1. Cree un CurrencyBalanceComponent y añada las siguientes propiedades:
      • itemsScrollView
      • currencyBalanceItemPrefab

    1. Añada la start función de ciclo de vida y la lógica de inicialización a la clase de CurrencyBalanceComponent como se muestra en el script de ejemplo.
    2. Añada el CurrencyBalanceComponent 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.
    3. Vincule los elementos prefab a las propiedades de CurrencyBalanceItemComponent como se muestra en la imagen:
    Nota
    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.
    Ejemplo de script de clase (CurrencyBalanceComponent):
    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { XsollaInventory } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
import { CurrencyBalanceItemComponent } from './CurrencyBalanceItemComponent';
const { ccclass, property } = _decorator;


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

    @property(ScrollView)
    itemsList: ScrollView;

    @property(Prefab)
    currencyBalanceItemPrefab: Prefab;

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

    }
}

    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

    1. Cree un prefab. Para ello, seleccione Create > Node Prefab en el menú contextual de la carpeta.
    2. Abra el prefab creado.
    3. 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.

    1. 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

    1. Cree un InventoryItemComponent y añada las siguientes propiedades:
      • iconSprite
      • itemNameLabel
      • itemDescriptionLabel
      • quantityLabel

    1. Añada el init método y la lógica de inicialización a la clase de InventoryItemComponent como se muestra en el script de ejemplo.
    2. Adjunte el componente InventoryItemComponent al nodo raíz del prefab.
    3. Vincule los elementos prefab a las propiedades de InventoryItemComponent como se muestra en la imagen:

    Ejemplo de script de widget (InventoryItemComponent):

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

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

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    quantityLabel: Label;

    init(data: InventoryItem) {

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

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

    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:

    1. Cambie el valor del parámetro ContentSize en el nodo ScrollView y en el nodo view interno.
    2. Vincule el componente Layout al nodo content y configúrelo. En el ejemplo, se seleccionan los siguientes ajustes:
      • Type == vertical
      • ResizeMode == Container

    Cree componente de script de página de inventario

    1. Cree un InventoryItemsComponent y añada las siguientes propiedades:
      • itemsScrollView
      • inventoryItemPrefab

    1. Añada la start función de ciclo de vida y la lógica de inicialización al InventoryItemsComponent como se muestra en el script de ejemplo.
    2. 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.
    3. Vincule los elementos prefab a las propiedades de InventoryItemsComponent como se muestra en la imagen:
    Nota
    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.
    Ejemplo de script de clase (InventoryItemsComponent):
    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { XsollaInventory } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
import { InventoryItemComponent } from './InventoryItemComponent';
const { ccclass, property } = _decorator;


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

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    inventoryItemPrefab: Prefab;

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

    }
}

    Ejemplo de resultado del trabajo del script:

    ¿Te ha resultado útil este artículo?
    ¡Gracias!
    ¿Hay algo en lo que podamos mejorar? Mensaje
    Lo sentimos
    Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
    ¡Gracias por tu mensaje!
    Nos ayudará a mejorar tu experiencia.
    Última actualización: 22 de Enero de 2024

    ¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

    Informar de un problema
    Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
    Déjanos tu correo electrónico para que te podamos responder
    ¡Gracias por tu mensaje!