Xsolla-Launcher

Der Xsolla-Launcher ist für Spieleentwickler gedacht, welche über keinen eigenen Launcher verfügen oder welche die Qualität und Funktionalität verbessern wollen. Der Launcher hilft beim Sammeln und Verwalten von Benutzerdaten innerhalb und außerhalb der Verteilungsplattformen und bietet Entwicklern folgende Vorteile:

• Cloud. Der Spielfortschritt und die bevorzugten Spiel-/Launcher-Einstellungen können mittels Xsolla-Login in der Cloud gespeichert werden;
• Benutzerautorisierung und -registrierung geschieht mittels "Unified Authentication System". Der Launcher kann das Authentifizierungssystem des Spiels und/oder Xsollas universelle Authentifizierungsplattform (Xsolla-Login) verwenden;
• Spiele und Aktualisierungen können dem Endbenutzer mittels Peer2Peer und/oder über ein beliebiges CDN bereitgestellt werden;
• Multi-Plattform. Spiele können auf PC, Mac und Linux gestartet werden; der Launcher kann außerdem mit Smart-TVs, Spielekonsolen und anderen Entertainment-Systemen genutzt werden;
• Spieler können Spiele auf beliebigen Streaming-Plattform streamen, darunter Facebook, YouTube und Twitch;
• Spieler können vor Spielstart oder im Spiel miteinander chatten;
• Freunde einladen, Spielerfolge teilen und News in sozialen Netzwerken veröffentlichen;
• Spieler können mittels Launcher mit News und Videos aus dem Spiel versorgt werden;
• Spieler können Push-Benachrichtigungen aktivieren;
• Spieler können Spiele und In-Game-Gegenstände über die Launcher kaufen;
• Spieleentwickler können Ranglisten für das Spiel erstellen und anpassen;
• Spieleentwickler können Benutzerdaten erheben (z. B. Version des Betriebssystems, DirectX-Version, Hardware-Spezifikationen);
• Kompatibel mit Steam;
• Einspielen von Patches für das Spiel

Zur Integration des Xsolla-Launchers wenden Sie sich bitte an integration@xsolla.com.

Integrationsleitfaden

Anpassung der Benutzeroberfläche

Folgendes kann angepasst werden:

• Bilder (Icons, Hintergründe);
• Schriftarten;
• Farben der Benutzeroberfläche (Hintergrund, Text usw.)

Alle erforderlichen Anpassungsparameter werden in der Datei "UIStyle.json" gespeichert, die sich im Ordner des Launchers befindet.

Bilder ersetzen

Bilder werden im Ordner "img" gespeichert und nach Teilbereichen der App (Hintergrund, Login-Fenster usw.) gruppiert.

Sie können entweder

• das Standardbild unter Beibehaltung des ursprünglichen Namens ersetzen oder
• ein neues Bild zum Ordner "img" hinzufügen und es in der Datei "UIStyle.json" definieren. Wenn Sie z. B. die Bilddatei “my_custom_bg_image.jpg” als Hintergrund verwenden möchten, so legen Sie es im Ordner img/LoginWindow ab, öffnen die Datei "UIStyle.json", gehen zum login_window-Objekt und ersetzen "bg_image": "img/LoginWindow/login_background.png" mit "bg_image": "img/LoginWindow/my_custom_image.jpg".

Bitte beachten Sie, dass Sie zwei Versionen des Bildes benötigen: einfache und doppelte Auflösung (für 4k-Bildschirme). Das Bild mit doppelter Größe muss den Suffix "@2x" erhalten (muss vor der Dateiendung stehen), z. B. "login_background@2x.png"

Schriftarten ersetzen

Die in der App verwendeten Schriftarten befinden sich im Ordner "Fonts". Es stehen vier Schriftarten zur Verfügung: Regular, Medium, Bold und Black. Um neue Schriftarten zu verwenden, legen Sie sie in den Fonts-Ordner und bearbeiten Sie UIStyle.json: Suchen Sie nach den folgenden Zeilen:

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

und geben Sie bei Bedarf die Pfade zu den neuen Schriftarten an. Um beispielsweise Lato-Black.ttf mit My_Own_Cool_Font.fft zu ersetzen, platzieren Sie letztere im Fonts-Ordner und ändern Sie die obigen Zeilen in UIStyle.json wie folgt:

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

Farben ändern

Alle Farben der Benutzeroberfläche sind in UIStyle.json definiert und nach Bereichen/Fenstern und Komponenten gruppiert. Um die Farbe einer Komponente zu ändern, suchen Sie in der Datei nach der Komponente und ersetzen Sie die entsprechende Eigenschaft. Gehen Sie folgendermaßen vor, um die Hintergrundfarbe im Fenster "Einstellungen" zu ändern: Öffnen Sie UIStyle.json, suchen Sie nach der settings_screen-Komponente und nach der darin enthaltenen Eigenschaft bg_color. Ändere die Farbe zu Rot:

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

Farben können in folgenden Formaten definiert werden:

• SVG (siehe Liste der Farbbezeichnungen), z. B. "white";
• #RRGGBB, z. B. "#F13900";
• #AARRGGBB, z.B. “#40FFFFFF”.

Front-End-Anpassung

Der Xsolla-Launcher basiert auf dem Qt 5.8 Framework (siehe Dokumente) Die Schnittstelle des Launchers basiert auf Qtquick (Dokumente) und QML (Dokumente).

Projektstruktur

Das gesamte Frontend des Projekts befindet sich im Unterverzeichnis "qml" im Stammverzeichnis des Launchers und ist nach den Bereichen/Fenstern und Komponenten der Anwendung strukturiert. Jedes Fensterverzeichnis beschreibt die Benutzeroberfläche des jeweiligen Fensters wie folgt.

ErrorReportWindow

Erscheint, wenn die App eine Fehler meldet.

GameInstallwindow

Eingabeaufforderung für den Installationspfad des Spiels. Zeigt außerdem den benötigten Speicherplatz an.

LauncherUpdateWindow

Erscheint beim Starten der App und zeigt den Update-Verlauf des Launcher an.

LoginWindow

Login-Fenster, definiert über vier Dateien:

• BasePart.qml — Body des Login-Fensters (Eingabefelder, Login-Schaltfläche, Liste sozialer Netzwerke);
• SocialList.qml — Bereich mit der Liste der sozialen Netzwerke;
• ErrorWindow.qml — Benutzerdefiniertes Fehlerfenster (z. B., "User not found");
• LoginWindow.qml — Fenster zum Wechseln zwischen BasePart und SocialList.

MainWindow

Das Hauptfenster der App und seine Komponenten:

• MainWindow.qml — Das Fenster selbst, das die Anzeige der Seiten (Spiel, News usw.) steuert.
• LoginContextMenu.qml — Dropdown-Menü;
• GameComponent.qml — Spielseite;
• NewsWindow directory:
  • NewsScreen.qml — Seite mit News; steuert die Anzeige von Unterfenstern (alle/einzelne News);
  • BannerNewsComponent.qml — fortlaufender Banner mit News;
  • NewsListComponent.qml — Liste aller News;
  • OneNewsScreen.qml — Spezifisches Element mit News;
• GameWindow-Verzeichnis:
  • HorizontalListView.qml — Liste der Banner;
  • AdvertisingBanner.qml — Bannerlisten-Element. Falls das Element mehrere Banner enthält, so werden diese automatisch gescrollt.

SettingsWindow

SettingsWindow.qml — Einstellungsfenster (Sprachen-Dropdown-Liste und Checkboxen "Remember language" & "Enable P2P connection").

UI

Das Verzeichnis der Benutzeroberfläche enthält Komponenten, die während des Projekts verwendet werden:

• ComboBox.qml — Dropdown-Liste mit einem Scroll-Balken (siehe unten);
• MyScrollBar — benutzerdefinierter Scroll-Balken, welcher in der Combobox verwendet wird;
• OrangeButton — Schaltfläche;
• ProgressBar — Fortschrittsbalken mit Text; wird in den Spiel-, Nachrichten- und anderen App-Fenstern verwendet.
• TextLabel — Caption (Titelzeile); wird im Header des Hauptfenster verwendet um zu anderen Seiten umzuschalten.
• TransparentButton — Schaltfläche;
• TransparentTextField — Eingabefeld. Ersetzt im “password”-Modus Zeichen durch Punkte (der Benutzer kann zu gewöhnlichem Text wechseln, indem er auf ein Symbol rechts neben dem Feld klickt).

Das gesamte Frontend basiert auf C++ und kann lediglich durch Neukompilierung des Projekts geändert werden. Das globale WindowController-Objekt steuert das Umschalten zwischen Fenstern und verwendet folgende Methoden:

• void openLoginWindow() — öffnet qml/LoginWindow/LoginWindow.qml;
• void openUpdateWindow — öffnet qml/LauncherUpdateWindow/LauncherUpdateWindow.qml;
• void openMainWindow() — öffnet qml/MainWindow/MainWindow.qml;
• void exit() — schließt das aktuelle Fenster. Diese Methode wurde implementiert, um Fenster schneller zu schließen, da bei einigen Windows-Versionen (insbesondere Windows 7) das Fenster beim Schließen einfrieren kann, wenn die Spieldaten geladen werden;
• void move2top() — verschiebt das aktuelle Fenster ans obere Ende den Fensterstapels (wird derzeit für Social-Logins verwendet).

Folgende globale Objekte stehen in QML zur Verfügung:

• LauncherManager — Hauptobjekt; implementiert die Geschäftslogik innerhalb der Benutzungsoberfläche;
• Settings — speichert Anwendungseinstellungen.
• UninstallManager — löscht Spieldaten;
• UrlManager — lädt und verarbeitet alle URLs aus der api_constants-Datei und stellt sie in der Benutzeroberfläche zur Verfügung;
• UIStyleManager — lädt Style-Konstanten aus UIStyle.json und stellt sie in der Benutzeroberfläche zur Verfügung.

QML unterstützt darüber hinaus mehrere Typen:

• LauncherUpdater — zur Aktualisierung des Launchers;
• LoginHelper — zum Einloggen (Abrufen der Liste der sozialen Netzwerke und Anmeldung mittels Login und Passwort oder sozialem Netzwerkprofil);
• NewsReceiver — zum Abrufen von News (sowohl gewöhnliche als auch banner-basierte News);
• BannersModel — zum Abrufen von Werbebannern;
• SteamWorker — zum Login mittels Steam;

Sie können innerhalb eines Front-Ends beliebig viele neue Fenster und Komponenten hinzufügen und verwenden, die App selbst kann jedoch nur die drei oben genannten öffnen (siehe WindowController). Wenn Sie Qt-Module hinzufügen, die Sie zuvor nicht verwendet haben, so müssen Sie sicherstellen, dass deren Dateien zum Verteilungsordner hinzugefügt werden. Da die aktuelle Version beispielsweise visuelle Effekte verwendet, haben wir den Ordner QtGraphicalEffects zum Verteilungspaket hinzugefügt (die Liste der in Qt 5.8 verfügbaren QML-Module finden Sie hier).