Dieses Tutorial erläutert, wie Sie die SDK-Methoden verwenden, um die folgenden Artikel in einem Ingame-Shop anzuzeigen:

• virtuelle Gegenstände
• Gruppen von virtuellen Gegenständen
• Bundles
• Pakete mit virtueller Währung

Quellcode

Den Quellcode für diese Beispiele finden Sie bei GitHub.

Konfigurieren Sie zunächst Artikel im Kundenportal:

1. Konfigurieren Sie virtuelle Gegenstände und Gruppen virtueller Gegenstände.
2. Konfigurieren Sie Pakete mit virtuellen Währungen.
3. Konfigurieren Sie Bundles.

Die Logiken und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Ein möglicher Artikelkatalog im Rahmen einer Ingame-Shop-Implementierung ist im Demoprojekt beschrieben.

Widget für Katalogseite erstellen

1. Wechseln Sie zum Content Browser, und erstellen Sie ein UI-Verzeichnis.
2. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
3. Fügen Sie im Widget-Blueprint die folgenden Benutzeroberflächenelemente hinzu:

1. • Schaltflächen für den Wechsel zwischen der Anzeige von Artikeln und der Anzeige von virtuellen Währungspaketen
   • einen Anzeigebereich für Artikelgruppen
   • einen Anzeigebereich für die Artikelliste
   • einen Anzeigebereich für die Liste der virtuellen Währungspakete

Das folgende Bild zeigt einen beispielhaften Seitenaufbau.

4. Öffnen Sie einen Level-Blueprint:
   1. Wählen Sie im Content Browser ein Level.
   2. Navigieren Sie im Hauptmenü zu Blueprints > Open Level Blueprint.
5. Sorgen Sie dafür, dass das Widget beim Levelstart angezeigt wird. Fügen Sie dazu, wie unten gezeigt, Knoten hinzu. Geben Sie im CreateWidget-Knoten das erstellte Widget an.

Widget-Ereignisbehandlung für Katalogseite hinzufügen

1. Wählen Sie im Hierarchy-Fenster eine Schaltfläche für den Wechsel zur Artikelliste aus.
2. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

3. Wählen Sie im Hierarchy-Fenster eine Schaltfläche für den Wechsel zur Liste der virtuellen Gegenstände aus.
4. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

5. Öffnen Sie eine Graph-Anzeige.
6. Implementieren Sie die Logik für den Wechsel zwischen den Listen. Fügen Sie dazu die Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Anzeige von Gruppen virtueller Gegenstände implementieren

Klasse für Artikelgruppe erstellen

1. Wechseln Sie zum Content Browser. Klicken Sie im dortigen Kontextmenü auf Blueprint Class.
2. Wählen Sie im Abschnitt All classes die Option Object aus, und klicken Sie auf Select.
3. Geben Sie BP_ItemGroupData als Klassenname an.
4. Öffnen Sie den Blueprint einer erstellten Klasse.
5. Klicken Sie im My Blueprint-Fenster auf Add New, und wählen Sie Variable aus.
6. Gehen Sie im Details-Feld wie folgt vor:

1. 1. Geben Sie im Variable Name-Feld GroupData an.
   2. Wählen Sie im Feld Variable Type die Option XsollaItemGroup aus.
   3. Aktivieren Sie die Kontrollkästchen Instance Editable und Expose on Spawn.

Widget für Artikelgruppe erstellen

1. Wechseln Sie zum Content Browser, und erstellen Sie ein UI-Verzeichnis. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint ein Element für den Namen der Artikelgruppe hinzu.

Das folgende Bild zeigt den beispielhaften Widget-Aufbau.

3. Öffnen Sie eine Graph-Anzeige.
4. Klicken Sie auf Class settings.
5. Navigieren Sie im Details-Fenster zu Interfaces > Implemented interfaces.
6. Klicken sie auf Add, und wählen Sie UserObjectListEntry aus. Dabei handelt es sich um eine standardmäßige UE-Benutzeroberfläche, die es dem UI-Primitive gestattet, ein für das Listenelement normales Verhalten zu implementieren.
7. Implementieren Sie die Logik zum Erstellen einer Artikelgruppe:

1. 1. Fügen Sie den EventOnListItemObjectSet-Knoten hinzu, um ein Listenelement erstellen und das Widget initialisieren zu können.
   2. Übermitteln Sie den Wert aus dem Objekt mit den Gruppendaten an das Element mit dem Gruppennamen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

1. 3. Implementieren Sie eine Logik für die Anzeige aller Artikel aus der Kategorie All. Bearbeiten Sie dazu einen Blueprint wie in der folgenden Abbildung gezeigt.

8. Implementieren Sie eine Logik zum Hervorheben einer in der Liste ausgewählten Artikelgruppe. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Liste der Artikelgruppen zur Katalogseite hinzufügen

1. Öffnen Sie den Widget-Blueprint der Katalogseite.
2. Fügen Sie das Element List View zum Anzeigebereich der Artikelgruppen hinzu.
3. Wählen Sie im Details-Fenster im Feld Entry Widget Class eine zuvor erstellte Klasse für eine Artikelgruppe aus.
4. Implementieren Sie eine Logik für das Hinzufügen von Artikeln zu Gruppen:

1. 1. Öffnen Sie eine Graph-Anzeige.
   2. Verknüpfen Sie einen mit dem XsollaLoginSubsystem-Objekt verbundenen UpdateItemGroups-SDK-Methodenaufruf mit dem EventConstruct-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
   3. Implementieren Sie die Logik für das Hinzufügen von Artikeln zur Gruppe. Die Aktion sollte während der erfolgreichen Aktualisierung des lokalen Zwischenspeichers der Virtuellen-Gegenstände-Gruppe erfolgen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

5. Implementieren Sie eine Logik für die Anzeige aller Artikel aus der Kategorie All. Bearbeiten Sie dazu einen Blueprint wie in der folgenden Abbildung gezeigt.

Anzeige von virtuellen Gegenständen erstellen

Klasse für Artikel erstellen

1. Wechseln Sie zum Content Browser. Klicken Sie im dortigen Kontextmenü auf Blueprint Class.
2. Wählen Sie im Abschnitt All classes die Option Object aus, und klicken Sie auf Select.
3. Geben Sie BP_CatalogItemData als Klassenname an.
4. Öffnen Sie den Blueprint einer erstellten Klasse.
5. Klicken Sie im My Blueprint-Fenster auf Add New, und wählen Sie Variable aus.
6. Gehen Sie im Details-Feld wie folgt vor:

1. 1. Geben Sie im CatalogItem-Feld Variable Name an.
   2. Wählen Sie im Feld StoreItem die Option Variable Type aus.
   3. Aktivieren Sie das Kontrollkästchen Instance Editable und Expose on Spawn.

Widget für Artikel erstellen

1. Wechseln Sie zum Content Browser, und erstellen Sie ein UI-Verzeichnis. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint folgende Benutzeroberflächenelemente hinzu:
   • Artikelname
   • Artikelpreis

Das folgende Bild zeigt den beispielhaften Widget-Aufbau.

3. Öffnen Sie eine Graph-Anzeige.
4. Klicken Sie auf Class settings.
5. Navigieren Sie im Details-Fenster zu Interfaces > Implemented interfaces.
6. Klicken sie auf Add, und wählen Sie UserObjectListEntry aus. Dabei handelt es sich um eine standardmäßige UE-Benutzeroberfläche, die es dem UI-Primitive gestattet, ein für das Listenelement normales Verhalten zu implementieren.
7. Implementieren Sie die Logik zum Erstellen einer Artikelgruppe:

1. 1. Fügen Sie den EventOnListItemObjectSet-Knoten hinzu, um ein Listenelement erstellen und das Widget initialisieren zu können.
   2. Übermitteln Sie die Werte aus dem Objekt mit den Artikeldaten an die Elemente mit dem Artikelnamen und ‑preis. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Artikelliste zur Katalogseite hinzufügen

1. Öffnen Sie den Widget-Blueprint der Katalogseite.
2. Fügen Sie das Element List View zum Anzeigebereich der Artikelliste hinzu.
3. Wählen Sie im Details-Fenster im Feld Entry Widget Class eine zuvor erstellte Klasse für einen Artikel aus.
4. Implementieren Sie eine Logik für das Hinzufügen von Artikeln zu Gruppen:

1. 1. Öffnen Sie eine Graph-Anzeige.
   2. Verknüpfen Sie einen mit dem UpdateVirtualItems-Objekt verbundenen XsollaLoginSubsystem-SDK-Methodenaufruf mit dem EventConstruct-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
   3. Implementieren Sie die Logik für das Hinzufügen von Artikeln zur Gruppe. Die Aktion sollte während der erfolgreichen Aktualisierung des lokalen Zwischenspeichers der Virtuellen-Gegenstände-Gruppe erfolgen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

5. Implementieren Sie eine Logik für das Hinzufügen von Artikeln zu Gruppen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Anzeige von virtuellen Gegenständen anhand von Gruppen implementieren

1. Öffnen Sie den Widget-Blueprint der Katalogseite.
2. Wählen Sie im Hierarchy-Fenster die Liste der Artikelgruppen aus.
3. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Item Clicked-Ereignis.

4. Öffnen Sie eine Graph-Anzeige.
5. Implementieren Sie die Logik für das Filtern von Artikeln anhand von Gruppen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Anzeige von Bundles implementieren

In dieser Anleitung werden Bundles und virtuelle Gegenstände in einer Liste angezeigt. Außerdem verwenden wir dasselbe Widget für die Anzeige eines einzelnen Bundles oder Artikels.

Bundles-Liste auf Katalogseiten hinzufügen

1. Öffnen Sie einen Katalogseiten-Blueprint.
2. Öffnen Sie eine Graph-Anzeige.
3. Ergänzen Sie die Logik für das Hinzufügen von Bundles zu einer Liste. Fügen Sie den UpdateBundles-SDK-Methodenrückruf zusammen mit dem UpdateVirtualItems-Methodenrückruf hinzu, wie in der folgenden Abbildung gezeigt.

Item-Widget fertigstellen

1. Öffnen Sie ein Artikel-Widget-Blueprint.
2. Fügen Sie eine Schaltfläche zum Anzeigen des Bundle-Inhalts neben dem Artikelnamen hinzu.

Das folgende Bild zeigt den beispielhaften Widget-Aufbau.

3. Öffnen Sie eine Graph-Anzeige.
4. Ergänzen Sie die Logik zum Erstellen eines Artikels. Fügen Sie dazu eine Anzeigebedingung für eine Schaltfläche zum Anzeigen von Bundle-Inhalten hinzu. Das folgende Bild dient dabei als Beispiel.

Logik für die Anzeige von Bundle-Inhalten hinzufügen

1. Öffnen Sie im Blueprint des Artikel-Widgets eine Designer-Anzeige.
2. Wählen Sie im Hierarchy-Fenster eine Schaltfläche für die Anzeige des Bundle-Inhalts aus.
3. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

4. Öffnen Sie eine Graph-Anzeige.
5. Implementieren Sie eine Logik für die Anzeige von Bundle-Inhalten (eine Liste der im Bundle enthaltenen Artikel und die Stückzahl jedes Artikels im Bundle). Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Anzeige von virtuellen Währungspaketen implementieren

Klasse für virtuelle Währungspakete erstellen

1. Wechseln Sie zum Content Browser. Klicken Sie im dortigen Kontextmenü auf Blueprint Class.
2. Wählen Sie im Abschnitt All classes die Option Object aus, und klicken Sie auf Select.
3. Geben Sie BP_VcPackItemData als Klassenname an.
4. Öffnen Sie den Blueprint einer erstellten Klasse.
5. Klicken Sie im My Blueprint-Fenster auf Add New, und wählen Sie Variable aus.
6. Gehen Sie im Details-Feld wie folgt vor:

1. 1. Geben Sie im PackItem-Feld Variable Name an.
   2. Wählen Sie im Feld VirtualCurrencyPackage die Option Variable Type aus.
   3. Aktivieren Sie das Kontrollkästchen Instance Editable und Expose on Spawn.

Widget für virtuelles Währungspaket erstellen

1. Wechseln Sie zum Content Browser, und erstellen Sie ein UI-Verzeichnis. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint folgende Benutzeroberflächenelemente hinzu:
   • Paketname
   • Paketpreis

Das folgende Bild zeigt den beispielhaften Widget-Aufbau.

3. Öffnen Sie eine Graph-Anzeige.
4. Klicken Sie auf Class settings.
5. Navigieren Sie im Details-Fenster zu Interfaces > Implemented interfaces.
6. Klicken sie auf Add, und wählen Sie UserObjectListEntry aus. Dabei handelt es sich um eine standardmäßige UE-Benutzeroberfläche, die es dem UI-Primitive gestattet, ein für das Listenelement normales Verhalten zu implementieren.
7. Implementieren Sie die Logik zum Erstellen einer Artikelgruppe:

1. 1. Fügen Sie den EventOnListItemObjectSet-Knoten hinzu, um ein Listenelement erstellen und das Widget initialisieren zu können.
   2. Übermitteln Sie den Wert aus dem Objekt mit den Paketdaten an das Element mit dem Paketnamen und ‑preis. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Liste der virtuellen Währungspakete auf Katalogseiten hinzufügen

1. Öffnen Sie den Widget-Blueprint der Katalogseite.
2. Fügen Sie das Element List View zum Anzeigebereich der Liste der virtuellen Währungspakete hinzu.
3. Wählen Sie im Details-Fenster im Feld Entry Widget Class eine zuvor erstellte Klasse für ein virtuelles Währungspaket aus.
4. Implementieren Sie die Logik für das Hinzufügen von Paketen zur Liste:

1. 1. Öffnen Sie eine GraphAnzeige.
   2. Verknüpfen Sie einen mit dem UpdateVirtualCurrencyPackage-Objekt verbundenen XsollaStoreSubsystem-Methodenaufruf mit dem EventConstruct-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
   3. Implementieren Sie die Logik für das Hinzufügen eines Pakets zur Liste. Die Aktion sollte während der erfolgreichen Aktualisierung des lokalen Zwischenspeichers des virtuellen Währungspakets erfolgen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Diese Anleitung erläutert, wie Sie mithilfe der SDK-Methoden den Verkauf von virtuellen Gegenständen gegen echte Währung implementieren.

Zuerst müssen Sie die Anzeige von virtuellen Gegenständen in einem Katalog implementieren. Das folgende Beispiel zeigt, wie Sie den Kauf von virtuellen Gegenständen implementieren. Die Konfiguration für andere Artikeltypen erfolgt auf ähnliche Weise.

Die Logik und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Eine mögliche Implementierungsoption für den Verkauf von Artikeln gegen echte Währung und die Anzeige eines Artikelkatalogs ist im Demoprojekt beschrieben.

Quellcode

Den Quellcode für diese Beispiele finden Sie bei GitHub.

Katalogseiten-Widget fertigstellen

1. Öffnen Sie das Katalogseiten-Widget.
2. Öffnen Sie eine Graph-Anzeige.
3. So öffnen Sie eine Zahlungsseite in einem Browser:
   1. Implementieren Sie den Erhalt eines Zahlungstokens:
      1. Fügen Sie den InitiatePurchase-Knoten hinzu, und verknüpfen Sie ihn mit dem SDK-Methodenaufruf FetchPaymenToken, der mit dem XsollaStoreSubsystem-Objekt verbunden ist.
      2. Übermitteln sie der FetchPaymenToken-Methode die SKU eines gekauften Artikels und einen Benutzerautorisierungstoken.

1. 2. Rufen Sie die mit dem LaunchPaymentConsole-Objekt verknüpfte SDK-Methode XsollaStoreSubsystem auf, und übermitteln Sie ihr einen Zahlungstoken.

Beispielhafte Implementierung des Zahlungsseitenaufrufs:

4. Implementieren Sie eine Kaufstatusprüfung nach dem Schließen des Browser-Fensters:
   1. Abonnieren Sie das BrowserClosed-Ereignis, um das Schließen des Browsers tracken zu können.
   2. Um den Kaufstatus zu prüfen, rufen Sie die SDK-Methode CheckOrder auf, und übermitteln Sie ihr einen Autorisierungstoken und eine Bestellnummer.

Beispielhafte Implementierung einer Kaufstatusprüfung:

Artikeldatenklasse erweitern

1. Öffnen Sie den Blueprint BP_CatalogItemData.
2. Klicken Sie im My Blueprint-Fenster auf Add New, und wählen Sie Variable aus.
3. Gehen Sie im Details-Fenster wie folgt vor:

1. 1. Geben Sie im CatalogWidget-Feld Variable Name an.
   2. Wählen Sie im Feld Variable Typedie Option W_StoreCatalog aus.
   3. Aktivieren Sie das Kontrollkästchen bei Instance Editable und Expose on Spawn.

Daraufhin erhält jedes Element der Liste einen Link zu einem übergeordneten Widget und kann dessen Methoden aufrufen.

Hinzufügen der Artikelliste zur Katalogseite fertigstellen

1. Öffnen Sie den Blueprint eines Katalogseiten-Widgets.
2. Öffnen Sie eine Graph-Anzeige.
3. Bearbeiten Sie die Logik für das Ausfüllen der Artikelliste wie in der folgenden Abbildung gezeigt.

Artikel-Widget fertigstellen

1. Öffnen Sie das Widget-Blueprint eines Artikels.
2. Fügen Sie eine Schaltfläche für den Artikelkauf hinzu.

Das folgende Bild zeigt den beispielhaften Widget-Aufbau.

3. Wählen Sie im Hierarchy-Fenster eine Schaltfläche für den Artikelkauf aus.
4. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

5. Öffnen Sie die Graph-Anzeige.
6. Implementieren Sie die Logik für den Klick auf eine Artikelkauf-Schaltfläche. Fügen Sie dazu die Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Wenn Sie daraufhin auf die Artikelkauf-Schaltfläche klicken, wird gemäß der im Katalogseiten-Widget implementierten Logik im Browser eine Zahlungsseite geöffnet.

Diese Anleitung erläutert, wie Sie mithilfe der SDK-Methoden den Verkauf von virtuellen Gegenständen gegen virtuelle Währung implementieren.

Zuerst müssen Sie die Anzeige von virtuellen Gegenständen in einem Katalog implementieren.

Hinweis

Das folgende Beispiel zeigt, wie Sie den Kauf von virtuellen Gegenständen implementieren. Die Konfiguration für andere Artikeltypen erfolgt auf ähnliche Weise.

Quellcode

Den Quellcode für diese Beispiele finden Sie bei GitHub.

Die Logik und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Eine mögliche Implementierungsoption für den Verkauf von Artikeln gegen echte Währung und die Anzeige eines Artikelkatalog ist im Demoprojekt beschrieben.

So implementieren Sie den Verkauf von virtuellen Gegenständen gegen virtuelle Währung:

1. Fügen Sie die Logik für den Artikelkauf zum Katalogseiten-Widget hinzu.
2. Fügen Sie einer Artikelklasse einen Mechanismus hinzu, um die Logik für den Artikelkauf initiieren zu können.
3. Verfeinern Sie das Hinzufügen einer Artikelliste zur Katalogseite.
4. Ergänzen Sie das Widget um eine Schaltfläche für den Artikelkauf.
5. Ergänzen Sie das Widget um die Logik des Artikelkaufs gegen virtuelle Währung:
   1. Öffnen Sie den Widget-Blueprint eines Artikels.
   2. Wechseln Sie zur Graph-Anzeige.
   3. Fügen Sie, wie unten gezeigt, Knoten hinzu.

Dadurch wird ein für einen Artikel angegebener Preis in virtueller Währung im Widget angezeigt und beim Kauf des Artikels berechnet. Wenn der Preis eines Artikels in mehreren virtuellen Währungen angegeben ist, wird die erste virtuelle Währung in der Liste für die Anzeige und den Kauf verwendet.

Dieses Tutorial erläutert, wie Sie die SDK-Methoden verwenden, um Artikel im Benutzerinventar anzuzeigen.

Die Logiken und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Ein möglicher Artikelkatalog im Rahmen einer Ingame-Shop-Implementierung ist im Demoprojekt beschrieben.

Quellcode

Den Quellcode für diese Beispiele finden Sie bei GitHub.

Widget für Inventarseite erstellen

1. Wechseln Sie zum Content Browser, und erstellen Sie ein UI-Verzeichnis.
2. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
3. Fügen Sie im Widget-Blueprint den Anzeigebereich für die Artikelliste hinzu.

Das folgende Bild zeigt den beispielhaften Imventaraufbau.

4. Öffnen Sie einen Level-Blueprint:
   1. Wählen Sie im Content Browser ein Level.
   2. Navigieren Sie im Hauptmenü zu Blueprints > Open Level Blueprint.
5. Sorgen Sie dafür, dass das Widget beim Levelstart angezeigt wird. Fügen Sie dazu, wie unten gezeigt, Knoten hinzu. Geben Sie im CreateWidget-Knoten das erstellte Widget an.

Klasse für Artikel erstellen

1. Wechseln Sie zum Content Browser. Klicken Sie im dortigen Kontextmenü auf Blueprint Class.
2. Wählen Sie im Abschnitt All classes die Option Object aus, und klicken Sie auf Select.
3. Geben Sie BP_UserInventoryItemData als Klassenname an.
4. Öffnen Sie den Blueprint einer erstellten Klasse.
5. Klicken Sie im My Blueprint-Fenster auf Add New, und wählen Sie Variable aus.
6. Gehen Sie im Details-Feld wie folgt vor:

1. 1. Geben Sie im Variable Name-Feld UserInventoryItem an.
   2. Wählen Sie im Feld Variable Type die Option InventoryItem aus.
   3. Aktivieren Sie das Kontrollkästchen Instance Editable und Expose on Spawn.

Widget für Artikel erstellen

1. Wechseln Sie zum Content Browser, und erstellen Sie ein UI-Verzeichnis. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint folgende Benutzeroberflächenelemente hinzu:
   • Artikelname
   • Artikeleigenschaft:
     • für Abonnements — Abonnementstatus (aktiv oder abgelaufen)
     • für aufbrauchbare — Artikelmenge
     • für nicht aufbrauchbare Artikel — keine Eigenschaft vorhanden

Das folgende Bild zeigt den beispielhaften Widget-Aufbau.

3. Öffnen Sie eine Graph-Anzeige.
4. Klicken Sie auf Class settings.
5. Navigieren Sie im Details-Fenster zu Interfaces > Implemented interfaces.
6. Klicken sie auf Add, und wählen Sie UserObjectListEntry aus. Dabei handelt es sich um eine standardmäßige UE-Benutzeroberfläche, die es dem UI-Primitive gestattet, ein für das Listenelement normales Verhalten zu implementieren.
7. Implementieren Sie die Logik für das Erstellen eines Artikels:

1. 1. Fügen Sie den OnListItemObjectSet-Knoten hinzu, um ein Listenelement erstellen und das Widget initialisieren zu können.
   2. Übermitteln Sie den Wert aus dem Objekt mit den Artikeldaten an das Element mit dem Artikelnamen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

1. 3. Implementieren Sie die Logik für die Definition eines Artikeltyps, indem Sie die Daten des Artikels entsprechend seines Typs an das Element mit den Artikeleigenschaften übermitteln. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

1. 4. Fügen Sie Logik für das Festlegen der Abonnementdauer hinzu. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Artikelliste zur Inventarseite hinzufügen

1. Öffnen Sie den Widget-Blueprint der Inventarseite.
2. Fügen Sie das Element List View zum Anzeigebereich der Artikelliste hinzu.
3. Wählen Sie im Details-Fenster im Feld Entry Widget Class eine zuvor erstellte Klasse für eine Artikelgruppe aus.
4. Implementieren Sie eine Logik für das Hinzufügen von Artikeln zu Gruppen:

1. 1. Öffnen Sie die Graph-Anzeige.
   2. Verknüpfen Sie einen mit dem XsollaInventorySubsystem-Objekt verbundenen Aufruf der SDK-Methoden UpdateInventory und UpdateSubscriptions nacheinander mit dem EventConstruct-Knoten, wie in der folgenden Abbildung gezeigt:

1. 3. Implementieren Sie die Logik für das Ausfüllen der Artikelliste. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Dieses Tutorial erläutert, wie Sie die SDK-Methoden verwenden, um das virtuelle Währungsguthaben in Ihrer App anzuzeigen.

Im Beispiel zeigen wir virtuelle Währungen und das zugehörige Guthaben im Benutzerinventar an. Daher sollten Sie zuvor die Artikelanzeige im Benutzerinventar implementieren.

Die Logiken und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Ein möglicher Artikelkatalog im Rahmen einer Ingame-Shop-Implementierung ist im Demoprojekt beschrieben.

Quellcode

Den Quellcode für diese Beispiele finden Sie bei GitHub.

Klasse für die Guthabenanzeige erstellen

1. Wechseln Sie zum Content Browser. Klicken Sie im dortigen Kontextmenü auf Blueprint Class.
2. Wählen Sie im Abschnitt All classes die Option Object aus, und klicken Sie auf Select.
3. Geben Sie BP_VcBalanceItemData als Klassenname an.
4. Öffnen Sie den Blueprint einer erstellten Klasse.
5. Klicken Sie im My Blueprint-Fenster auf Add New, und wählen Sie Variable aus.
6. Gehen Sie im Details-Feld wie folgt vor:

1. 1. Geben Sie im Variable Name-Feld VcBalanceItem an.
   2. Wählen Sie im Feld Variable Type die Option VirtualCurrencyBalance aus.
   3. Aktivieren Sie das Kontrollkästchen Instance Editable und Expose on Spawn.

Widget für die Guthabenanzeige erstellen

1. Wechseln Sie zum Content Browser, erstellen Sie ein UI-Verzeichnis, und navigieren Sie anschließend im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint folgende Benutzeroberflächenelemente hinzu:
   • Name der virtuellen Währung
   • Menge der virtuellen Währung

Das folgende Bild zeigt den beispielhaften Widget-Aufbau.

3. Öffnen Sie eine Graph-Anzeige.
4. Klicken Sie auf Class settings.
5. Navigieren Sie im Details-Fenster zu Interfaces > Implemented interfaces.
6. Klicken sie auf Add, und wählen Sie UserObjectListEntry aus. Dabei handelt es sich um eine standardmäßige UE-Benutzeroberfläche, die es dem UI-Primitive gestattet, ein für das Listenelement normales Verhalten zu implementieren.
7. Implementieren Sie die Logik für das Hinzufügen der virtuellen Währung zur Liste:

1. 1. Fügen Sie den EventOnListItemObjectSet-Knoten hinzu, um ein Listenelement zu erstellen und das Widget initialisieren zu können.
   2. Übermitteln Sie die Werte aus dem Objekt mit den Daten der virtuellen Währung an die Elemente mit dem Namen und der Menge der virtuellen Währung. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

Widget für die Inventaranzeige fertigstellen

1. Öffnen Sie den Widget-Blueprint der Inventarseite.
2. Fügen Sie das Element List View zum Anzeigebereich der Liste virtueller Währungen hinzu.
3. Wählen Sie im Details-Fenster im Feld Entry Widget Class eine zuvor erstellte Klasse für die Guthabenanzeige aus.
4. Implementieren Sie eine Logik für das Ausfüllen der Liste virtueller Währungen:

1. 1. Öffnen Sie eine Graph-Anzeige.
   2. Verknüpfen Sie einen mit dem XsollaInventorySubsystem-Objekt verbundenen UpdateVirtualCurrencyBalance-Methodenaufruf mit dem EventConstruct-Knoten.
   3. Implementieren Sie die Logik für das Ausfüllen der Liste virtueller Währungen. Die Aktion sollte während der erfolgreichen Aktualisierung des lokalen Zwischenspeichers des virtuellen Währungsguthabens erfolgen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.