Weitere Funktionen

Erfahren Sie mehr über erweiterte Einrichtungen in unseren Anleitungen.

So testen Sie die Kontoverknüpfung in der Demo

Sie können die folgenden Funktionen implementieren, indem Sie das Konto des Spielers auf verschiedenen Plattformen mit dem Hauptkonto verknüpfen:

  • automatische Spieleridentifizierung auf verschiedenen Plattformen
  • Verwaltung eines einzigen plattformübergreifenden Inventars auf verschiedenen Plattformen

Sie können Demoszenen verwenden, um die Verknüpfung von Plattformkonten mit dem Hauptkonto für ein voreingestelltes Kundenportal-Projekt zu überprüfen.

Note
Sie können nur ein Konto pro Plattform mit dem Hauptkonto verknüpfen.

So testen Sie die Kontoverknüpfung in einem Demoprojekt:

  1. Navigieren Sie zu Ihrem Unity-Projekt.
  2. Richten Sie eine Demoszene ein, um sich über das Plattformkonto bei der Anwendung anzumelden:
    1. Navigieren Sie im Hauptmenü zu Window > Xsolla > Edit Settings.
    2. Legen Sie folgende Parameter im Inspector-Fensterbereich fest:
      1. Geben Sie die Publishing platform an. Der ausgewählte Wert muss sich von Xsolla und None unterscheiden.
      2. Ändern Sie Username from console.

  1. Starten Sie die Xsollus-Demoszene aus dem Ordner Assets > Xsolla > DemoCommon > Scene.

  1. Klicken Sie in der Demoszene auf User account und anschließend auf Account linking. Daraufhin wird das Demoprojekt im Standard-Browser geöffnet, wodurch der Start der Anwendung auf einer anderen Plattform simuliert wird.

  1. Klicken Sie auf Create an account.

  1. Geben Sie eine E-Mail-Adresse und ein Passwort ein. Klicken Sie auf Accept and create.

  1. Wählen Sie einen Gegenstand im Katalog aus, und klicken Sie auf Buy on Xsolla. Kaufen Sie den Gegenstand mithilfe einer der Testbankkarten. Schließen Sie die Quittung.

  1. Klicken Sie oben im Bildschirm auf die E-Mail-Adresse, um das Menü zu öffnen. Klicken Sie auf Inventory. Vergewissern Sie sich, dass der gekaufte Gegenstand im Inventar verfügbar ist.

  1. Klicken Sie auf Get code. Klicken Sie im geöffneten Fenster auf Request the code. Notieren Sie sich den erhaltenen Kontoverknüpfungscode.

  1. Navigieren Sie zur Demoszene in Unity.
  2. Geben Sie den erhaltenen Kontoverknüpfungscode (siehe Schritt 9) ein, und klicken Sie auf Confirm.

  1. Das Plattformkonto ist nunmehr mit dem Hauptkonto verknüpft. Stellen Sie sicher, dass der gekaufte Gegenstand im Inventar in der Unity-Demoszene verfügbar ist.

  1. Da dieses Konto bereits mit dem Hauptkonto verknüpft ist, können Sie den Kontoverknüpfungscode darüber abrufen. Klicken Sie dazu auf Get account link. Notieren Sie sich den erhaltenen Code.

  1. Richten Sie die Demoszene ein, um sich über ein anderes Plattformkonto bei der Anwendung anzumelden (siehe Schritt 2). Die Publishing platform sollte sich von der in Schritt 2 ausgewählten unterscheiden.
  2. Starten Sie die Xsollus-Demoszene aus dem Ordner Assets > Xsolla > DemoCommon > Scene.

  1. Stellen Sie sicher, dass das Spielerinventar leer ist.
  2. Klicken Sie auf Account linking. Bleiben Sie in der Unity-Demoszene.

  1. Geben Sie den erhaltenen Kontoverknüpfungscode (siehe Schritt 13) ein, und klicken Sie auf Confirm.

  1. Damit ist auch das Konto von der neuen Plattform mit dem Hauptkonto verknüpft. Stellen Sie sicher, dass der gekaufte Gegenstand im Inventar der Unity-Demoszene verfügbar ist.

Befolgen Sie die Anleitung, um die Kontoverknüpfung für Ihr Projekt zu konfigurieren.

War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Ausblenden

So implementieren Sie einen Battle Pass in die Anwendung

Notice
Diese Anleitung ist nur für die Arbeit mit dem Game Commerce-Asset bestimmt.

Der Battle Pass steigert die Motivation der Spieler, indem Belohnungen für das Abschließen von Quests oder für das aktive Spielen während des Battle-Pass-Zeitraums gewährt werden.

Ein kostenloser Battle Pass mit begrenzten Belohnungen ist für alle Spieler verfügbar. Die letzte Belohnung ist im kostenlosen Battle Pass nicht enthalten.

Der Spieler kann eine Premium-Version des Battle Pass erwerben, in der alle Belohnungen, einschließlich der finalen, enthalten sind.

Der Battle-Pass-Fortschritt ist in Stufen unterteilt. Um aufzusteigen und die finale Belohnung zu erhalten, bevor der Battle Pass abläuft, muss der Spieler die notwendigen Erfahrungspunkte sammeln oder für den Stufenaufstieg zahlen.

Das Demoprojekt zeigt eine beispielhafte Implementierung des Battle Pass mithilfe von Xsolla-Produkten. So testen Sie den Battle Pass:

  1. Starten Sie die Demoszene Xsollus.
  2. Melden Sie sich als Demonutzer an oder erstellen Sie einen neuen Nutzer.
  3. Klicken Sie im seitlichen Menü auf Battle pass.

So passen Sie den Battle Pass an Ihr Projekt an:

  1. Fügen Sie Ihrem Projekt die Battle-Pass-Logik hinzu.
  2. Erstellen Sie einen Satz Belohnungsgutscheine.
  3. Erstellen Sie eine Battle-Pass-Konfiguration.
  4. Erstellen Sie einen Battle-Pass-Gegenstand.
  5. Erstellen Sie einen Stufenaufstieg-Gegenstand.

Battle-Pass-Logik zum Projekt hinzufügen

Die gesamte Logik des Battle Pass ist im BattlepassPage-Prefab enthalten und in folgende Blöcke unterteilt:

  • ScriptHolders — Skripte für die Battle-Pass-Konfiguration, ‑Gegenstände und Spielerinformationen
  • UIScriptHolders — Skripte für die Interaktion mit dem Spieler

So fügen Sie die Battle-Pass-Logik hinzu:

  1. Instanziieren Sie in Ihrem Projekt das BattlepassPage-Prefab.
  2. Ändern Sie die Benutzeroberfläche (optional).
  3. Modifizieren Sie die Logik für die Informationsspeicherung.

Belohnungsgutscheine erstellen

Sowohl virtuelle Gegenstände als auch virtuelle Währungspakete sind als Belohnung möglich.

Im Rahmen der aktuellen Lösung werden dem Spieler Belohnungen gewährt, wenn er einen entsprechenden Gutschein einlöst. So erstellen Sie einen Satz Belohnungsgutscheine:

  1. Wechseln Sie im Kundenportal zu Ihrem Projekt.
  2. Erstellen Sie virtuelle Gegenstände und virtuelle Währungspakete als Belohnung für Spieler.
  3. Richten Sie für jede Belohnung eine Gutscheinkampagne ein, beachten Sie dabei die folgenden Empfehlungen:

    • Geben Sie die Anzahl der Einlösungen pro Benutzer als voraussichtliche Anzahl der Gutscheineinlösung im Battle Pass an. Ein Gutschein kann im Rahmen des Battle Pass mehrfach eingelöst werden (z. B. auf verschiedenen Battle-Pass-Stufen, in Premium- und kostenlosen Versionen).
    • Die Kampagne muss für denselben Zeitraum wie der Battle Pass gültig sein.

Um die Battle-Pass-Konfiguration anzulegen, empfiehlt es sich, im Voraus eine Liste von Belohnungen zu erstellen und für jede davon Folgendes anzugeben:

  • Gutscheincode
  • SKU des virtuellen Gegenstands oder des virtuellen Währungspakets
  • ob die Belohnung an eine bestimmte Stufe des Battle Pass gebunden ist
  • ob die Belohnung an die kostenlose oder Premium-Version gebunden ist

Note
Sie können Belohnungen für den neuen Battle Pass konfigurieren, bevor der vorherige abläuft. Aktivieren Sie die Gutscheinaktion erst nach dem Start des neuen Battle Pass, um die Anwendungslogik nicht zu verletzen.

Battle-Pass-Konfiguration erstellen

Die Battle-Pass-Konfiguration ist eine JSON-Datei und enthält:

  • den Namen des Battle Pass
  • das Ablaufdatum des Battle Pass
  • die Stufenstruktur samt Angabe der Belohnungen für die kostenlose und die Premium-Version

Note
Die Belohnung für die höchste Stufe des Premium-Battle-Pass entspricht automatisch der finalen Battle-Pass-Belohnung. Deren Anzeige unterscheidet sich von der Belohnungsanzeige für abgeschlossene Stufen.

JSON-Dateistruktur:

ParameterTypBeschreibung
Name
stringDer Name des Battle Pass. Muss mit dem Namen des Battle-Pass-Gegenstands übereinstimmen.
ExpiryDate
stringDas Ablaufdatum des Battle Pass.
Levels
arrayStruktur der Battle Pass-Stufen.
Levels.Tier
integerStufennummer.
Levels.Experience
integerDie Anzahl von Erfahrungspunkten, um die nächste Stufe zu erreichen.
Levels.FreeItem
objectBelohnungsinformationen für die kostenlose Version des Battle Pass. Möglich ist null.
Levels.FreeItem.Sku
stringDie SKU eines virtuellen Gegenstands oder virtuellen Währungspakets. Dient dazu, dem Benutzer das Belohnungsbild und die entsprechenden Informationen anzuzeigen.
Note
Für ein virtuelles Währungspaket können sowohl die Paket-SKU als auch die SKU der virtuellen Währung verwendet werden.
Levels.FreeItem.Quantity
integerDie Anzahl der Belohnungen.
Levels.FreeItem.Promocode
stringDer Gutscheincode für die Belohnung.
Levels.PremiumItem
objectBelohnungsinformationen für die Premium-Version des Battle Pass. Möglich ist null.
Levels.PremiumItem.Sku
stringDie SKU eines virtuellen Gegenstands oder virtuellen Währungspakets. Dient dazu, dem Benutzer das Belohnungsbild und die entsprechenden Informationen anzuzeigen.
Note
Für ein virtuelles Währungspaket können sowohl die Paket-SKU als auch die SKU der virtuellen Währung verwendet werden.
Levels.PremiumItem.Quantity
integerDie Anzahl der Belohnungen.
Levels.PremiumItem.Promocode
stringDer Gutscheincode für die Belohnung.

Beispielhafte Battle-Pass-Konfiguration:

Copy
Full screen
Small screen
{
  "Name": "BP2021JAN",
  "ExpiryDate": "29-03-2021",
  "Levels": [
    {
      "Tier": 1,
      "Experience": 1000,
      "FreeItem": {
        "Sku": "Sku",
        "Quantity": 10,
        "Promocode": "HELLO_WORLD"
      },
      "PremiumItem": {
        "Sku": "Sku2",
        "Promocode": "HELLO_WORLD2"
      }
    },
    {
      "Tier": 2,
      "Experience": 1000
    },
    {
      "Tier": 3,
      "Experience": 1000
    }
  ]
}

Battle-Pass-Gegenstand erstellen

Der Battle-Pass-Gegenstand ist ein Container für die Battle-Pass-Konfiguration. Damit können Sie den Premium-Status des Spielers ermitteln, also ob der Spieler eine Premium-Version erworben hat.

So erstellen Sie einen Battle-Pass-Gegenstand:

  1. Wechseln Sie zu Ihrem Projekt im Kundenportal.
  2. Erstellen Sie eine Gruppe virtueller Gegenstände namens #BATTLEPASS#.

Note
Die #BATTLEPASS#-Gruppe dient als Hilfsgruppe und erscheint weder im Ingame-Shop noch im Inventar.

  1. Erstellen Sie einen virtuellen Gegenstand mit den folgenden Parametern:
    • Gegenstandsname – Name des bei der Konfiguration angegebenen Battle Pass.
    • SKU – Battle-Pass-ID. Es wird empfohlen, den bei der Konfiguration angegebenen Namen des Battle Pass zu verwenden.
    • Gegenstandseigenschaften — Verbrauchsgegenstand oder dauerhafter Gegenstand.

Note
Es wird empfohlen, den Verbrauchsgegenstand während des Debuggens der Anwendung zu erstellen. Auf diese Weise können Sie testen, wie das System auf das Vorhandensein bzw. Nichtvorhandensein des Battle-Pass-Gegenstands reagiert.

    • Preis – Preis der Premium-Version des Battle Pass. Lässt sich in virtueller oder echter Währung festlegen.

Note
Wenn ein virtueller Gegenstand in echter und virtueller Währung bepreist ist, zeigt die Anwendung den Preis in echter Währung an.

    • Gruppe – #BATTLEPASS#.

Note
Es wird empfohlen, während des Debuggens der Anwendung zusätzlich einen Gegenstand einer anderen Gruppe als #BATTLEPASS# zuzuweisen. Dadurch wird der Gegenstand im Inventar angezeigt.

  1. Fügen Sie dem erstellten virtuellen Gegenstand die Battle-Pass-Konfiguration hinzu:
    1. Rufen Sie die aktuelle Beschreibung des Gegenstands mithilfe des API-Aufrufs Get virtual item in einem JSON-Format ab.
    2. Konvertieren Sie die Battle-Pass-Konfiguration in einen String mithilfe eines Onlinediensts oder der Methode JSON.stringify() in JavaScript.
    3. Geben Sie in der Gegenstandsbeschreibung den erhaltenen String im en-Objekt des Parameters long_description an.
    4. Modifizieren Sie den Gegenstand mithilfe des API-Aufrufs Update virtual item, geben Sie dabei die aktualisierte Gegenstandsbeschreibung im Anfrage-Body an.

Beispielhafte Beschreibung des Battle-Pass-Gegenstands:

Copy
Full screen
Small screen
{
  "sku": "BP2021JAN",
  "name":{
    "en": "BP2021JAN"
  },
  "type": "virtual_good",
  "description":{
    "en": "BP2021JAN"
  },
  "image_url": "https://cdn3.xsolla.com/img/misc/images/7cb1c2b719af329a9bc1df994d58b749.png",
  "long_description": {
    "en": "{
                \"Name\":\"BP2021JAN\",
                \"ExpiryDate\":\"01-07-2021\",
                \"Levels\":
                    [
                        {
                            \"Tier\":1,
                            \"Experience\":100,
                            \"FreeItem\":
                                {
                                    \"Sku\":\"Bullets\",
                                    \"Promocode\":\"B2021S1FL1E100\",
                                    \"Quantity\":50
                                }
                        }
                    ]
            }"
  },
  "attributes":[
  ],
  "is_free": false,
  "order": 1,
  "groups":[
    "Battlepass"
  ],
  "regional_prices":[
  ],
  "prices":[
    {
      "amount": 1,
      "currency": "USD",
      "is_default": true,
      "is_enabled": true
    }
  ],
  "media_list":[
  ],
  "vc_prices":[
  ],
  "is_enabled": true,
  "is_show_in_store": true,
  "regions":[
  ],
  "inventory_options":{
    "consumable": false,
    "expiration_period": null
  }
}

Stufenaufstieg-Gegenstand erstellen

Momentan können Spieler im Rahmen der Battle-Pass-Lösung gegen Zahlung von echter oder virtueller Währung aufsteigen. Der Preis für einen Stufenaufstieg ist immer derselbe. Die Erfahrungspunkte, die der Spieler innerhalb der aktuellen Stufe gesammelt hat, werden in die nächste Stufe übernommen.

So erstellen Sie einen Stufenaufstieg-Gegenstand:

  1. Wechseln Sie im Kundenportal zu Ihrem Projekt.
  2. Erstellen Sie einen virtuellen Gegenstand mit folgenden Parametern:
    • Gegenstandsname — Name des Stufenaufstieg-Gegenstands im Format <battlepassname>_levelup_util, wobei <battlepassname> dem Namen des bei der Konfiguration angegebenen Battle Pass entspricht.
    • SKU — es wird empfohlen, den bei der Konfiguration angegebenen Namen des Battle Pass zu verwenden.
    • Gegenstandseigenschaften — Verbrauchsgegenstand oder dauerhafter Gegenstand.
    • Preis — Preis für den Stufenaufstieg. Lässt sich in virtueller oder echter Währung festlegen.

Note
Wenn ein Stufenaufstieg-Gegenstand in echter und virtueller Währung bepreist ist, zeigt die Anwendung den Preis in echter Währung an.

    • Gruppe – #BATTLEPASS#.

Note
Es wird empfohlen, während des Debuggens der Anwendung zusätzlich einen Stufenaufstieg-Gegenstand einer anderen Gruppe als #BATTLEPASS# zuzuweisen. Dadurch wird der Gegenstand im Inventar angezeigt.

Besonderheiten der aktuellen Battle-Pass-Lösung

Logik für die Anzeige des Battle Pass

Die Anwendung zeigt nur einen Battle Pass entsprechend folgender Logik an:

  • Sind ein oder mehrere nicht abgelaufene Battle Passes vorhanden, zeigt die Anwendung den Battle Pass mit dem nächstliegenden Ablaufdatum an.
  • Wenn alle Battle Passes abgelaufen sind, zeigt die Anwendung den letzten abgelaufenen Battle Pass an.

BEISPIEL 1

Aktuelles Datum: 04.03.2021.

Das jeweilige Ablaufdatum der Battle Passes: 01.03.2021, 01.04.2021, 01.05.2021.

Die Anwendung zeigt den Battle Pass mit dem Ablaufdatum 01.04.2021 an.

BEISPIEL 2

Aktuelles Datum: 04.03.2021.

Das jeweilige Ablaufdatum der Battle Passes: 01.02.2021, 01.03.2021.

Die Anwendung zeigt den Battle Pass mit dem Ablaufdatum 01.03.2021 an.

Logik für die Informationsspeicherung

Momentan werden im Rahmen der Lösung alle Informationen über den Battle-Pass-Fortschritt eines Spielers (Stufe, Erfahrungspunkte, erhaltene Belohnungen usw.) in den vom Benutzer editierbaren Attributen gespeichert. Im Rahmen der Demo lassen sich diese Attribute auf der Character-Seite anzeigen und bearbeiten.

Wenn das System das erforderliche Attribut nicht findet, wird automatisch ein neues angelegt. Wenn das System Attribute von abgelaufenen Battle Passes findet, werden diese Attribute automatisch gelöscht.

Notice
Von Benutzern editierbare Attribute lassen sich clientseitig ändern. Beim Implementieren Ihrer eigenen Logik wird empfohlen, schreibgeschützte Attribute zu verwenden, um die Battle-Pass-Fortschrittsdaten des Spielers zu schützen.

Um den Premium-Status eines Spielers zu ermitteln, wird geprüft, ob der Battle-Pass-Gegenstand im Inventar des Spielers vorhanden ist.

War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Ausblenden

So konfigurieren Sie mit dem SDK die Benutzeroberfläche von Anwendungen

Das SDK umfasst einen UI-Baukasten. Mit diesem Baukasten können Sie das Erscheinungsbild der Anwendungsbenutzeroberfläche anpassen.

Sie können die Benutzeroberfläche anpassen, indem Sie die für das Erscheinungsbild (Farben, Sprites und Schriftarten) zuständigen Eigenschaften der UI-Elemente bearbeiten. Diese Eigenschaften sind in einem Theme zusammengefasst. Unity-Themes sind mit visuellen Komponenten durch die Decorators verbunden. Wenn Sie die visuelle Eigenschaft ändern, ändern die Decorators das Erscheinungsbild der Unity-Komponenten.

Verwenden Sie Widgets, um die UI-Elemente durch andere Elemente desselben Typs zu ersetzen. Widgets sind unabhängige und leicht austauschbare Teile und liegen in Form von Prefabs vor.

Die Benutzeroberfläche besteht aus zwei unabhängigen Teilen:

  • Theme-Editor zum Anpassen des Erscheinungsbilds.
  • Widget-Editor zum Arbeiten mit Prefabs und für den Austausch von UI-Elementen.

Mit Themes arbeiten

Theme-Editor

Wechseln Sie zum Hauptmenü des Unity-Editors, und navigieren Sie zu Window > Xsolla > UI Themes Editor, um einen Theme-Editor zu öffnen.

Die Benutzeroberfläche des Themen-Editors enthält die folgenden Komponenten:

  • Schaltflächen mit Theme-Namen, mit denen sich die Themes auswählen und übernehmen lassen.

Note
Während die Anwendung läuft, können sie das Theme nur durch die statische Methode SetCurrentThemeByName aus der ThemesLibrary-Klasse ändern. Übermitteln Sie dieser Methode einen Theme-Namen als Parameter.

  • Schaltfläche Refresh — Damit können Sie die Theme-Eigenschaften oder deren Änderungen für die Benutzeroberfläche der Anwendung übernehmen.
  • Kontrollkästchen Auto Refresh — Damit können Sie die Theme-Eigenschaften oder deren Änderungen für die Benutzeroberfläche der Anwendung automatisch übernehmen.
  • Abschnitt Themes — Enthält die Liste der vorhandenen Themes.
  • Abschnitt Colors — Enthält die Liste der Theme-Farben.
  • Abschnitt Sprites — Enthält die Liste der Theme-Sprites.
  • Abschnitt Fonts — Enthält die Liste der Theme-Schriftarten.

Sie können folgende Aktionen mit den Listen durchführen:

  • Über das +-Symbol im unteren Teil der Liste lässt sich ein neues Element hinzufügen.
  • Über das -Symbol im unteren Teil der Liste lässt sich das ausgewählte Element löschen.
  • Um die Reihenfolge zu ändern, halten Sie das =-Symbol gedrückt, und ziehen Sie das Element an die gewünschte Position in der Liste.
  • Um das Element umzubenennen, müssen Sie den Text im Feld mit dem Elementnamen ändern.

Die Eigenschaftswerte in Unity werden auf die übliche Weise geändert:

  • Um die Farbe zu ändern, klicken Sie auf das Feld der Eigenschaft, und wählen Sie einen neuen Wert aus.
  • Die Schriftart oder das Sprite lässt sich auf eine der folgenden Weisen ändern:
    • Ziehen Sie ein Asset in das Eigenschaftsfeld.
    • Klicken Sie auf das -Symbol, und wählen Sie ein Asset aus.

Theme-Bibliothek

Die Theme-Bibliothek ist aus der ScriptableObject-Klasse geerbt und befindet sich im Verzeichnis Resources/UIBuilder/ThemesLibrary.

Note
Es wird davon abgeraten, das Verzeichnis der Theme-Bibliothek zu ändern, da es sich um ein Singleton-Objekt handelt, das auf Anfrage aus dem definierten Ressourcenverzeichnis geladen wird.

UI-Element mit dem Theme verbinden

So ändern Sie das Erscheinungsbild des UI-Elements entsprechend dem angewandten Theme:

  1. Fügen Sie dem Objekt Decorators hinzu, und konfigurieren Sie sie.
  2. Fügen Sie dem Objekt die Eigenschaftsanbieter-Komponenten hinzu, und konfigurieren Sie sie.

Decorators

Decorators sind Komponenten, die Theme-Eigenschaften (Farbe, Sprite oder Schriftart) für standardmäßige UI-Elemente der Unity-Benutzeroberfläche übernehmen und diese verändern.

Decorators enthalten Eigenschafts-IDs, jedoch keine Werte der Eigenschaften, und einen Link zum UI-Element (Bild oder Text). Im Prinzip fungieren Decorators als Bindegliede zwischen Themes und UI-Elementen. Decorators werden im Inspector-Fensterbereich konfiguriert.

Liste der Decorators:

  • ImageColorDecorator — ändert die Bildfarbe
  • ImageSpriteDecorator — ändert das Bild-Sprite
  • TextFontDecorator — ändert die Textfarbe
  • TextColorDecorator — ändert die Schriftart des Texts

Ein Decorator ändert die Elementeigenschaften, wenn die folgenden Ereignisse eintreten:

  • Objekt wird im Theme-Editor oder während des laufenden Spiels aktiviert.
  • Das aktuelle Theme wird im Editor oder während des laufenden Spiels geändert.
  • Die Verbindung zwischen einer Objekteigenschaft und einem Theme wird im Inspector-Fensterbereich geändert.
  • Der Eigenschaftswert wird im Theme-Editor geändert.
  • Das Objekt-Prefab wird zur Bearbeitung im Theme-Editor geöffnet.

So verbinden Sie ein UI-Element mit einem Theme:

  1. Fügen Sie dem Objekt eine Decorator-Komponente hinzu.
  2. Wählen Sie die ID der Eigenschaft aus dem Theme aus.

Nachdem der Decorator dem Objekt hinzugefügt wurde, versucht er, ein benötigtes UI-Element in diesem Objekt zu finden und es der Variable Comp zuzuweisen.

Beispielhafte Decorator-Anwendung:

Der ImageColorDecorator-Decorator wird dem Bildobjekt hinzugefügt. Im Beispiel ist der Farbe die Main Button-ID zugeordnet. Infolgedessen wird die Farbe, die im Theme für Main Button angegeben ist, für das Bild verwendet.

Der Decorator kann das Erscheinungsbild der Komponente während des laufenden Spiels dynamisch ändern, wenn der Benutzer mit dem Mauszeiger über das Objekt fährt oder auf das Objekt klickt.

So ändern Sie das Erscheinungsbild des UI-Elements:

  1. Fügen Sie dem Objekt eine Decorator-Komponente hinzu.
  2. Wählen Sie die ID der Eigenschaft aus dem Theme aus.
  3. Fügen Sie dem Objekt die DecoratorPointerEvents-Komponente hinzu. Die Komponente trackt die Ereignisse "Objekt anklicken" und "mit Mauszeiger darüberfahren".
  4. Ändern Sie in der Decorator-Komponente den Wert der Variable TransitionMode in Override.
  5. Weisen Sie der Decorator-Variable PointerEvents die hinzugefügte DecoratorPointerEvents-Komponente zu.
  6. So ändern Sie das Erscheinungsbild, wenn der Mauszeiger über das Objekt fährt:
    1. Aktivieren Sie das Kontrollkästchen Override on hover.
    2. Wählen Sie im Feld neben dem Kontrollkästchen die ID einer Eigenschaft aus dem Theme aus.
  7. So ändern Sie das Erscheinungsbild, beim Klick auf das Objekt:
    1. Aktivieren Sie das Kontrollkästchen Override on press.
    2. Wählen Sie im Feld neben dem Kontrollkästchen die ID einer Eigenschaft aus dem Theme aus.

Beispielhafte Decorator-Anwendung für die dynamische Änderung des Erscheinungsbilds:

Der ImageColorDecorator-Decorator wird dem Bildobjekt hinzugefügt. Die Main Button-ID für die Farbe und die Main Button Hover-ID für die Farbe beim Überfahren des Objekts mit dem Mauszeiger ist in dem Beispiel angegeben. Infolgedessen wird die im Theme für den Main Button angegebene Farbe für das Bild verwendet. Beim Überfahren des Objekts mit dem Mauszeiger ändert sich die Farbe in die im Theme für Main Button Hover angegebene.

Eigenschaftsanbieter

Eigenschaftsanbieter sind Klassen in Form von Containern für Theme-Eigenschaften. Sie dienen dazu, den Benutzercode auf einfache Weise mit Themes zu verbinden.

Liste der Eigenschaftsanbieter:

  • ColorProvider — enthält einen Link zur Farbeigenschaft.
  • SpriteProvider — enthält einen Link zur Sprite-Eigenschaft.
  • FontProvider — enthält einen Link zur Schriftart-Eigenschaft.

Alle Eigenschaftsanbieter haben einen PropertyDrawer, dank dem sie sich einfach über den Inspector-Fensterbereich konfigurieren lassen.

So konfigurieren Sie einen Eigenschaftsanbieter und rufen den Eigenschaftswert aus einem Code ab:

  1. Fügen Sie dem Objekt eine Eigenschaftsanbieter-Komponente hinzu.
  2. Wählen Sie die ID einer Eigenschaft aus dem Theme aus.

Beispielhafte Eigenschaftsanbieter-Konfiguration:

  1. Deklarieren Sie im Skript eine Variable, und weisen Sie ihr eine Komponente des Eigenschaftsanbieters zu.
  2. Um den Farbwert abzurufen, rufen Sie die Methode GetValue auf.

Beispielhaftes Skript:

Copy
Full screen
Small screen
public class ProviderExample : MonoBehaviour
{

  [SerializeField] private ColorPrivider ColorPrivider;

  private void Start()
  {
      Color color = ColorProvuder.GetValue();
  }

}

Mit Widgets arbeiten

Widget-Editor

Wechseln Sie zum Hauptmenü des Unity-Editors, und navigieren Sie zu Window > Xsolla > UI Widgets Editor, um einen Widget-Editor zu öffnen.

Die Benutzeroberfläche des Widget-Editors enthält die folgenden Komponenten:

  • Schaltfläche Refresh – Damit lassen sich die Widget-Änderungen in Prefabs übernehmen.
  • Kontrollkästchen Auto Refresh – Damit lassen sich die Widget-Änderungen in Prefabs automatisch übernehmen.
  • Abschnitt Widgets – Enthält die Liste der Widgets.

Sie können folgende Aktionen mit der Widget-Liste durchführen:

  • Über das +-Symbol im unteren Teil der Liste lässt sich ein neues Widget hinzufügen.
  • Über das -Symbol im unteren Teil der Liste lässt sich das ausgewählte Widget löschen.
  • Um die Reihenfolge zu ändern, halten Sie das =-Symbol gedrückt, und ziehen Sie das Element an die gewünschte Position in der Liste.
  • Um das Widget umzubenennen, müssen Sie den Text im Feld mit dem Elementnamen ändern.
  • Die Schriftart oder das Sprite lässt sich auf eine der folgenden Weisen ändern:

    • Ziehen Sie ein Prefab in das Feld mit einem Widget.
    • Klicken Sie auf das -Symbol, und wählen Sie ein Prefab aus.

Widget-Bibliothek

Die Widget-Bibliothek ist aus der ScriptableObject-Klasse geerbt und befindet sich im Verzeichnis Resources/UIBuilder/WidgetsLibrary.

Note
Es wird davon abgeraten, das Verzeichnis der Widget-Bibliothek zu ändern, da es sich um ein Singleton-Objekt handelt und auf Anfrage aus dem definierten Ressourcenverzeichnis geladen wird.

UI-Element mit dem Widget verbinden

Um UI-Elemente einfach durch andere zu ersetzen, sollten Sie beim Erstellen der Benutzeroberfläche Widget-Container anstatt Widgets verwenden. Dadurch können Sie das von einem Container erstellte Widget einfach so konfigurieren, dass es UI-Elemente desselben Typs ersetzt. Hingegen müssten beim Standardansatz alle Widgets manuell ersetzt werden.

Der Container erzeugt ein Widget-Objekt als untergeordnetes Objekt und konfiguriert dafür die Eigenschaften der Klasse RectTransform, wodurch das Widget den gesamten Platz im Container ausfüllt.

Beim Hinzufügen einer Container-Komponente zum UI-Element-Objekt wird dieses Objekt als übergeordnetes Objekt für die Erstellung von Widgets verwendet.

Der Container ändert die Widget-Eigenschaften, wenn die folgenden Ereignisse eintreten:

  • Verbindung zwischen einer Objekteigenschaft und dem Widget wird im Inspector-Fensterbereich geändert.
  • Das Widget-Prefab wird im Widget-Editor geändert.

So verbinden Sie ein UI-Element mit einem Widget:

  1. Fügen Sie dem Objekt die WidgetContainer-Komponente hinzu.
  2. Wählen Sie eine Widget-ID aus.

Note

Wenn es sich bei einem Objekt mit einem Widget-Container um ein Prefab handelt, können Sie die Container-Einstellungen nur im Prefab-Bearbeitungsmodus ändern. Das liegt daran, dass Sie die Hierarchie der untergeordneten Objekte innerhalb eines Unity-Prefabs nur in diesem Modus ändern können.

Beim Ersetzen des Widgets wird das aktuelle Widget gelöscht und ein neues Widget erstellt. Behalten Sie das im Hinterkopf, wenn Sie die Arbeitslogik von Objekten und deren Verbindungen gestalten.

Beispielhafte Verwendung eines Widget-Containers:

Im Beispiel ist für das WidgetA-Objekt dem Widget die Red Button-ID zugeordnet. Infolgedessen wird das WidgetA-Objekt mit einem Prefab erstellt, das dem Red Button-Widget im Editor zugewiesen wurde.

Struktur des UI-Baukastens

Während des Betriebs verwendet der UI-Baukasten die folgenden Komponenten:

  • UIProperty — Objekte mit den folgenden Daten:
    • ID der Eigenschaft
    • Eigenschaftsname
    • Visuelle Daten (Farben, Sprites, Schriftarten usw.)

  • Theme — Theme-Komponente. Das Theme ermöglicht es, das Erscheinungsbild der Benutzeroberfläche zu ändern, und ist im Prinzip eine Sammlung von Eigenschaften, unterteilt in verschiedene Gruppen (Farben, Sprites und Schriftarten). Jedes Theme hat einen Namen und eine eindeutige Kennung. Der Zugriff auf die Theme-Eigenschaft erfolgt über die Eigenschafts-ID.
  • ThemesLibrary — Bibliothek mit allen im Projekt vorhandenen Themes. Sie enthält außerdem den Wert eines aktuellen Themes und bietet Methoden zum Ändern dieses Wertes.
  • ThemeDecorator — MonoBehaviour-Klassenkomponente, die sich auf die Theme-Eigenschaften beziehen und die Werte dieser Eigenschaften für Komponenten der standardmäßigen Unity-Benutzeroberfläche übernehmen. Beispielsweise ändert der ImageColorDecorator-Decorator die Bildfarbe.
  • UIPropertyProvider — Klassen, die den Zugriff auf die Eigenschaften von Themes ermöglichen. Diese Komponenten dienen dazu, den Benutzercode auf einfache Weise mit den Daten aus Themes zu verbinden. Beispielsweise liefert die Klasse ColorProvider Daten über die Farben.
  • WidgetContainer — MonoBehaviour-Klassenkomponente, mit der Sie das gesamte Widget ändern können.
  • WidgetsLibrary — Sammlung von in einem Projekt vorhandenen Widgets. Die Komponente enthält die Liste aller Widgets und bietet Methoden zum Abrufen des Widgets anhand seiner ID.

War dieser Artikel hilfreich?
Vielen Dank!
Gibt es etwas, das wir verbessern können? Nachricht
Das tut uns leid
Bitte erläutern Sie, weshalb dieser Artikel nicht hilfreich ist. Nachricht
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.
Ausblenden
Letztmalig aktualisiert: 20. Juli 2021

Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.

Problem melden
Wir überprüfen unsere Inhalte ständig. Ihr Feedback hilft uns, sie zu verbessern.
Geben Sie eine E-Mail-Adresse an, damit wir Sie erreichen können
Vielen Dank für Ihr Feedback!