The following documentation was deprecated. Current version is available at developers.xsolla.com

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",

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

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

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