Эта инструкция показывает, как с помощью методов 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 UpdateItemGroups на объекте 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 UpdateVirtualItems на объекте XsollaLoginSubsystem.
   3. Реализуйте логику для наполнения списка групп предметов. Действие должно выполняться при обработке успешного обновления локального кеша групп виртуальных предметов. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

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

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

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

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

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

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

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

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 UpdateVirtualCurrencyPackage на объекте XsollaStoreSubsystem.
   3. Реализуйте логику для наполнения списка пакетов. Действие должно выполняться при обработке успешного обновления локального кеша пакетов виртуальной валюты. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

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

Исходный код

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

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

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

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

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

4. Реализуйте проверку статуса покупки после закрытия окна браузера:
   1. Для отслеживания закрытия браузера подпишитесь на событие BrowserClosed.
   2. Для проверки статуса покупки вызовите метод SDK CheckOrder и передайте в него токен авторизации и номер заказа.

Пример реализации проверки статуса покупки:

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

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.

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

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. 4. Добавьте логику определения срока истечения подписки. Для этого добавьте ноды, как показано на рисунке ниже.

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

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

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

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

Эта инструкция показывает, как с помощью методов 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 UpdateVirtualCurrencyBalance на объекте XsollaInventorySubsystem.
   3. Реализуйте логику для наполнения списка виртуальных валют. Действие должно выполняться при обработке успешного обновления локального кеша баланса виртуальной валюты. Для этого добавьте ноды, как показано на рисунке ниже.