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

• регистрацию пользователя;
• запрос пользователем повторной отправки письма с подтверждением регистрации;
• авторизацию пользователя;
• сброс пароля пользователя.

Исходный код

Исходный код этих примеров приведен на GitHub.

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

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

1. В Content Browser создайте директорию UI. В контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя;
   • поле для ввода email-адреса пользователя;
   • поле для ввода пароля;
   • кнопка регистрации.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. Реализуйте отображение виджета при запуске уровня. Для этого добавьте ноды, как показано на рисунке ниже. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку повторной отправки письма.
2. В панели Details нажмите значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK RegisterUser на объекте XsollaLoginSubsystem и добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова:
   • OnRegistered — вызывается в случае успешной регистрации пользователя;
   • OnError — вызывается в случае ошибки.

6. Для отладки работы виджета запустите уровень.

Пример реализации обработки события:

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

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

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

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

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

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя или email-адреса;
   • кнопка повторной отправки письма.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку повторной отправки письма.
2. В панели Details нажмите значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK ResendAccountConfirmationEmail на объекте XsollaLoginSubsystem, добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова OnEmailResent и OnError.
6. Для отладки работы виджета запустите уровень.

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

Пример реализации обработки события:

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

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

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя;
   • поле для ввода пароля;
   • флажок для запоминания учетной записи;
   • кнопка авторизации.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку авторизации.
2. В панели Details нажмите значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK AuthenticateUser на объекте XsollaLoginSubsystem, добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова OnAuthenticated и OnError.

6. Для отладки работы виджета запустите уровень.

Пример реализации обработки события:

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

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

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • поле для ввода имени пользователя или email-адреса;
   • кнопка сброса пароля.

На рисунке ниже приведен пример структуры страницы.

3. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
4. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку сброса пароля.
2. В панели Details нажмите значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. К ноде OnClicked привяжите вызов метода SDK ResetUserPassword на объекте XsollaLoginSubsystem, добавьте передачу введенных пользователем данных.
5. Добавьте функции обратного вызова OnEmailSent и OnError.
6. Для отладки работы виджета запустите уровень.

Пример реализации обработки события:

При успешном запросе сброса пароля пользователю отправляется письмо со ссылкой для изменения пароля. В Личном кабинете в настройках варианта авторизации (Безопасность > OAuth 2.0 аутентификация > URI переадресации OAuth 2.0) вы можете настроить URL-адрес, на который пользователь будет перенаправлен после успешной авторизации (аутентификации, подтверждения электронной почты или сброса пароля).

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

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

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

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

Исходный код

Исходный код этих примеров приведен на GitHub.

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

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

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

1. В Content Browser создайте директорию UI.
2. В контекстном меню выберите пункт User Interface > Widget Blueprint.
3. В блупринте виджета добавьте кнопку для авторизации через социальную сеть.

На рисунке ниже приведен пример структуры страницы.

4. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
5. Реализуйте отображение виджета при запуске уровня. Для этого добавьте ноды, как показано на рисунке ниже. В ноде CreateWidget укажите созданный виджет.

Добавление обработки события

1. В панели Hierarchy выберите кнопку авторизации.
2. В панели Details нажмите значок + рядом с событием On Clicked.

3. Перейдите к представлению Graph.
4. Реализуйте открытие страницы авторизации во встроенном браузере:

1. 1. К ноде OnClicked добавьте вызов метода SDK AuthenticateViaSocialNetwork на объекте XsollaLoginSubsystem и передачу данных, введенных пользователем. В параметр ProviderName передайте значение Twitter.
   2. Добавьте функции обратного вызова:
      • OnSocialAuthSuccess — вызывается после успешной аутентификации.
      • OnSocialAuthCancel — вызывается, если аутентификация была отменена.
      • OnSocialAuthError — вызывается в случае ошибки.

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

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

Исходный код

Исходный код этих примеров приведен на GitHub.

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

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

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

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

1. В Content Browser создайте директорию UI.
2. В контекстном меню выберите пункт User Interface > Widget Blueprint.
3. В блупринте виджета добавьте следующие элементы интерфейса:

1. • кнопки для переключения между отображением предметов и пакетов виртуальных валют;
   • область отображения групп предметов;
   • область отображения списка предметов;
   • область отображения списка пакетов виртуальной валюты.

На рисунке ниже приведен пример структуры страницы.

4. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
5. Реализуйте отображение виджета при запуске уровня. Для этого добавьте ноды, как показано на рисунке ниже. В ноде CreateWidget укажите созданный виджет.

Добавление обработки событий виджета для страницы каталога

1. В панели Hierarchy выберите кнопку переключения на список предметов.
2. В панели Details нажмите значок + рядом с событием On Clicked.

3. В панели Hierarchy выберите кнопку переключения на список пакетов виртуальных валют.
4. В панели Details нажмите значок + рядом с событием On Clicked.

5. Перейдите к представлению Graph.
6. Реализуйте логику переключения между списками. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

1. В Content Browser в контекстном меню выберите пункт Blueprint Class.
2. В разделе All classes выберите Object и нажмите Select.
3. Укажите в качестве названия класса BP_ItemGroupData.
4. Откройте блупринт созданного класса.
5. В панели My Blueprint нажмите Add New и выберите пункт Variable.
6. В панели Details:

1. 1. В поле Variable Name укажите GroupData.
   2. В поле Variable Type выберите XsollaItemGroup.
   3. Установите флажки Instance Editable и Expose on Spawn.

Создание виджета для группы предметов

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте элемент для названия группы предметов.

На рисунке ниже приведен пример структуры виджета.

3. Перейдите к представлению Graph.
4. Нажмите Class settings.
5. В панели Details перейдите в раздел Interfaces > Implemented interfaces.
6. Нажмите Add и выберите UserObjectListEntry. Это стандартный интерфейс UE, позволяющий UI-примитиву реализовать свойственное для элемента списка поведение.
7. Реализуйте логику для создания группы предметов:

1. 1. Добавьте ноду EventOnListItemObjectSet для создания элемента списка и инициализации виджета.
   2. В элемент с названием группы передайте значение из объекта, хранящего данные о группе. Для этого добавьте ноды, как показано на рисунке ниже.

1. 3. Реализуйте логику отображения всех предметов в категории All. Для этого отредактируйте блупринт, как показано на рисунке ниже.

8. Реализуйте логику для выделения в интерфейсе группы предметов, выбранной в списке. Для этого добавьте ноды, как показано на рисунке ниже.

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

1. Откройте блупринт виджета страницы каталога.
2. В область отображения групп предметов добавьте элемент List View.
3. В панели Details в поле Entry Widget Class выберите созданный ранее класс для группы предметов.
4. Реализуйте логику наполнения списка групп предметов:

1. 1. Перейдите к представлению Graph.
   2. К ноде EventConstruct привяжите вызов метода SDK GetItemGroups на объекте XsollaLoginSubsystem.
   3. Реализуйте логику для наполнения списка групп предметов. Действие должно выполняться при обработке успешного обновления групп виртуальных предметов. Для этого добавьте ноды, как показано на рисунке ниже.

5. Реализуйте логику отображения всех предметов в категории All. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

1. В Content Browser в контекстном меню выберите пункт Blueprint Class.
2. В разделе All classes выберите Object и нажмите Select.
3. Укажите в качестве названия класса BP_CatalogItemData.
4. Откройте блупринт созданного класса.
5. В панели My Blueprint нажмите Add New и выберите пункт Variable.
6. В панели Details:

1. 1. В поле Variable Name укажите CatalogItem.
   2. В поле Variable Type выберите StoreItem.
   3. Установите флажки Instance Editable и Expose on Spawn.

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

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • название предмета;
   • цена предмета.

На рисунке ниже приведен пример структуры виджета.

3. Перейдите к представлению Graph.
4. Нажмите Class settings.
5. В панели Details перейдите в раздел Interfaces > Implemented interfaces.
6. Нажмите Add и выберите UserObjectListEntry. Это стандартный интерфейс UE, позволяющий UI-примитиву реализовать свойственное для элемента списка поведение.
7. Реализуйте логику для создания группы предметов:

1. 1. Добавьте ноду EventOnListItemObjectSet для создания элемента списка и инициализации виджета.
   2. В элементы с названием и ценой предмета передайте значения из объекта, хранящего данные о предмете. Для этого добавьте ноды, как показано на рисунке ниже.

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

1. Откройте блупринт виджета страницы каталога.
2. В область отображения списка предметов добавьте элемент List View.
3. В панели Details в поле Entry Widget Class выберите созданный ранее класс для предмета.
4. Реализуйте логику наполнения групп предметов:

1. 1. Перейдите к представлению Graph.
   2. К ноде EventConstruct привяжите вызов метода SDK GetVirtualItems на объекте XsollaLoginSubsystem.
   3. Реализуйте логику для наполнения списка групп предметов. Действие должно выполняться при обработке успешного обновления групп виртуальных предметов. Для этого добавьте ноды, как показано на рисунке ниже.

5. Реализуйте логику проверки принадлежности элемента к определенной группе. Для этого добавьте ноды, как показано на рисунке ниже.

6. Реализуйте логику наполнения списка предметов. Для этого добавьте ноды, как показано на рисунке ниже.

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

1. Откройте блупринт виджета страницы каталога.
2. В панели Hierarchy выберите список групп предметов.
3. В панели Details нажмите значок + рядом с событием On Item Clicked.

4. Перейдите к представлению Graph.
5. Реализуйте логику фильтрации предметов по группам. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

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

1. Откройте блупринт виджета страницы каталога.
2. Перейдите к представлению Graph.
3. Доработайте логику наполнения списка бандлов. Добавьте вызов метода SDK GetBundles последовательно с вызовом метода GetVirtualItems, как показано на рисунке ниже.

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

1. Откройте блупринт виджета для предмета.
2. Рядом с названием предмета добавьте кнопку просмотра содержимого бандла.

На рисунке ниже приведен пример структуры виджета.

3. Перейдите к представлению Graph.
4. Доработайте логику создания предмета, добавив условие для отображения кнопки просмотра содержимого бандла. Пример показан на рисунке ниже.

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

1. В блупринте виджета для предмета перейдите к представлению Designer.
2. В панели Hierarchy выберите кнопку просмотра содержимого бандла.
3. В панели Details нажмите значок + рядом с событием On Clicked.

4. Перейдите к представлению Graph.
5. Реализуйте логику отображения содержимого бандла (список предметов бандла и количество каждого из них). Для этого добавьте ноды, как показано на рисунке ниже.

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

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

1. В Content Browser в контекстном меню выберите пункт Blueprint Class.
2. В разделе All classes выберите Object и нажмите Select.
3. Укажите в качестве названия класса BP_VcPackItemData.
4. Откройте блупринт созданного класса.
5. В панели My Blueprint нажмите Add New и выберите пункт Variable.
6. В панели Details:

1. 1. В поле Variable Name укажите PackItem.
   2. В поле Variable Type выберите VirtualCurrencyPackage.
   3. Установите флажки Instance Editable и Expose on Spawn.

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

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • название пакета виртуальной валюты;
   • цена пакета виртуальной валюты.

На рисунке ниже приведен пример структуры виджета.

3. Перейдите к представлению Graph.
4. Нажмите Class settings.
5. В панели Details перейдите в раздел Interfaces > Implemented interfaces.
6. Нажмите Add и выберите UserObjectListEntry. Это стандартный интерфейс UE, позволяющий UI-примитиву реализовать свойственное для элемента списка поведение.
7. Реализуйте логику для создания группы предметов:

1. 1. Добавьте ноду EventOnListItemObjectSet для создания элемента списка и инициализации виджета.
   2. В элементы с названием и ценой пакета передайте значения из объекта, хранящего данные о пакете. Для этого добавьте ноды, как показано на рисунке ниже.

Добавление списка пакетов виртуальной валюты на страницу каталога

1. Откройте блупринт виджета страницы каталога.
2. В область отображения списка пакетов виртуальной валюты добавьте элемент List View.
3. В панели Details в поле Entry Widget Class выберите созданный ранее класс для пакета виртуальной валюты.
4. Реализуйте логику наполнения списка пакетов:

1. 1. Перейдите к представлению Graph.
   2. К ноде EventConstruct привяжите вызов метода SDK GetVirtualCurrencyPackage на объекте XsollaStoreSubsystem.
   3. Реализуйте логику для наполнения списка пакетов. Действие должно выполняться при обработке успешного обновления пакетов виртуальной валюты. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

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

Исходный код

Исходный код этих примеров приведен на GitHub.

Доработка виджета страницы каталога

1. Откройте виджет страницы каталога.
2. Перейдите к представлению Graph.
3. Для открытия страницы оплаты в браузере:
   1. Реализуйте получение платежного токена:
      1. Добавьте ноду InitiatePurchase и привяжите к ней вызов метода SDK FetchPaymentToken на объекте XsollaStoreSubsystem.
      2. Передайте в метод FetchPaymentToken артикул покупаемого предмета и токен авторизации пользователя.

1. 2. Вызовите метод SDK LaunchPaymentConsole на объекте XsollaStoreSubsystem и передайте в него платежный токен.

Пример реализации открытия платежной страницы и получения статуса платежа:

Доработка класса для предмета

1. Откройте блупринт BP_CatalogItemData.
2. В панели My Blueprint нажмите Add New и выберите пункт Variable.
3. В панели Details:

1. 1. В поле Variable Name укажите CatalogWidget.
   2. В поле Variable Type выберите W_StoreCatalog.
   3. Установите флажки Instance Editable и Expose on Spawn.

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

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

1. Откройте блупринт виджета страницы каталога.
2. Перейдите к представлению Graph.
3. Отредактируйте логику наполнения списка предметов, как показано на рисунке ниже.

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

1. Откройте блупринт виджета для предмета.
2. Добавьте кнопку для покупки предмета.

На рисунке ниже приведен пример структуры виджета.

3. В панели Hierarchy выберите кнопку для покупки предмета.
4. В панели Details нажмите значок + рядом с событием On Clicked.

5. Перейдите к представлению Graph.
6. Реализуйте логику нажатия кнопки для покупки предмета. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

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

Примечание

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

Исходный код

Исходный код этих примеров приведен на GitHub.

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

Для реализации покупки товаров за виртуальную валюту:

1. Добавьте в виджет для страницы каталога логику покупки предмета.
2. Добавьте в класс для предмета механизм, позволяющий инициировать логику покупки предмета.
3. Доработайте добавление списка предметов на страницу каталога.
4. В виджет для предмета добавьте кнопку для покупки.
5. Добавьте в виджет для предмета логику покупки за виртуальную валюту:
   1. Откройте блупринт виджета для предмета.
   2. Перейдите к представлению Graph.
   3. Добавьте ноды, как показано на рисунке ниже.

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

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

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

Исходный код

Исходный код этих примеров приведен на GitHub.

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

1. В Content Browser создайте директорию UI.
2. В контекстном меню выберите пункт User Interface > Widget Blueprint.
3. В блупринте виджета добавьте область отображения списка предметов.

На рисунке ниже приведен пример структуры страницы инвентаря.

4. Откройте блупринт уровня:
   1. В Content Browser выберите уровень.
   2. В главном меню выберите пункт Blueprints > Open Level Blueprint.
5. Реализуйте отображение виджета при запуске уровня. Для этого добавьте ноды, как показано на рисунке ниже. В ноде CreateWidget укажите созданный виджет.

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

1. В Content Browser в контекстном меню выберите пункт Blueprint Class.
2. В разделе All classes выберите Object и нажмите Select.
3. Укажите в качестве названия класса BP_UserInventoryItemData.
4. Откройте блупринт созданного класса.
5. В панели My Blueprint нажмите Add New и выберите пункт Variable.
6. В панели Details:

1. 1. В поле Variable Name укажите UserInventoryItem.
   2. В поле Variable Type выберите InventoryItem.
   3. Установите флажки Instance Editable и Expose on Spawn.

7. В панели My Blueprint нажмите Add New и выберите пункт Variable.
8. В панели Details:
   1. В поле Variable Name укажите ExpiresIn.
   2. В поле Variable Type выберите Integer64.
   3. Установите флажки Instance Editable и Expose on Spawn.

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

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • название предмета;
   • свойство предмета:
     • для предметов с ограниченным сроком действия — статус предмета (действующий или истекший);
     • для расходуемых предметов — количество предметов;
     • для нерасходуемых предметов — свойство не отображается.

На рисунке ниже приведен пример структуры виджета.

3. Перейдите к представлению Graph.
4. Нажмите Class settings.
5. В панели Details перейдите в раздел Interfaces > Implemented interfaces.
6. Нажмите Add и выберите UserObjectListEntry. Это стандартный интерфейс UE, позволяющий UI-примитиву реализовать свойственное для элемента списка поведение.
7. Реализуйте логику для создания предмета:

1. 1. Добавьте ноду OnListItemObjectSet для создания элемента списка и инициализации виджета.
   2. В элемент с названием предмета передайте значение из объекта, хранящего данные о предмете. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

1. Откройте блупринт виджета страницы для инвентаря.
2. В область отображения списка предметов добавьте элемент List View.
3. В панели Details в поле Entry Widget Class выберите созданный ранее класс для предмета.
4. Реализуйте логику наполнения списка предметов:

1. 1. Перейдите к представлению Graph.
   2. К ноде EventConstruct привяжите последовательный вызов методов SDK GetInventory и GetTimeLimitedItems на объекте XsollaInventorySubsystem, как показано на рисунке ниже.

1. 3. Реализуйте логику для наполнения списка предметов. Для этого добавьте ноды, как показано на рисунке ниже.

1. 4. Добавьте логику определения срока истечения предмета с ограниченным сроком действия. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

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

Исходный код

Исходный код этих примеров приведен на GitHub.

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

1. В Content Browser в контекстном меню выберите пункт Blueprint Class.
2. В разделе All classes выберите Object и нажмите Select.
3. Укажите в качестве названия класса BP_VcBalanceItemData.
4. Откройте блупринт созданного класса.
5. В панели My Blueprint нажмите Add New и выберите пункт Variable.
6. В панели Details:

1. 1. В поле Variable Name укажите VcBalanceItem.
   2. В поле VirtualCurrencyBalance выберите Variable Type.
   3. Установите флажки Instance Editable и Expose on Spawn.

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

1. В Content Browser перейдите в директорию UI и в контекстном меню выберите пункт User Interface > Widget Blueprint.
2. В блупринте виджета добавьте следующие элементы интерфейса:
   • название виртуальной валюты;
   • количество виртуальной валюты.

На рисунке ниже приведен пример структуры виджета.

3. Перейдите к представлению Graph.
4. Нажмите Class settings.
5. В панели Details перейдите в раздел Interfaces > Implemented interfaces.
6. Нажмите Add и выберите UserObjectListEntry. Это стандартный интерфейс UE, позволяющий UI-примитиву реализовать поведение, свойственное для элемента списка.
7. Реализуйте логику для добавления виртуальной валюты в список:

1. 1. Добавьте ноду EventOnListItemObjectSet для создания элемента списка и инициализации виджета.
   2. В элементы с названием и количеством виртуальной валюты передайте значения из объекта, который хранит данные о виртуальной валюте. Для этого добавьте ноды, как показано на рисунке ниже.

Доработка виджета для отображения инвентаря

1. Откройте блупринт виджета для отображения инвентаря.
2. В область отображения списка виртуальных валют добавьте элемент List View.
3. В панели Details в поле Entry Widget Class выберите созданный ранее класс для отображения баланса.
4. Реализуйте логику наполнения списка виртуальных валют:

1. 1. Перейдите к представлению Graph.
   2. К ноде EventConstruct привяжите вызов метода SDK GetVirtualCurrencyBalance на объекте XsollaInventorySubsystem.
   3. Реализуйте логику для наполнения списка виртуальных валют. Действие должно выполняться при обработке успешного обновления баланса виртуальной валюты. Для этого добавьте ноды, как показано на рисунке ниже.