Dieses Tutorial erläutert, wie sich mittels SDK-Methoden Folgendes implementieren lässt:

• Benutzerregistrierung
• erneutes Senden einer E-Mail zum Bestätigen der Registrierung
• Benutzeranmeldung
• Zurücksetzen des Benutzerpassworts

Quellcode

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

Benutzerregistrierung implementieren

Widget 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:
   • Benutzername-Feld
   • E-Mail-Adresse-Feld
   • Benutzerpasswort-Feld
   • Registrierungsschaltfläche

Das folgende Bild zeigt einen beispielhaften Seitenaufbau.

3. Öffnen Sie einen Level-Blueprint:
   1. Wählen Sie im Content Browser ein Level.
   2. Navigieren Sie im Hauptmenü zu Blueprints > Open Level Blueprint.
4. 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.

Ereignisbehandlung hinzufügen

1. Wählen Sie im Hierarchy-Fenster eine Registrierungsschaltfläche aus.
2. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

3. Öffnen Sie eine Graph-Anzeige.
4. Verknüpfen Sie einen RegisterUser-Methodenaufruf auf dem XsollaLoginSubsystem-Objekt mit dem OnClicked-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
5. Fügen Sie folgende Rückruffunktionen hinzu:
   • OnRegistered — wird nach erfolgreicher Registrierung aufgerufen
   • OnError — wird bei einem Problem aufgerufen

6. Starten Sie ein Level, um mit dem Widget-Debugging zu beginnen.

Beispielhafte Implementierung einer Ereignisbehandlung:

E-Mail für die Registrierungsbestätigung einrichten

Nach erfolgreicher Registrierung erhält der Benutzer eine E-Mail für die Registrierungsbestätigung an eine angegebene E-Mail-Adresse gesendet. Im Kundenportal können Sie die E-Mails individualisieren.

Wenn Sie eine Android-Anwendung entwickeln, richten Sie Deep-Links ein, damit Benutzer zur Anwendung weitergeleitet werden, nachdem sie die Registrierung bestätigt haben.

Anfrage zum erneuten Senden einer Registrierungsbestätigungs-E-Mail implementieren

Widget erstellen

1. Wechseln Sie zum Content Browser, und öffnen Sie ein UI-Verzeichnis. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint folgende Benutzeroberflächenelemente hinzu:
   • Benutzername-/E-Mail-Adresse-Feld
   • "E-Mail erneut senden"-Schaltfläche

Das folgende Bild zeigt einen beispielhaften Seitenaufbau.

3. Öffnen Sie einen Level-Blueprint:
   1. Wählen Sie im Content Browser ein Level.
   2. Navigieren Sie im Hauptmenü zu Blueprints > Open Level Blueprint.
4. Geben Sie im CreateWidget-Knoten das erstellte Widget an.

Ereignisbehandlung hinzufügen

1. Wählen Sie im Hierarchy-Fenster eine "E-Mail erneut senden"-Schaltfläche aus.
2. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

3. Öffnen Sie eine Graph-Anzeige.
4. Verknüpfen Sie einen ResendAccountConfirmationEmail-Methodenaufruf auf dem XsollaLoginSubsystem-Objekt mit dem OnClicked-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
5. Fügen Sie die Rückruffunktionen OnEmailResent und OnError hinzu.
6. Starten Sie ein Level, um mit dem Widget-Debugging zu beginnen.

Nach erfolgreicher Anfrage erhält der Benutzer eine E-Mail zur Registrierungsbestätigung an die bei der Registrierung angegebene E-Mail-Adresse.

Beispielhafte Implementierung einer Ereignisbehandlung:

Benutzeranmeldung implementieren

Widget erstellen

1. Wechseln Sie zum Content Browser, und öffnen Sie ein UI-Verzeichnis. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint folgende Benutzeroberflächenelemente hinzu:
   • Benutzername-Feld
   • Passwort-Feld
   • "Angemeldet bleiben"-Kontrollkästchen
   • Anmeldeschaltfläche

Das folgende Bild zeigt einen beispielhaften Seitenaufbau.

3. Öffnen Sie einen Level-Blueprint:
   1. Wählen Sie im Content Browser ein Level.
   2. Navigieren Sie im Hauptmenü zu Blueprints > Open Level Blueprint.
4. Geben Sie im CreateWidget-Knoten das erstellte Widget an.

Ereignisbehandlung hinzufügen

1. Wählen Sie im Hierarchy-Fenster eine Anmeldeschaltfläche aus.
2. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

3. Öffnen Sie eine Graph-Anzeige.
4. Verknüpfen Sie einen AuthenticateUser-Methodenaufruf auf dem XsollaLoginSubsystem-Objekt mit dem OnClicked-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
5. Fügen Sie die Rückruffunktionen OnAuthenticated und OnError hinzu.

6. Starten Sie ein Level, um mit dem Widget-Debugging zu beginnen.

Beispielhafte Implementierung einer Ereignisbehandlung:

Zurücksetzen von Passwörtern implementieren

Widget erstellen

1. Wechseln Sie zum Content Browser, und öffnen Sie ein UI-Verzeichnis. Navigieren Sie im Kontextmenü zu User Interface > Widget Blueprint.
2. Fügen Sie im Widget-Blueprint folgende Benutzeroberflächenelemente hinzu:
   • Benutzername-/E-Mail-Adresse-Feld
   • "Passwort zurücksetzen"-Schaltfläche

Das folgende Bild zeigt einen beispielhaften Seitenaufbau.

3. Öffnen Sie einen Level-Blueprint:
   1. Wählen Sie im Content Browser ein Level.
   2. Navigieren Sie im Hauptmenü zu Blueprints > Open Level Blueprint.
4. Geben Sie im CreateWidget-Knoten das erstellte Widget an.

Ereignisbehandlung hinzufügen

1. Wählen Sie im Hierarchy-Fenster eine "Passwort zurücksetzen"-Schaltfläche aus.
2. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

3. Öffnen Sie eine Graph-Anzeige.
4. Verknüpfen Sie einen ResetUserPassword-Methodenaufruf auf dem XsollaLoginSubsystem-Objekt mit dem OnClicked-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
5. Fügen Sie die Rückruffunktionen OnEmailSent und OnError hinzu.
6. Starten Sie ein Level, um mit dem Widget-Debugging zu beginnen.

Beispielhafte Implementierung einer Ereignisbehandlung:

Nach einer erfolgreichen Anfrage zum Zurücksetzen des Passworts erhält der Benutzer eine E-Mail mit einem entsprechenden Link. Im Kundenportal können Sie unter Ihr Login-Projekt > Sicherheit > OAuth 2.0 > OAuth 2.0-URIs für die Weiterleitung eine URL-Adresse oder einen Pfad festlegen, zu der bzw. dem der Benutzer nach einer erfolgreichen Authentifizierung, der Bestätigung seiner E-Mail-Adresse oder dem Zurücksetzen seines Passworts weitergeleitet wird.

Diese Anleitung erläutert, wie Sie mithilfe von SDK-Methoden die Benutzerregistrierung und ‑anmeldung über Social-Media-Konten implementieren.

Im Gegensatz zur Benutzerauthentifizierung über Benutzername/E-Mail-Adresse und Passwort müssen Sie für die Benutzerregistrierung keine separate Logik implementieren. Wenn die erstmalige Anmeldung des Benutzers über ein soziales Netzwerk erfolgt, wird automatisch ein neues Konto erstellt.

Wenn Sie in Ihrer Anwendung die Anmeldung über soziale Netzwerke als alternative Authentifizierungsmethode implementiert haben, wird das Social-Media-Konto automatisch mit einem bestehenden Benutzerkonto verknüpft, sofern die folgenden Bedingungen erfüllt sind:

• Ein Benutzer, der sich mittels Benutzername/E-Mail-Adresse und Passwort registriert hat, meldet sich über sein Social-Media-Konto bei Ihrer Anwendung an.
• Das soziale Netzwerk gibt eine E-Mail-Adresse zurück.
• Die E-Mail-Adresse des Benutzers in einem sozialen Netzwerk entspricht derselben E-Mail-Adresse, die für die Anmeldung bei Ihrer Anwendung verwendet wird.

Quellcode

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

Die Beispiele zeigen die Einrichtung der Benutzeranmeldung über ein Twitter-Konto. Andere soziale Netzwerke lassen sich auf dieselbe Weise einrichten.

Die Logiken und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Eine mögliche Option zur Implementierung eines Authentifizierungssystems ist im Demoprojekt beschrieben.

Widget 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 Schaltfläche für das Anmelden über das soziale Netzwerk hinzu.

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.

Ereignisbehandlung hinzufügen

1. Wählen Sie im Hierarchy-Fenster eine Anmeldeschaltfläche aus.
2. Klicken Sie im Details-Fenster auf das +-Symbol neben dem On Clicked-Ereignis.

3. Öffnen Sie eine Graph-Anzeige.
4. Implementieren Sie das Öffnen der Anmeldeseite in einem integrierten Browser:

1. 1. Verknüpfen Sie einen mit dem XsollaLoginSubsystem-Objekt verbundenen GetSocialAuthenticationUrl-Methodenaufruf mit dem OnClicked-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu. Übermitteln Sie den Wert Twitter an den Parameter ProviderName.
   2. Fügen Sie folgende Rückruffunktionen hinzu:
      • OnUrlReceived — wird beim erfolgreichen Empfang einer Seiten-URL aufgerufen. Die empfangene URL wird im Parameter Url übermittelt.
      • OnError — wird bei einem Problem aufgerufen.

5. Implementieren Sie die Benutzeranmeldung:
   1. Rufen Sie die mit dem XsollaLoginSubsystem-Objekt verbundene SDK-Methode LaunchSocialAuthentication auf.
   2. Übermitteln Sie die URL einer Anmeldeseite.

6. Um einen Token abzurufen, tracken Sie die Änderung der Anmeldeseiten-URL:
   1. Implementieren Sie das Schließen eines Browsers nach der erfolgreichen Anmeldung.
   2. Rufen Sie die Methode OnSocialAuthCompleted auf, und abonnieren Sie ein BrowserClosed-Ereignis.

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 GetItemGroups-SDK-Methodenaufruf mit dem EventConstruct-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
   3. Implementieren Sie die Logik, die Artikel Gruppen zuteilt. Die Aktion sollte während der erfolgreichen Aktualisierung 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 XsollaLoginSubsystem-Objekt verbundenen GetVirtualItems-SDK-Methodenaufruf mit dem EventConstruct-Knoten, und fügen Sie die Übermittlung der von Benutzern eingegebenen Daten hinzu.
   3. Implementieren Sie die Logik, die Artikel Gruppen zuteilt. Die Aktion sollte während der erfolgreichen Aktualisierung der Virtuellen-Gegenstände-Gruppe erfolgen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.

5. Implementieren Sie eine Logik, die prüft, ob ein Artikel einer bestimmten Gruppe zugeordnet ist. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung dargestellt.

6. Implementieren Sie eine Logik, die Artikel Gruppen zuteilt. 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 GetBundles-SDK-Methodenrückruf sowie den GetVirtualItems-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 Graph-Anzeige.
   2. Verknüpfen Sie einen mit dem XsollaStoreSubsystem-Objekt verbundenen GetVirtualCurrencyPackage-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 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 FetchPaymentToken, der mit dem XsollaStoreSubsystem-Objekt verbunden ist.
      2. Übermitteln sie der FetchPaymentToken-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.

Beispiel für das Öffnen der Zahlungsseite und die Implementierung des Zahlungsstatusempfangs:

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 virtuelle Währung und die Anzeige eines Artikelkatalogs 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.

7. Klicken Sie im Anzeigebereich My Blueprint auf Add New, und wählen Sie Variable aus.
8. Gehen Sie im Anzeigebereich Details wie folgt vor:
   1. Geben Sie im Feld Variable Name die Bezeichnung ExpiresIn an.
   2. Wählen Sie im Feld Variable Type die Option Integer64 aus.
   3. Aktivieren Sie die 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 zeitlich begrenzte Artikel – Artikelstatus (aktiv oder abgelaufen)
     • für aufbrauchbare Artikel – 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.

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 die mit dem XsollaInventorySubsystem-Objekt verbundenen SDK-Methodenaufrufe GetInventory und GetTimeLimitedItems 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.

1. 4. Fügen Sie Logik für das Festlegen der Verfallsdauer von zeitlich begrenzten Artikeln hinzu. 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 GetVirtualCurrencyBalance-Methodenaufruf mit dem EventConstruct-Knoten.
   3. Implementieren Sie die Logik für das Befüllen der Liste virtueller Währungen. Die Aktion sollte während der erfolgreichen Aktualisierung des virtuellen Währungsguthabens erfolgen. Fügen Sie dazu Knoten hinzu, wie in der folgenden Abbildung gezeigt.