SDK enterprise-уровня для Cocos Creator / Интеграция SDK на стороне приложения
  На главную

SDK enterprise-уровня для Cocos Creator

Интеграция SDK на стороне приложения

  1. Разработайте интерфейс для системы входа, внутриигрового магазина и других страниц вашего приложения.
  2. Настройте обработку событий в соответствии с логикой вашего приложения с помощью методов SDK.
Примечание
Вы можете создать собственное решение, следуя руководству Cocos Creator, или использовать демосцену как шаблон.
Чтобы начать работать с основными функциями SDK, следуйте пошаговым обучающим инструкциям:Скрипты, которые используются в обучающих инструкциях, приведены в каталоге <xsollaExtention>/assets/scripts/samples SDK.
Примечание
Скрипты в обучающих инструкциях используют методы SDK. Убедитесь, что вы корректно установили и инициализировали SDK.

Аутентификация пользователя по имени пользователя/email-адресу и паролю

Эта инструкция показывает, как с помощью методов SDK реализовать:

Для аутентификации пользователя может применяться имя пользователя или email-адрес. В приведенных ниже примерах применяется имя пользователя, а email-адрес используется для подтверждения регистрации пользователя и для сброса пароля.

Примечание
Если вы дополнительно используете виджет авторизации на сайте (например, в веб-магазине), убедитесь, что на сайте и в вашем приложении аутентификация пользователя реализована одинаково. По умолчанию виджет использует email-адрес пользователя. Для настройки аутентификации по имени пользователя обратитесь к персональному менеджеру проекта или напишите на csm@xsolla.com.

Реализация регистрации пользователя

В обучающей инструкции описана реализация следующей логики:

Создание интерфейса страницы

Создайте сцену для страницы регистрации и добавьте на нее следующие элементы:

  • поле для ввода имени пользователя;
  • поле для ввода email-адреса пользователя;
  • поле для ввода пароля пользователя;
  • кнопка регистрации пользователя.

Пример структуры страницы:

Создание компонента скрипта регистрации

  1. Создайте компонент RegistrationComponent и добавьте в него следующие свойства:
    • usernameEditBox;
    • emailEditBox;
    • passwordEditBox;
    • signUpButton — опциональное, используется при привязке функции обратного вызова к кнопке с помощью кода.

  1. Добавьте в класс RegistrationComponent метод, который будет вызываться при нажатии на кнопку SignUpButton, и добавьте логику для обработки нажатия, как показано в примере скрипта.
  2. Добавьте компонент RegistrationComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
  3. Свяжите элементы сцены со свойствами компонента RegistrationComponent, как показано на рисунке:

  1. Привяжите к кнопке регистрации вызов функции одним из следующих способов:
    • с помощью панели Inspector, как показано на рисунке ниже;
    • вставив приведенный ниже блок кода в скрипт страницы.

Привязка функции обратного вызова с помощью панели Inspector:

Привязка функции обратного вызова с помощью кода:

Copy
Full screen
Small screen
  • typescript
start() {
 this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
 }
Примечание

В примерах скриптов методы onComplete и onError вызывают стандартный метод console.log. При возникновении ошибки код и описание ошибки передаются в параметре error.

Вы можете добавить другие действия. Например, при успешной регистрации открывать страницу с повторным запросом письма о регистрации или страницу авторизации.

Пример скрипта класса (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);
        });
    }
}

Настройка письма о подтверждении регистрации

При успешной регистрации пользователю приложения отправляется письмо для подтверждения регистрации на указанный email-адрес. Вы можете кастомизировать письма для пользователей в Личном кабинете.

Если вы разрабатываете мобильное приложение, настройте внешние ссылки, чтобы возвращать пользователя в приложение после подтверждения регистрации.

Примечание
Вы можете отключить подтверждение регистрации с помощью электронной почты, если для вас это приемлемо с точки зрения безопасности. Для отключения обратитесь к персональному менеджеру проекта или напишите письмо на csm@xsolla.com.

Реализация запроса повторной отправки письма с подтверждением регистрации

В обучающей инструкции описана реализация следующей логики:

Создание интерфейса страницы

Создайте сцену для страницы запроса повторной отправки письма и добавьте на нее следующие элементы:

  • поле для ввода имени пользователя или email-адреса;
  • кнопку повторной отправки письма.

Пример структуры страницы:

Создание компонента скрипта для повторной отправки письма

  1. Создайте компонент ResendConfirmationEmailComponent и добавьте в него следующие свойства:
    • usernameTextBox;
    • resendEmailButton — опциональное, используется при привязке функции обратного вызова к кнопке с помощью кода.

  1. Добавьте в класс ResendConfirmationEmailComponent метод, который будет вызываться при нажатии на кнопку ResendEmail, и добавьте логику для обработки нажатия, как показано в примере скрипта.
  2. Добавьте компонент ResendConfirmationEmailComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
  3. Свяжите элементы сцены со свойствами компонента ResendConfirmationEmailComponent, как показано на рисунке:

  1. Привяжите к кнопке запроса повторной отправки письма с подтверждением регистрации вызов функции одним из следующих способов:
    • с помощью панели Inspector, как показано на рисунке ниже;
    • вставив приведенный ниже блок кода в скрипт для страницы запроса повторной отправки письма.

Привязка функции обратного вызова с помощью панели Inspector:

Привязка функции обратного вызова с помощью кода:

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

При успешном запросе пользователю отправляется письмо для подтверждения регистрации на указанный при регистрации email-адрес.

Примечание

В примерах скриптов методы onComplete и onError вызывают стандартный метод console.log. Вы можете добавить другие действия.

При возникновении ошибки код и описание ошибки передаются в параметре error.

Пример скрипта класса (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);
        });
    }
}

Реализация авторизации пользователя

В обучающей инструкции описана реализация следующей логики:

Создание интерфейса страницы

Создайте сцену для страницы регистрации и добавьте на нее следующие элементы:

  • поле для ввода имени пользователя;
  • поле для ввода email-адреса пользователя;
  • поле для ввода пароля пользователя;
  • кнопка регистрации пользователя.

Пример структуры страницы:

Создание компонента скрипта авторизации

  1. Создайте компонент LoginComponent и добавьте в него следующие свойства:
    • usernameEditBox;
    • passwordEditBox;
    • remeberMeToggle;
    • loginButton — опциональное, используется при привязке функции обратного вызова к кнопке с помощью кода.

  1. Добавьте в класс LoginComponent метод, который будет вызываться при нажатии на кнопку LoginButton, и добавьте логику для обработки нажатия, как показано в примере скрипта.
  2. Добавьте компонент LoginComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
  3. Свяжите элементы сцены со свойствами компонента LoginComponent, как показано на рисунке:

  1. Привяжите к кнопке авторизации вызов функции одним из следующих способов:
    • с помощью панели Inspector, как показано на рисунке ниже;
    • вставив приведенный ниже блок кода в скрипт страницы.

Привязка функции обратного вызова с помощью панели Inspector:

Привязка функции обратного вызова с помощью кода:

Copy
Full screen
Small screen
  • typescript
start() {
	 this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
  }
Примечание

В примерах скриптов методы onComplete и onError вызывают стандартный метод console.log. Вы можете добавить другие действия.

При возникновении ошибки код и описание ошибки передаются в параметре error.

Пример скрипта класса (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);
        });
    }
}

Реализация сброса пароля

В обучающей инструкции описана реализация следующей логики:

Создание интерфейса страницы

Создайте сцену для страницы сброса пароля и добавьте на нее следующие элементы:

  • поле для ввода имени пользователя или email-адреса;
  • кнопку сброса пароля.

Пример структуры страницы:

Создание компонента скрипта для сброса пароля

  1. Создайте компонент и добавьте в него следующие свойства:
    • usernameEditBox;
    • remeberMeToggle;
    • resetPasswordButton— опциональное, используется при привязке функции обратного вызова к кнопке с помощью кода.

  1. Добавьте в класс ResetPasswordComponent метод, который будет вызываться при нажатии на кнопку ResetPassword, и добавьте логику для обработки нажатия, как показано в примере скрипта.
  2. Добавьте компонент LoginComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
  3. Свяжите элементы сцены со свойствами компонента ResetPasswordComponent, как показано на рисунке:

  1. Привяжите к кнопке сброса пароля вызов функции одним из следующих способов:
    • с помощью панели Inspector, как показано на рисунке ниже;
    • вставив приведенный ниже блок кода в скрипт страницы.

Привязка функции обратного вызова с помощью панели Inspector:

Привязка функции обратного вызова с помощью кода:

Copy
Full screen
Small screen
  • typescript
start() {
        this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
    }
Примечание

В примерах скриптов методы onComplete и onError вызывают стандартный метод console.log. Вы можете добавить другие действия.

При возникновении ошибки код и описание ошибки передаются в параметре error.

Пример скрипта класса (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);
        });
    }
}

Аутентификация пользователя через социальные сети 

Примечание
SDK для Cocos Creator поддерживает аутентификацию через социальные сети только на сборках для Android и iOS.

Эта инструкция показывает, как использовать методы SDK, чтобы реализовать регистрацию и авторизацию пользователя в приложении с помощью аккаунта в социальной сети.

В отличие от аутентификации пользователя с помощью имени пользователя/email-адреса и пароля, реализация отдельной логики для регистрации пользователя не нужна. Если пользователь входит в систему впервые через аккаунт социальной сети, новая учетная запись создается автоматически.

Если в вашем приложении аккаунт социальной сети является альтернативным способом аутентификации, аккаунт автоматически привязывается к уже существующей учетной записи пользователя при выполнении следующих условий:

  • Зарегистрированный с помощью имени пользователя или email-адреса пользователь вошел в приложение через аккаунт социальной сети.
  • Социальная сеть возвращает email-адрес.
  • Email-адрес из социальной сети совпадает с email-адресом, указанными пользователем при регистрации в вашем приложении.

В обучающей инструкции описана реализация следующей логики:

Примеры приведены для аутентификации пользователя с помощью аккаунта в Facebook, настройка других социальных сетей выполняется аналогично.

Примеры приведены для базового знакомства с возможностями SDK. Обычно приложения требуют более сложных интерфейсов и логики.

Создание интерфейса страницы

Создайте сцену для страницы входа в приложение и добавьте на нее кнопку авторизации через социальную сеть.

Пример структуры страницы:

Создание компонента скрипта для аутентификации через социальные сети

  1. Создайте компонент SocialLoginComponent. Чтобы привязать к кнопке авторизации через социальную сеть функцию обратного вызова через код, добавьте в компонент свойство socialLoginButton.
  2. Добавьте в класс SocialLoginComponent метод, который будет вызываться при нажатии на кнопку SocialLogin, и добавьте логику для обработки нажатия, как показано в примере скрипта.

  1. Добавьте компонент SocialLoginComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager которая была добавлена при инициализации SDK.
  2. Свяжите кнопку SocialLogin со свойством socialLoginButton компонента SocialLoginComponent, как показано на рисунке:

  1. Привяжите к кнопке авторизации через социальную сеть вызов функции одним из следующих способов:
    • с помощью панели Inspector, как показано на рисунке ниже;
    • вставив приведенный ниже блок кода в скрипт страницы.

Привязка функции обратного вызова с помощью панели Inspector:

Привязка функции обратного вызова с помощью кода:

Copy
Full screen
Small screen
  • typescript
start() {
        this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
}
Примечание

В примерах скриптов методы onComplete, onCanceled и onError вызывают стандартный метод console.log. При возникновении ошибки код и описание ошибки передаются в параметре error.

Вы можете добавить другие действия. Например, при успешной регистрации открывать страницу с повторным запросом письма о регистрации или страницу авторизации.

Пример скрипта класса (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);
            });
        }
    }
}

Отображение каталога товаров

Эта обучающая инструкция показывает, как с помощью методов SDK реализовать во внутриигровом магазине отображение:

  • виртуальных предметов;
  • бандлов;
  • пакетов виртуальных валют.

Перед началом работы добавьте товары в Личном кабинете:

  1. Настройте виртуальные предметы и их группы.
  2. Настройте пакеты виртуальной валюты.
  3. Настройте бандлы.

В обучающей инструкции описана реализация следующей логики:

Примечание

В примере для каждого товара в каталоге отображаются:

  • название;
  • описание;
  • стоимость;
  • изображение.

Вы также можете отображать другие данные о товаре, которые хранятся во внутриигровом магазине.

Реализация отображения виртуальных предметов

Создание виджета предмета

  1. Создайте префаб. Для этого в контекстном меню папки выберите Create > Node Prefab.
  2. Откройте созданный префаб.
  3. Добавьте компонент UITransform в корень префаба, как показано на рисунке ниже, и установите желаемый размер содержимого.

  1. Добавьте в качестве дочерних объектов префаба следующие элементы интерфейса и настройте их внешний вид:
    • фоновое изображение виджета;
    • название предмета;
    • описание предмета;
    • стоимость предмета;
    • изображение предмета.

Пример структуры виджета:

Создание скрипта виджета предмета

  1. Создайте компонент StoreItemComponent и добавьте в него следующие свойства:
    • iconSprite;
    • itemNameLabel;
    • itemDescriptionLabel;
    • priceLabel.

  1. Добавьте в класс StoreItemComponent метод init и логику инициализации, как показано в примере скрипта.
  2. Свяжите компонент StoreItemComponent с корневой нодой префаба.
  3. Свяжите элементы префаба со свойствами компонента StoreItemComponent, как показано на рисунке:

Пример скрипта виджета (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}`);
            }
        });
    }
}

Создание интерфейса страницы

Создайте сцену для страницы каталога пакетов виртуальной валюты и добавьте к ней элемент ScrollView.

Пример структуры страницы:

Чтобы ScrollView соответствовал созданному префабу StoreItem, настройте его размеры. Для этого:

  1. Измените значение параметра ContentSize в ноде ScrollView и внутренней ноде view.
  2. Добавьте компонент Layout к ноде content и настройте его. В примере выбраны следующие настройки:
    • Type == vertical;
    • ResizeMode == Container.

Создайте скрипт компонента каталога предметов

  1. Создайте компонент ItemsCatalogComponent и добавьте в него следующие свойства:
    • itemsScrollView;
    • storeItemPrefab.

  1. Добавьте в класс ItemsCatalogComponent функцию жизненного цикла start и логику инициализации, как показано в примере скрипта.
  2. Добавьте компонент ItemsCatalogComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
  3. Свяжите элементы префаба со свойствами компонента ItemsCatalogComponent, как показано на рисунке:

Пример скрипта класса (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]);
            }
        });
    }
}

Пример результата работы скрипта:

Реализация отображения бандлов

Создание виджета бандла

  1. Создайте префаб. Для этого в контекстном меню папки выберите Create > Node Prefab.
  2. Откройте созданный префаб.
  3. Добавьте компонент UITransform в корень префаба, как показано на рисунке ниже, и установите желаемый размер содержимого.

  1. Добавьте в качестве дочерних объектов префаба следующие элементы интерфейса и настройте их внешний вид:
    • фоновое изображение виджета;
    • название бандла;
    • описание бандла;
    • стоимость бандла;
    • описание содержимого бандла (предметы и их количество);
    • изображение бандла.

Пример структуры виджета:

Создание скрипта виджета бандла

  1. Создайте компонент BundleItemComponent и добавьте в него следующие свойства:
    • iconSprite;
    • bundleNameLabel;
    • bundleDescriptionLabel;
    • priceLabel;
    • contentDescriptionlabel.

  1. Добавьте в класс BundleItemComponent метод init и логику инициализации, как показано в примере скрипта.
  2. Свяжите компонент BundleItemComponent с корневой нодой префаба.
  3. Свяжите элементы префаба со свойствами компонента BundleItemComponent, как показано на рисунке:

Пример скрипта виджета (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;
    }
}

Создание интерфейса страницы

Создайте сцену для страницы каталога бандлов и добавьте к ней элемент ScrollView.

Пример структуры страницы:

Чтобы ScrollView соответствовал созданному префабу BundleItem, настройте его размеры. Для этого:

  1. Измените значение параметра ContentSize в ноде ScrollView и внутренней ноде view.
  2. Добавьте компонент Layout к ноде content и настройте его. В примере выбраны следующие настройки:
    • Type == vertical;
    • ResizeMode == Container.

Создание скрипта компонента каталога бандлов

  1. Создайте компонент BundlesCatalogComponent и добавьте в него следующие свойства:
    • itemsScrollView;
    • bundleItemPrefab.

  1. Добавьте в класс BundlesCatalogComponent функцию жизненного цикла start и логику инициализации, как показано в примере скрипта.
  2. Добавьте компонент BundlesCatalogComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
  3. Свяжите элементы префаба со свойствами компонента BundlesCatalogComponent, как показано на рисунке:

Пример скрипта класса (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]);
            }
        });
    }
}

Пример результата работы скрипта:

Реализация отображения каталога пакетов виртуальной валюты

Создание виджета пакета виртуальной валюты

  1. Создайте префаб. Для этого в контекстном меню папки выберите Create > Node Prefab.
  2. Откройте созданный префаб.
  3. Добавьте компонент UITransform в корень префаба, как показано на рисунке ниже, и установите желаемый размер содержимого.

  1. Добавьте в качестве дочерних объектов префаба следующие элементы интерфейса и настройте их внешний вид:
    • фоновое изображение виджета;
    • название пакета;
    • описание пакета;
    • стоимость пакета;
    • изображение пакета.

Пример структуры виджета:

Создание скрипта виджета для пакета виртуальной валюты

  1. Создайте компонент CurrencyPackageItemComponent и добавьте в него следующие свойства:
    • iconSprite;
    • currencyNameLabel;
    • currencyDescriptionLabel;
    • priceLabel.

  1. Добавьте в класс CurrencyPackageItemComponent метод init и логику инициализации, как показано в примере скрипта.
  2. Свяжите компонент CurrencyPackageItemComponent с корневой нодой префаба.
  3. Свяжите элементы префаба со свойствами компонента CurrencyPackageItemComponent, как показано на рисунке:

Пример скрипта виджета (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}`);
            }
        });
    }
}

Создание интерфейса страницы

Создайте сцену для страницы каталога пакетов виртуальной валюты и добавьте к ней элемент ScrollView.

Пример структуры страницы:

Чтобы ScrollView соответствовал созданному префабу CurrencyPackageItem, настройте его размеры. Для этого:

  1. Измените значение параметра ContentSize в ноде ScrollView и внутренней ноде view.
  2. Добавьте компонент Layout к ноде content и настройте его. В примере выбраны следующие настройки:
    • Type == vertical;
    • ResizeMode == Container.

Создание скрипта компонента для каталога пакетов виртуальных валют

  1. Создайте компонент CurrencyPackagesCatalogComponent и добавьте в него следующие свойства:
    • itemsScrollView;
    • currencyPackageItemPrefab.

  1. Добавьте в класс CurrencyPackagesCatalogComponent функцию жизненного цикла start и логику инициализации, как показано в примере скрипта.
  2. Добавьте компонент CurrencyPackagesCatalogComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
  3. Свяжите элементы префаба со свойствами компонента CurrencyPackagesCatalogComponent, как показано на рисунке:

Пример скрипта класса (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]);
            }
        });
    }
}

    Пример результата работы скрипта:

    Продажа виртуальных предметов за реальную валюту

    Эта инструкция показывает, как использовать методы SDK, чтобы реализовать покупку товаров за реальную валюту на примере виртуальных предметов.

    Перед началом работы реализуйте отображение виртуальных предметов в каталоге. В примере описана реализация покупки виртуальных предметов. Настройка покупки других типов товаров выполняется аналогично.

    В обучающей инструкции описана реализация следующей логики:

    Внимание

    В примере скрипта для авторизации используются данные демонстрационной учетной записи (имя пользователя: xsolla, пароль: xsolla). Эта учетная запись доступна только для демопроекта.

    Пример скрипта не содержит реализацию пагинации — постраничного отображения предметов в каталоге. Для реализации пагинации используйте параметры offset и limit метода getCatalog. Максимальное количество предметов на странице — 50. Если в каталоге больше 50 предметов, пагинация обязательна.

    Доработка виджета предмета

    Добавьте в виджет предмета кнопку для покупки и настройте ее внешний вид.
    Примечание
    В примере доработанный класс переименован в RC_StoreItemComponent.
    Пример структуры виджета:

    Доработка скрипта виджета предмета

    1. Чтобы привязать к кнопке покупки функцию обратного вызова через код, добавьте в класс RC_StoreItemComponent свойство buyButton.
    2. Добавьте в компонент RC_StoreItemComponent метод, который будет вызываться при нажатии на кнопку BuyButton, и добавьте логику для обработки нажатия, как показано в примере скрипта.
    3. Привяжите к кнопке покупки вызов функции одним из следующих способов:

      • с помощью панели Inspector, как показано на рисунке ниже;
      • вставив приведенный ниже блок кода в скрипт страницы.

    Привязка функции обратного вызова с помощью панели Inspector:

    Привязка функции обратного вызова с помощью кода:

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

    Пример скрипта виджета (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);
            });
        }
    }
}

    Дорабтка скрипта компонента для каталога предметов

    Примечание
    В примере скрипта доработанный класс переименован в RC_ItemsCatalogComponent.

    Добавьте в метод start класса RC_ItemsCatalogComponent логику получения валидного авторизационного токена, как показано в примере скрипта.

    Пример скрипта класса (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]);
                    }
                });
        });
    }
}

    Пример результата работы скрипта:

    Продажа виртуальных предметов за виртуальную валюту

    Эта инструкция показывает, как использовать методы SDK, чтобы реализовать покупку товаров за виртуальную валюту на примере виртуальных предметов.

    Перед началом работы реализуйте отображение виртуальных предметов в каталоге. В примере описана реализация покупки виртуальных предметов. Настройка покупки других типов товаров выполняется аналогично.

    В обучающей инструкции описана реализация следующей логики:

    Внимание

    В примере скрипта для авторизации используются данные демонстрационной учетной записи (имя пользователя: xsolla, пароль: xsolla). Эта учетная запись доступна только для демопроекта.

    Пример скрипта не содержит реализацию пагинации — постраничного отображения предметов в каталоге. Для реализации пагинации используйте параметры offset и limit метода getCatalog. Максимальное количество предметов на странице — 50. Если в каталоге больше 50 предметов, пагинация обязательна.

    Доработка виджета предмета

    Добавьте в виджет предмета кнопку для покупки и настройте ее внешний вид.
    Примечание
    В примере доработанный класс переименован в VC_StoreItemComponent.
    Пример структуры виджета:

    Доработка скрипта виджета предмета

    1. Чтобы привязать к кнопке покупки функцию обратного вызова через код, добавьте в класс VC_StoreItemComponent свойство buyButton.
    2. Добавьте в компонент VC_StoreItemComponent метод, который будет вызываться при нажатии на кнопку BuyButton, и добавьте логику для обработки нажатия, как показано в примере скрипта.
    3. Привяжите к кнопке покупки вызов функции одним из следующих способов:

      • с помощью панели Inspector, как показано на рисунке ниже;
      • вставив приведенный ниже блок кода в скрипт страницы.

    Привязка функции обратного вызова с помощью панели Inspector:

    Привязка функции обратного вызова с помощью кода:

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

    Пример скрипта виджета (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);
        });
    }
}

    Дорабтка скрипта компонента для каталога предметов

    Примечание
    В примере скрипта доработанный класс переименован в VC_ItemsCatalogComponent.

    Добавьте в метод start класса VC_ItemsCatalogComponent логику получения валидного авторизационного токена, как показано в примере скрипта.

    Пример скрипта класса (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]);
                    }
                });
        });
    }
}

    Пример результата работы скрипта:

    Отображение баланса виртуальной валюты

    Эта обучающая инструкция показывает, как с помощью методов SDK реализовать в приложении отображение баланса виртуальной валюты.

    Создание виджета для отображения баланса

    1. Создайте префаб. Для этого в контекстном меню папки выберите Create > Node Prefab.
    2. Откройте созданный префаб.
    3. Добавьте компонент UITransform в корень префаба, как показано на рисунке ниже, и установите желаемый размер содержимого.

    1. Добавьте в качестве дочерних объектов префаба следующие элементы интерфейса и настройте их внешний вид:
      • фоновое изображение виджета;
      • название виртуальной валюты;
      • количество виртуальной валюты;
      • изображение виртуальной валюты.

    Пример структуры виджета:

    Создание скрипта виджета для отображения баланса

    1. Создайте компонент CurrencyBalanceItemComponent и добавьте в него следующие свойства:
      • iconSprite;
      • currencyNameLabel;
      • quantityLabel.

    1. Добавьте в класс CurrencyBalanceItemComponent метод init и логику инициализации, как показано в примере скрипта.
    2. Свяжите компонент CurrencyBalanceItemComponent с корневой нодой префаба.
    3. Свяжите элементы префаба со свойствами компонента CurrencyBalanceItemComponent, как показано на рисунке:

    Пример скрипта виджета (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}`);
            }
        });
    }
}

    Создание интерфейса страницы

    Создайте сцену для страницы для просмотра баланса виртуальной валюты и добавьте к ней элемент ScrollView.

    Пример структуры страницы:

    Чтобы ScrollView соответствовал созданному префабу CurrencyBalanceItem, настройте его размеры. Для этого:

    1. Измените значение параметра ContentSize в ноде ScrollView и внутренней ноде view.
    2. Добавьте компонент Layout к ноде content и настройте его. В примере выбраны следующие настройки:
      • Type == vertical;
      • ResizeMode == Container.

    Создание компонента скрипа для отображения баланса виртуальной валюты

    1. Создайте компонент CurrencyBalanceComponent и добавьте в него следующие свойства:
      • itemsScrollView;
      • currencyBalanceItemPrefab.

    1. Добавьте в класс CurrencyBalanceComponent функцию жизненного цикла start и логику инициализации, как показано в примере скрипта.
    2. Добавьте компонент CurrencyBalanceComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
    3. Свяжите элементы префаба со свойствами компонента CurrencyBalanceItemComponent, как показано на рисунке:
    Примечание
    В примере скрипта для авторизации используются данные демонстрационной учетной записи (имя пользователя: xsolla, пароль: xsolla). Эта учетная запись доступна только для демопроекта.
    Пример скрипта класса (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]);
                    }
                });
        });

    }
}

    Пример результата работы скрипта:

    Отображение предметов в инвентаре

    Эта обучающая инструкция показывает, как с помощью методов SDK реализовать отображение предметов в инвентаре пользователя.

    Создание виджета предмета

    1. Создайте префаб. Для этого в контекстном меню папки выберите Create > Node Prefab.
    2. Откройте созданный префаб.
    3. Добавьте компонент UITransform в корень префаба, как показано на рисунке ниже, и установите желаемый размер содержимого.

    1. Добавьте в качестве дочерних объектов префаба следующие элементы интерфейса и настройте их внешний вид:
      • фоновое изображение виджета;
      • название предмета;
      • описание предмета;
      • количество предметов;
      • изображение предмета.

    Пример структуры виджета:

    Создание скрипта виджета предмета

    1. Создайте компонент InventoryItemComponent и добавьте в него следующие свойства:
      • iconSprite;
      • itemNameLabel;
      • itemDescriptionLabel;
      • quantityLabel.

    1. Добавьте в класс InventoryItemComponent метод init и логику инициализации, как показано в примере скрипта.
    2. Свяжите компонент InventoryItemComponent с корневой нодой префаба.
    3. Свяжите элементы префаба со свойствами компонента InventoryItemComponent, как показано на рисунке:

    Пример скрипта виджета (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}`);
            }
        });
    }
}

    Создание интерфейса страницы

    Создайте сцену для страницы инвентаря и добавьте к ней элемент ScrollView.

    Пример структуры страницы:

    Чтобы ScrollView соответствовал созданному префабу InventoryItem, настройте его размеры. Для этого:

    1. Измените значение параметра ContentSize в ноде ScrollView и внутренней ноде view.
    2. Добавьте компонент Layout к ноде content и настройте его. В примере выбраны следующие настройки:
      • Type == vertical;
      • ResizeMode == Container.

    Создание компонента скрипта для страницы инвентаря

    1. Создайте компонент и добавьте в него следующие свойства:
      • itemsScrollView;
      • inventoryItemPrefab.

    1. Добавьте в класс InventoryItemsComponent функцию жизненного цикла start и логику инициализации, как показано в примере скрипта.
    2. Добавьте компонент InventoryItemsComponent к ноде на сцене. Вы можете добавить новую ноду или использовать существующую ноду с компонентом XsollaSettingsManager, которая была добавлена при инициализации SDK.
    3. Свяжите элементы префаба со свойствами компонента InventoryItemsComponent, как показано на рисунке:
    Примечание
    В примере скрипта для авторизации используются данные демонстрационной учетной записи (имя пользователя: xsolla, пароль: xsolla). Эта учетная запись доступна только для демопроекта.
    Пример скрипта класса (InventoryItemsComponen):
    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]);
                    }
                });
        });

    }
}

    Пример результата работы скрипта:

    Была ли статья полезна?
    Спасибо!
    Что может сделать страницу еще лучше? Сообщение
    Жаль, что так произошло
    Расскажите, почему статья не была полезна. Сообщение
    Спасибо за обратную связь!
    Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
    Последнее обновление: 22 января 2024

    Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

    Содержание
    Сообщите о проблеме
    Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
    Укажите email-адрес, чтобы мы могли связаться с вами
    Спасибо за обратную связь!