Xsolla Launcher

The Xsolla Launcher is designed for game developers who don’t have their own game launcher or for those who want to upgrade in terms of quality and functionality. It helps collecting and managing userbase inside and outside distribution platforms and provides developers with the following benefits:

Cloud. Game progress and preferable game/launcher settings can be stored in the cloud using Xsolla Login;
User authorization and registration through Unified Authentication System. Launcher can use game’s authentication system and/or Xsolla’s universal authentication platform (Xsolla Login);
Games and updates can be delivered to the end user by peer2peer and/or using any CDN;
Multi-platform. Games can be launched on PC, Mac, and Linux; the launcher also can be utilized with smart TVs, consoles, and other entertainment systems;
Players can stream games to any streaming platform, including Facebook, YouTube, and Twitch;
Players can chat among each other in the game’s main launch room or in-game;
Invite friends, share successes, and repost news in social networks;
Games can deliver news and video through the launcher to players;
Players can enable push-notifications;
Players can purchase games and in-game items from the launcher;
Game developer can create and customize leaderboards for the game;
Game developer can gather user’s data (e.g. OS version, DirectX version, Hardware specs);
Steam compatible;
Binary patching for game data.

To integrate Xsolla Launcher, please contact integration@xsolla.com.

Integration Guide

UI Customization

You can customize:

Images (icons, backgrounds);
Fonts;
UI colors (background, text, etc.)

All required customization parameters are stored in the UIStyle.json file, located in the launcher’s execution folder.

Replacing Images

Images are stored in the img folder and grouped by app sections ( Background, LoginWindow, etc.).

You can either:

Replace the default image while keeping its original name, or
Add a new image to the img folder and specify it in UIStyle.json. For example, if you want to use “my_custom_bg_image.jpg” as a background, place the image file to the img/LoginWindow folder, open UIStyle.json, go to the login_window object, and replace "bg_image": "img/LoginWindow/login_background.png" with "bg_image": "img/LoginWindow/my_custom_image.jpg".

Note that you need two versions of the image, of 1x and 2x size (for use with 4k displays). 2x images must have a "@2x" suffix (before the extension), e.g. “login_background@2x.png”.

Replacing Fonts

Fonts used in the app are located in the Fonts folder. Four fonts are available:Regular, Medium, Bold, and Black. To use new fonts, place them in the Fonts folder and edit UIStyle.json: Find the following lines:

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

and indicate the new font paths as needed. For example, to replace Lato-Black.ttf with My_Own_Cool_Font.fft, place the latter in the Fonts folder and change the above lines in UIStyle.json as follows:

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

Changing Colors

All UI colors are defined in UIStyle.json and grouped by screens and components. To change the color of a component, find it in the file and replace the corresponding property. For example, to change the background color on the settings screen: Open UIStyle.json, find the settings_screen component and the bg_color property inside it. Change the color to red:

``php "bg_color": "#FF0000", ```

Colors can be defined in the following formats:

SVG (see list of color names), e.g. "white";
#RRGGBB, e.g. "#F13900";
#AARRGGBB, e.g. “#40FFFFFF”.

Front-End Customization

Xsolla Launcher is based on the Qt 5.8 framework (see docs) The launcher’s interface is based on Qtquick (docs) and QML (docs).

Project Structure

The entire project front end is located in the qml subdirectory in the launcher’s root directory and structured according to the app’s screens and components. Each window directory describes the interface of the respective window as follows.

ErrorReportWindow

Pops up when the app raises an error.

GameInstallwindow

Prompts for game installation path and shows the required disk space.

LauncherUpdateWindow

Pops up at app startup and indicates the launcher update progress.

LoginWindow

BasePart.qml — login window body (input fields, login button, social network list);
SocialList.qml — screen with the list of social networks;
ErrorWindow.qml — custom error window (e.g., "User not found");
LoginWindow.qml — window for switching between BasePart and SocialList.

MainWindow

The app's main window and its components:

MainWindow.qml — The window itself, controlling the display of pages (Game, News, etc.).
LoginContextMenu.qml — drop-down menu;
GameComponent.qml — Game page;
NewsWindow directory:
- NewsScreen.qml — News page; controls the display of subscreens (all/single news item);
- BannerNewsComponent.qml — news carousel;
- NewsListComponent.qml — list of all news;
- OneNewsScreen.qml — specific news item;
GameWindow directory:
- HorizontalListView.qml — list of banners;
- AdvertisingBanner.qml — banner list element. If the element contains multiple banners, they are auto-scrolled.

SettingsWindow

SettingsWindow.qml — settings window (language drop-down list and “Remember language” & “Enable P2P connection” checkboxes).

UI

The UI directory contains components used throughout the project:

ComboBox.qml — drop-down list with a scroll bar (see below);
MyScrollBar — custom scroll bar used in ComboBox;
OrangeButton — button;
ProgressBar — progress bar with text; used in the Game, News and other app screens.
TextLabel — caption; used in the page toggle header in the main window.
TransparentButton — button;
TransparentTextField — input field. In “password” mode, replaces characters with dots (the user can switch to usual text by clicking an icon to the right of the box).

The entire front end is based on C++ and can only be changed by recompiling the project. The global WindowController object controls the switching between windows and uses the following methods:

void openLoginWindow() — opens qml/LoginWindow/LoginWindow.qml;
void openUpdateWindow — opens qml/LauncherUpdateWindow/LauncherUpdateWindow.qml;
void openMainWindow() — opens qml/MainWindow/MainWindow.qml;
void exit() — closes the current window. This method was implemented for closing windows more quickly, as some Windows versions (in particular Windows 7) can cause the window to freeze while closing if game data is being loaded;
void move2top() — moves the current window on top of the window stack (currently used for social logins).

The following global objects are available in QML:

LauncherManager — main object; implements the business logic within the user interface;
Settings — stores application settings.
UninstallManager — deletes game data;
UrlManager — loads and processes all URLs from the api_constants file and makes them available in the UI;
UIStyleManager — loads style constants from UIStyle.json and makes them available in the UI;

QML also supports several types:

LauncherUpdater — for updating the launcher;
LoginHelper — for logging in (retrieving the list of social networks and logging in via login and password or a social profile);
NewsReceiver — for retrieving news (both usual and banner-based);
BannersModel — for retrieving ad banners;
SteamWorker — for Steam login;

You can add and use any number of new screens and components within a front end, but the app itself can only open the above three (see WindowController). When adding previously unused Qt modules, make sure to add their files to the distribution folder. For example, the current version uses visual effects, so we added the QtGraphicalEffects folder to the distribution package (you can find the list of QML modules available in Qt 5.8 here).