Xsolla Launcher

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

• Облако. Игровой прогресс и предпочитаемые настройки игры/лаунчера могут храниться в облаке при помощи Xsolla Login;
• Авторизация и регистрация пользователей через единую систему аутентификации. Лаунчер может использовать системы аутентификации игры и/или универсальную систему аутентификации Xsolla Login;
• Игры и обновления могут доставляться конечному пользователю по peer2peer сети и/или используя любые CDN.
• Кроссплатформенность. Игры могут быть запущены на PC, Mac или Linux. Лаунчер также может использоваться для Smart TV, консолей, и других развлекательных систем;
• Игроки могут стримить игру для любой стриминговой платформы, включая Facebook, YouTube и Twitch.
• Игроки могут общаться друг с другом в соответствующем разделе лаунчера или внутри игры;
• Приглашать друзей, делиться успехом и репостить новости в социальные сети;
• Игры при помощи лаунчера могут делиться с игроками новостями и видео;
• Игроки могут включать push-уведомления;
• Игроки могут приобретать в лаунчере игры или внутриигровые предметы;
• Разработчики игр могут создавать и настраивать лидерборды для игр;
• Разработчики игр могут собирать данные пользователя (к примеру, версия OS, версия DirectX, технические характеристики девайса);
• Совместимость со Steam;
• Бинарные патчи для исправления данных игры.

Для подключения модуля, пожалуйста, отправьте запрос на integration@xsolla.com.

Руководство по интеграции

Кастомизация интерфейса

Кастомизация интерфейса позволяет изменять:

• Изображения (иконки, фоны);
• Шрифты;
• Цвета элементов интерфейса (фон, текст, и т.д.).

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

Замена изображений

Папка с изображениями: img. Изображения внутри папки сгруппированы по разделам приложения: Background, LoginWindow, и т.д.

Доступны следующие варианты замены дефолтных изображений на пользовательские:

• Заменить изображение по-умолчанию, сохранив исходное название;
• В нужную директорию в папке img поместить необходимое изображение и указать его в UIStyle.json. К примеру, необходимо использовать изображение "my_custom_bg_image.jpg" в качестве фона. Необходимо разместить изображение в img/LoginWindow, далее в файле UIStyle.json, строку (свойство в JSON-объекте "login_window") "bg_image": "img/LoginWindow/login_background.png". И заменить на "bg_image": "img/LoginWindow/my_custom_image.jpg".

Следует отметить, что изображения нужны в двух вариантах — 1х и 2х. Это необходимо для адаптации лаунчера под 4k мониторы. Изображения 2x должны содержать в своем названии “@2x” перед расширением. Пример: “login_background@2x.png”.

Замена шрифтов

Шрифты, используемые в приложении, лежат в папке fonts. Всего доступно 4 шрифта:"Regular", "Medium", "Bold" и "Black". Для замены необходимо файлы шрифтов разместить в папке fonts и внести необходимые правки в файле UIStyle.json. Найти следующие строки:

"fonts": {
        "regular":  "fonts/Lato-Regular.ttf",
        "medium":   "fonts/Lato-Medium.ttf",
        "bold":     "fonts/Lato-Bold.ttf",
        "black":    "fonts/Lato-Black.ttf"
}

В значениях свойств указать пути к новым шрифтам.

К примеру, для замены шрифта Lato-Black.ttf на "My_Own_Cool_Font.fft" файл шрифта помещается в папку fonts. Строки в UIStyle.json:

"fonts": {
        "regular":  "fonts/Lato-Regular.ttf",
        "medium":   "fonts/Lato-Medium.ttf",
        "bold":     "fonts/Lato-Bold.ttf",
        "black":    "fonts/My_Own_Cool_Font.fft"
}

Изменение цветов

Значения цветов всех элементов интерфейса находятся в файле UIStyle.json. Все свойства в файле сгруппированны по экранам и компонентам.

Для изменения цвета компонента следует найти соответствующий раздел в файле и заменить необходимое свойство.

К примеру, необходимо заменить цвет фона на экране настроек. В файле UIStyle.json, в компоненте "settings_screen" доступно свойство "bg_color".

Заменяем цвет на красный:

"bg_color": "#FF0000",

Цвета могут быть заданы в следующих форматах:

• SVG Color ( см. список названий цветов). Пример: "white";
• "#RRGGBB". Пример: “#F13900”;
• "#AARRGGBB". Пример: “#40FFFFFF”.

Кастомизация верстки

Xsolla Launcher реализован на основе фрэймворка Qt 5.8 (Documentation) Интерфейс лаунчера реализован на основе технологии QtQuick (Documentation) и языка QML (Documentation).

Структура проекта

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

ErrorReportWindow

Директория содержит описание интерфейса окна с ошибкой, который появляется в случае возникновения ошибки приложения.

GameInstallWindow

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

LauncherUpdateWindow

Директория содержит верстку окна, которое появляется при старте приложения, и в котором отображается прогресс обновления лаунчера.

LoginWindow

Директория содержит верстку окна авторизации. Верстка разделена на четыре файла:

• BasePart.qml — верстка основной части окна логина (поля ввода, кнопка входа, список социальных сетей);
• SocialList.qml — интерфейс экрана со списком социальных сетей;
• ErrorWindow.qml — кастомное окно для отображения ошибки (например, “неверный логин”);
• LoginWindow.qml — основное окно, в котором происходит управление отображением подэкранов (смена BasePart и SocialList)

MainWindow

Папка содержит верстку основного рабочего окна приложения и всех необходимых компонентов:

• MainWindow.qml — главное окно, в нем происходит контроль отображения страниц (Game, News, etc)
• LoginContextMenu.qml — компонент выпадающего меню;
• GameComponent.qml — компонент страницы Game
• директория NewsWindow:
  • NewsScreen.qml — основной компонент страницы новостей. В нем происходит управление отображением подэкранов (экран всех новостей, экран одной новости);
  • BannerNewsComponent.qml — компонент “карусели” новостей;
  • NewsListComponent.qml — компонент списка всех новостей;
  • OneNewsScreen.qml — компонент экрана одной новости;.
• директория GameWindow:
  • HorizontalListView.qml — компонент списка баннеров;
  • AdvertisingBanner.qml — элемент списка баннеров. В случае, если элемент содержит несколько баннеров, реализовано автоматическое прокручивание.

SettingsWindow

SettingsWindow.qml — окно настроек, содержащее выбор языка (выпадающий список), чек-бокс запоминания языка и чек-бокс включения p2p соединения.

UI

В директории UI находятся компоненты, которые используются во всем проекте:

• ComboBox.qml — компонент выпадающего списка, со scroll bar (см. ниже);
• MyScrollBar — компонент кастомного scroll bar’а. Используется в компоненте ComboBox;
• OrangeButton — компонент кнопки;
• ProgressBar — компонент прогресс-бара, с возможностью отображения текста. Используется на экранах Game, News, а также в других разделах приложения;
• TextLabel — компонент текстовой метки. Используется в заголовке переключения страниц на главном окне;
• TransparentButton — компонент кнопки;
• TransparentTextField — компонент поля ввода. Имеет режим “пароля”, при котором вместо символов показываются точки. В правой части поля имеется иконка, по нажатию на которую вместо точек показывается обычный текст

Вся верстка использует С++-side логику, которую нельзя изменить без перекомпиляции проекта. Для смены окон используется глобальный объект WindowController, имеющий следующие методы:

• void openLoginWindow() — открывает файл "qml/LoginWindow/LoginWindow.qml";
• void openUpdateWindow — открывает файл "qml/LauncherUpdateWindow/LauncherUpdateWindow.qml";
• void openMainWindow() — открывает файл "qml/MainWindow/MainWindow.qml";
• void exit() — закрывает текущее окно. Этот метод был реализован для более быстрого закрытия окна, поскольку на некоторых ОС семейства Windows ( в частности, Window 7) возникает проблема “зависания” окна при закрытии в момент загрузки данных игры;
• void move2top() — перемещает текущее окно вверх по стэку окон (сейчас используется при авторизации через социальные сети).

В QML доступны следующие глобальные объекты:

• LauncherManager — основной объект взаимодействия интерфейса и бизнес-логики;
• Settings — объект класса, в котором хранятся настройки приложения;
• UninstallManager — компонент для удаления данных игры;
• UrlManager — компонент, который загружает все url из файла api_constants, производит необходимую обработку и позволяет использовать эти URL в интерфейсе;
• UIStyleManager — компонент, который загружает из файла UIStyle.json все константы стиля и делает их доступными в интерфейсе;

Также есть несколько типов, которые можно использовать в QML:

• LauncherUpdater — тип для обновления лаунчера;
• LoginHelper — тип для логина. Используется для получения списка социальных сетей, для авторизации через логин-пароль и для авторизации через социальную сеть;
• NewsReceiver — класс для получения новостей. Может получать и обычные и “баннерные” новости;
• BannersModel — класс, использующийся для получения рекламных баннеров;
• SteamWorker — класс, использующийся для авторизации через Steam.

В верстку можно добавлять и использовать любое количество новых экранов и компонентов, но само приложение может открывать только три указанных экрана (см. описание WindowController). При добавлении ранее не используемых модулей Qt необходимо добавить соответствующие файлы в папку с дистрибутивом. К примеру, в текущей сборке используются графические эффекты, поэтому в дистрибутив добавлена папка QtGraphicalEffects (список QML модулей Qt 5.8).