SDK für Cocos Creator / SDK aufseiten der Anwendung integrieren
  Alle Dokumentation

SDK für Cocos Creator

SDK aufseiten der Anwendung integrieren

  1. Gestalten Sie eine Benutzeroberfläche für das Anmeldesystem, den Ingame-Shop und sonstige Seiten Ihrer Anwendung.
  2. Implementieren Sie in Ihrer Anwendungslogik mithilfe von SDK-Methoden die Benutzerauthentifizierung, die Anzeige des Shops, den Kaufvorgang und mehr.
Hinweis
Sie können Ihre eigene Lösung erstellen. Befolgen Sie dazu das Cocos Creator-Handbuch, oder nutzen Sie die Demoszene als Vorlage.
Die grundlegenden SDK-Funktionen sind in den folgenden Schritt-für-Schritt-Tutorials erläutert:Die verwendeten Skripte finden Sie im SDK-Verzeichnis <xsollaExtention>/assets/scripts/samples.
Hinweis
Die Skripte in den Tutorials verwenden SDK-Methoden. Stellen Sie daher sicher, dass Sie das SDK korrekt installieren und initialisieren.

Benutzerregistrierung und ‑anmeldung über Benutzername/E-Mail-Adresse und Passwort

Diese Anleitung erläutert, wie sich mittels SDK-Methoden Folgendes implementieren lässt:

Sie können Benutzer anhand ihres Benutzernamens oder ihrer E-Mail-Adresse authentifizieren. In den folgenden Beispielen authentifizieren wir Benutzer anhand ihres Benutzernamens, während die E-Mail-Adresse zur Bestätigung der Registrierung und zum Zurücksetzen des Passworts verwendet wird.

Hinweis
Wenn Sie ein Login-Widget auf Ihrer Website verwenden (z. B. in einem Onlineshop), müssen auf Ihrer Website und in Ihrer Anwendung dieselben Benutzerauthentifizierungsmethoden implementiert sein. Das Widget verlangt für die Authentifizierung standardmäßig die E-Mail-Adresse. Um die Anmeldung über Benutzername zu ermöglichen, wenden Sie sich an Ihren Customer Success Manager. oder senden Sie eine E-Mail an csm@xsolla.com.

Benutzerregistrierung implementieren

Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine Registrierungsseite und fügen Sie folgende Elemente hinzu:

  • Benutzername-Feld
  • E-Mail-Adresse-Feld
  • Benutzerpasswort-Feld
  • Registrieren-Schaltfläche

Beispielhafte Seitenstruktur:

Skriptkomponente "Registrierung" erstellen

  1. Erstellen Sie eine RegistrationComponent, und fügen Sie die folgenden Properties hinzu:
    • usernameEditBox
    • emailEditBox
    • passwordEditBox
    • signUpButton – optional. Dient dazu, eine Rückruffunktion mittels Code an die Schaltfläche zu binden

  1. Fügen Sie der Klasse RegistrationComponent eine Methode hinzu, die beim Klick auf SignUpButton aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.
  2. Fügen Sie die RegistrationComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  3. Binden Sie die Szenenelemente an die Property der RegistrationComponent, wie in der Abbildung gezeigt:

  1. Binden Sie einen Rückruf an die Registrieren-Schaltfläche auf eine der folgenden Arten:
    • über das Inspector-Fenster, wie in der Abbildung unten gezeigt
    • durch Einfügen des folgenden Codeblocks in das Seitenskript

Rückruf per Inspector-Fenster binden:

Rückruf per Code binden:

Copy
Full screen
Small screen
  • typescript
start() {
 this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
 }
Hinweis

In den Skriptbeispielen rufen die Methoden onComplete und onError die Standardmethode console.log auf. Im Falle eines Fehlers werden der Fehlercode und die ‑beschreibung im Parameter error übermittelt.

Sie können weitere Aktionen hinzufügen, z. B. eine Anmeldeseite nach erfolgreicher Registrierung oder eine Seite für das erneute Senden einer Registrierungsbestätigungs-E-Mail öffnen.

Beispielhaftes Klassenskript (RegistrationComponent):
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('RegistrationComponent')
export class RegistrationComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(EditBox)
    emailEditBox: EditBox;

    @property(EditBox)
    passwordEditBox: EditBox;

    @property(Button)
    signUpButton: Button;

    start() {
        this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
    }

    onSignUpClicked() {
        XsollaAuth.registerNewUser(this.usernameEditBox.string, this.passwordEditBox.string, this.emailEditBox.string, 'xsollatest', null, null, token => {
            if(token != null) {
                console.log(`Successful login. Token - ${token.access_token}`);
            }
            else {
                console.log('Thank you! We have sent you a confirmation email');
            }
        }, err => {
            console.log(err);
        });
    }
}

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 App entwickeln, sollten Sie Deep-Links einrichten, damit die Benutzer zur Anwendung weitergeleitet werden, nachdem sie die Registrierung bestätigt haben.

Hinweis
Sie können die Registrierungsbestätigung per E-Mail-Adresse deaktivieren, wenn Ihre Sicherheitsstandards dies gestatten. Wenden Sie sich dafür an Ihren Customer Success Manager oder kontaktieren Sie uns unter csm@xsolla.com.

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

Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine Seite zum erneuten Senden einer Bestätigungs-E-Mail und fügen Sie folgende Elemente hinzu:

  • Benutzername-/E-Mail-Adresse-Feld
  • “E-Mail erneut senden”-Schaltfläche

Beispielhafte Seitenstruktur:

Skriptkomponente "E-Mail erneut senden" erstellen

  1. Erstellen Sie eine ResendConfirmationEmailComponent, und fügen Sie die folgenden Properties hinzu:
    • usernameTextBox
    • resendEmailButton – optional. Dient dazu, eine Rückruffunktion mittels Code an die Schaltfläche zu binden

  1. Fügen Sie der Klasse ResendConfirmationEmailComponent eine Methode hinzu, die beim Klick auf ResendEmail aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.
  2. Fügen Sie die ResendConfirmationEmailComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  3. Binden Sie die Szenenelemente an die Property der ResendConfirmationEmailComponent, wie in der Abbildung gezeigt:

  1. Binden Sie einen Rückruf an die "Bestätigungs-E-Mail erneut senden"-Schaltfläche auf eine der folgenden Arten:
    • über das Inspector-Fenster, wie in der Abbildung unten gezeigt
    • durch Einfügen des folgenden Codeblocks in das Skript der Seite, auf der die Möglichkeit besteht, eine Bestätigungs-E-Mail erneut zu senden

Rückruf per Inspector-Fenster binden:

Rückruf per Code binden:

Copy
Full screen
Small screen
  • typescript
start() {
	this.resendEmailButton.node.on(Button.EventType.CLICK, this.onResendEmailClicked, this);
  }

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

Hinweis

In den Skriptbeispielen rufen die Methoden onComplete und onError die Standardmethode console.log auf. Sie können weitere Aktionen hinzufügen.

Im Falle eines Fehlers werden der Fehlercode und die ‑beschreibung im Parameter error übermittelt.

Beispielhaftes Klassenskript (ResendConfirmationEmailComponent):
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('ResendConfirmationEmailComponent')
export class ResendConfirmationEmailComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(Button)
    resendEmailButton: Button;

    start() {
        this.resendEmailButton.node.on(Button.EventType.CLICK, this.onResendEmailClicked, this);
    }

    onResendEmailClicked() {
        XsollaAuth.resendAccountConfirmationEmail(this.usernameEditBox.string, 'xsollatest', null, () => {
            console.log('A verification link has been successfully sent to your email');
        }, err => {
            console.log(err);
        });
    }
}

Benutzeranmeldung implementieren

Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine Anmeldeseite und fügen Sie folgende Elemente hinzu:

  • Benutzername-Feld
  • Passwort-Feld
  • “Angemeldet bleiben”-Schalter
  • Anmeldeschaltfläche

Beispielhafte Seitenstruktur:

Skriptkomponente "Anmelden" erstellen

  1. Erstellen Sie eine LoginComponent, und fügen Sie die folgenden Properties hinzu:
    • usernameEditBox
    • passwordEditBox
    • remeberMeToggle
    • loginButton – optional. Dient dazu, eine Rückruffunktion mittels Code an die Schaltfläche zu binden

  1. Fügen Sie der Klasse LoginComponent eine Methode hinzu, die beim Klick auf LoginButton aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.
  2. Fügen Sie die LoginComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  3. Binden Sie die Szenenelemente an die Property der LoginComponent, wie in der Abbildung gezeigt:

  1. Binden Sie einen Rückruf an die Anmeldeschaltfläche auf eine der folgenden Arten:
    • über das Inspector-Fenster, wie in der Abbildung unten gezeigt
    • durch Einfügen des folgenden Codeblocks in das Seitenskript

Rückruf per Inspector-Fenster binden:

Rückruf per Code binden:

Copy
Full screen
Small screen
  • typescript
start() {
	 this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
  }
Hinweis

In den Skriptbeispielen rufen die Methoden onComplete und onError die Standardmethode console.log auf. Sie können weitere Aktionen hinzufügen.

Im Falle eines Fehlers werden der Fehlercode und die ‑beschreibung im Parameter error übermittelt.

Beispielhaftes Klassenskript (LoginComponent):
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox, Toggle } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('LoginComponent')
export class LoginComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(EditBox)
    passwordEditBox: EditBox;

    @property(Toggle)
    remeberMeToggle: Toggle;

    @property(Button)
    loginButton: Button;

    start() {
        this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
    }

    onLoginClicked() {
        XsollaAuth.authByUsernameAndPassword(this.usernameEditBox.string, this.passwordEditBox.string, this.remeberMeToggle.isChecked, token => {
            console.log('Successful login. Token - ${token.access_token}');
        }, err => {
            console.log(err);
        });
    }
}

Zurücksetzen von Passwörtern implementieren

Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine “Passwort zurücksetzen”-Seite und fügen Sie Folgendes hinzu:

  • Benutzername-Feld
  • “Passwort zurücksetzen”-Schaltfläche

Beispielhafte Seitenstruktur:

Skriptkomponente "Passwort zurücksetzen" erstellen

  1. Erstellen Sie eine ResetPasswordComponent, und fügen Sie die folgenden Properties hinzu:
    • usernameEditBox
    • resetPasswordButton – optional. Dient dazu, eine Rückruffunktion mittels Code an die Schaltfläche zu binden

  1. Fügen Sie der Klasse ResetPasswordComponent eine Methode hinzu, die beim Klick auf ResetPassword aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.
  2. Fügen Sie die ResetPasswordComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  3. Binden Sie die Szenenelemente an die Property der ResetPasswordComponent, wie in der Abbildung gezeigt:

  1. Binden Sie einen Rückruf an die "Passwort zurücksetzen"-Schaltfläche auf eine der folgenden Arten:
    • über das Inspector-Fenster, wie in der Abbildung unten gezeigt
    • durch Einfügen des folgenden Codeblocks in das Seitenskript

Rückruf per Inspector-Fenster binden:

Rückruf per Code binden:

Copy
Full screen
Small screen
  • typescript
start() {
        this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
    }
Hinweis

In den Skriptbeispielen rufen die Methoden onComplete und onError die Standardmethode console.log auf. Sie können weitere Aktionen hinzufügen.

Im Falle eines Fehlers werden der Fehlercode und die ‑beschreibung im Parameter error übermittelt.

Beispielhaftes Klassenskript (ResetPasswordComponent):
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component, EditBox } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
const { ccclass, property } = _decorator;


@ccclass('ResetPasswordComponent')
export class ResetPasswordComponent extends Component {

    @property(EditBox)
    usernameEditBox: EditBox;

    @property(Button)
    resetPasswordButton: Button;

    start() {
        this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
    }

    onResetPasswordClicked() {
        XsollaAuth.resetPassword(this.usernameEditBox.string, null, () => {
            console.log('Follow the instructions we sent to your email');
        }, err => {
            console.log(err);
        });
    }
}

Anmeldung über soziale Netzwerke

Hinweis
Das SDK für Cocos Creator unterstützt die soziale Anmeldung über soziale Netzwerke (“Social Login”) nur für Android- und iOS-Builds.

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.

Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

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

Die Beispiele vermitteln die grundlegende Funktionsweise der SKD-Methoden. Anwendungen erfordern in der Regel komplexere Benutzeroberflächen und Logiken.

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine Social-Media-Anmeldeseite, und fügen Sie die Schaltfläche für das Anmelden über soziale Netzwerke hinzu.

Beispielhafte Seitenstruktur:

Skriptkomponente "Anmelden über soziale Netzwerke" erstellen

  1. Erstellen Sie eine SocialLoginComponent. Fügen Sie die Property socialLoginButton hinzu, um eine Rückruffunktion an die Social-Media-Anmeldeschaltfläche zu binden.
  2. Fügen Sie der Klasse SocialLoginComponent eine Methode hinzu, die beim Klick auf SocialLogin aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.

  1. Fügen Sie die SocialLoginComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  2. Binden Sie die SocialLogin-Schaltfläche an die Property socialLoginButton der SocialLoginComponent, wie in der Abbildung gezeigt:

  1. Binden Sie einen Rückruf an die Social-Media-Anmeldeschaltfläche auf eine der folgenden Arten:
    • über das Inspector-Fenster, wie in der Abbildung unten gezeigt
    • durch Einfügen des folgenden Codeblocks in das Seitenskript

Rückruf per Inspector-Fenster binden:

Rückruf per Code binden:

Copy
Full screen
Small screen
  • typescript
start() {
        this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
}
Hinweis

In den Skriptbeispielen rufen die Methoden onComplete, onCanceled und onError die Standardmethode console.log auf. Im Falle eines Fehlers werden der Fehlercode und die ‑beschreibung im Parameter error übermittelt.

Sie können weitere Aktionen hinzufügen, z. B. eine Anmeldeseite nach erfolgreicher Registrierung oder eine Seite für das erneute Senden einer Registrierungsbestätigungs-E-Mail öffnen.

Beispielhaftes Klassenskript (SocialLoginComponent):
Copy
Full screen
Small screen
  • typescript
import { _decorator, Button, Component } from 'cc';
import { Token, XsollaAuth } from '../../api/XsollaAuth';
const { ccclass, property } = _decorator;


namespace authorization {

    @ccclass('SocialLoginComponent')
    export class SocialLoginComponent extends Component {

        @property(Button)
        socialLoginButton: Button;


        start() {
            this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
        }


        onSocialLoginClicked() {
            XsollaAuth.authSocial('facebook', (token: Token) => {
                console.log(`Successful social authentication. Token - ${token.access_token}`);
            }, () => {
                console.log('Social auth was canceled');
            }, (error:string) => {
                console.log(error);
            });
        }
    }
}

Artikelkatalog anzeigen

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

  • virtuelle Gegenstände
  • Bundles
  • Pakete mit virtueller Währung

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.

Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

Hinweis

Im Rahmen des Beispiels wird für jeden Artikel in einem Katalog Folgendes angezeigt:

  • Name
  • Beschreibung
  • Preis
  • Bild

Auch andere Informationen über den Artikel lassen sich anzeigen, sofern diese Informationen in einem Ingame-Shop hinterlegt sind.

Anzeige von virtuellen Gegenständen implementieren

Artikel-Widget erstellen

  1. Erstellen Sie ein Prefab. Wählen Sie dazu die Option Create > Node Prefab aus dem Kontextmenü des Ordners aus.
  2. Öffnen Sie das erstellte Prefab.
  3. Fügen Sie eine UITransform-Komponente in das Stammverzeichnis des Prefabs ein, wie in der folgenden Abbildung gezeigt, und legen Sie die Inhaltsgröße fest.

  1. Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
    • Widget-Hintergrundbild
    • Artikelname
    • Artikelbeschreibung
    • Artikelpreis
    • Artikelbild

Beispielhafte Widget-Struktur:

Artikel-Widget-Skript erstellen

  1. Erstellen Sie eine StoreItemComponent, und fügen Sie die folgenden Properties hinzu:
    • iconSprite
    • itemNameLabel
    • itemDescriptionLabel
    • priceLabel

  1. Fügen Sie der StoreItemComponent-Klasse eine init-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
  2. Hängen Sie die StoreItemComponent an den Stammknoten des Prefabs an.
  3. Binden Sie das Prefab-Element an die Properties der StoreItemComponent, wie in der Abbildung gezeigt:

Beispielhaftes Widget-Skript (StoreItemComponent):

Copy
Full screen
Small screen
  • typescript
import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreItem } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
const { ccclass, property } = _decorator;


@ccclass('StoreItemComponent')
export class StoreItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    private _data: StoreItem;

    init(data: StoreItem) {

        this._data = data;

        this.itemNameLabel.string = data.name;
        this.itemDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine Artikelkatalogseite, und fügen Sie ihr das Element ScrollView hinzu.

Beispielhafte Seitenstruktur:

Damit die ScrollView zum erstellten StoreItem-Prefab passt, müssen Sie dessen Größe festlegen:

  1. Ändern Sie den Wert des Parameters ContentSize im ScrollView-Knoten und im inneren view-Knoten.
  2. Binden Sie die Komponente Layout und den content-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:
    • Type == vertical
    • ResizeMode == Container

Skriptkomponente "Artikelkatalog" erstellen

  1. Erstellen Sie eine ItemsCatalogComponent, und fügen Sie die folgenden Properties hinzu:
    • itemsScrollView
    • storeItemPrefab

  1. Fügen Sie der Klasse ItemsCatalogComponent die Lifecycle-Funktion start und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
  2. Fügen Sie die ItemsCatalogComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  3. Binden Sie die Prefab-Elemente an die Properties der ItemsCatalogComponent, wie in der Abbildung gezeigt:

Beispielhaftes Klassenskript (ItemsCatalogComponent):

Copy
Full screen
Small screen
  • typescript
import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { StoreItemComponent } from './StoreItemComponent';
const { ccclass, property } = _decorator;


@ccclass('ItemsCatalogComponent')
export class ItemsCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    storeItemPrefab: Prefab;

    start() {
        XsollaCatalog.getCatalog(null, null, [], itemsData => {
            for (let i = 0; i < itemsData.items.length; ++i) {
                let storeItem = instantiate(this.storeItemPrefab);
                this.itemsScrollView.content.addChild(storeItem);
                storeItem.getComponent(StoreItemComponent).init(itemsData.items[i]);
            }
        });
    }
}

Beispielhaftes Verarbeitungsergebnis des Skripts:

Anzeige von Bundles implementieren

Bundle-Widget erstellen

  1. Erstellen Sie ein Prefab. Wählen Sie dazu die Option Create > Node Prefab aus dem Kontextmenü des Ordners aus.
  2. Öffnen Sie das erstellte Prefab.
  3. Fügen Sie eine UITransform-Komponente in das Stammverzeichnis des Prefabs ein, wie in der folgenden Abbildung gezeigt, und legen Sie die Inhaltsgröße fest.

  1. Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
    • Widget-Hintergrundbild
    • Bundle-Name
    • Bundle-Beschreibung
    • Bundle-Preis
    • Bundle-Bild
    • Beschreibung des Bundle-Inhalts (Artikel und deren Stückzahl)

Beispielhafte Widget-Struktur:

Bundle-Widget-Skript erstellen

  1. Erstellen Sie eine BundleItemComponent, und fügen Sie die folgenden Properties hinzu:
    • iconSprite
    • bundleNameLabel
    • bundleDescriptionLabel
    • priceLabel
    • contentDescriptionlabel

  1. Fügen Sie der BundleItemComponent-Klasse eine init-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
  2. Hängen Sie die BundleItemComponent an den Stammknoten des Prefabs an.
  3. Binden Sie das Prefab-Element an die Properties der BundleItemComponent, wie in der Abbildung gezeigt:

Beispielhaftes Widget-Skript (BundleItemComponent):

Copy
Full screen
Small screen
  • typescript
import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreBundle } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
const { ccclass, property } = _decorator;


@ccclass('BundleItemComponent')
export class BundleItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    bundleNameLabel: Label;

    @property(Label)
    bundleDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    @property(Label)
    contentDescriptionLabel: Label;

    init(data: StoreBundle) {

        this.bundleNameLabel.string = data.name;
        this.bundleDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });

        this.contentDescriptionLabel.string = 'This bundle includes '+ data.content.length + ' items: ';
        var bandles = data.content.map(bundle => bundle.name).join(', ');
        this.contentDescriptionLabel.string += bandles;
    }
}

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine Bundle-Katalogseite, und fügen Sie ihr das Element ScrollView hinzu.

Beispielhafte Seitenstruktur:

Damit die ScrollView zum erstellten BundleItem-Prefab passt, müssen Sie dessen Größe festlegen:

  1. Ändern Sie den Wert des Parameters ContentSize im ScrollView-Knoten und im inneren view-Knoten.
  2. Binden Sie die Komponente Layout und den content-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:
    • Type == vertical
    • ResizeMode == Container

Skriptkomponente "Bundles-Katalog" erstellen

  1. Erstellen Sie eine BundlesCatalogComponent, und fügen Sie die folgenden Properties hinzu:
    • itemsScrollView
    • bundleItemPrefab

  1. Fügen Sie der Klasse BundlesCatalogComponent die Lifecycle-Funktion start und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
  2. Fügen Sie die CurrencyBalanceComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  3. Binden Sie die Prefab-Elemente an die Properties der BundlesCatalogComponent, wie in der Abbildung gezeigt:

Beispielhaftes Klassenskript (BundlesCatalogComponent):

Copy
Full screen
Small screen
  • typescript
import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { BundleItemComponent } from './BundleItemComponent';
const { ccclass, property } = _decorator;


@ccclass('BundlesCatalogComponent')
export class BundlesCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    bundleItemPrefab: Prefab;

    start() {
        XsollaCatalog.getBundleList(null, null, [], itemsData => {
        for (let i = 0; i < itemsData.items.length; ++i) {
                let bundleItem = instantiate(this.bundleItemPrefab);
                this.itemsScrollView.content.addChild(bundleItem);
                bundleItem.getComponent(BundleItemComponent).init(itemsData.items[i]);
            }
        });
    }
}

Beispielhaftes Verarbeitungsergebnis des Skripts:

Anzeige des Katalogs mit virtuellen Währungspaketen implementieren

Widget für virtuelle Währungspakete erstellen

  1. Erstellen Sie ein Prefab. Wählen Sie dazu die Option Create > Node Prefab aus dem Kontextmenü des Ordners aus.
  2. Öffnen Sie das erstellte Prefab.
  3. Fügen Sie eine UITransform-Komponente in das Stammverzeichnis des Prefabs ein, wie in der folgenden Abbildung gezeigt, und legen Sie die Inhaltsgröße fest.

  1. Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
    • Widget-Hintergrundbild
    • Währungsname
    • Währungsbeschreibung
    • Währungspreis
    • Währungsbild

Beispielhafte Widget-Struktur:

Widget-Skript für virtuelle Währungspakete erstellen

  1. Erstellen Sie eine CurrencyPackageItemComponent, und fügen Sie die folgenden Properties hinzu:
    • iconSprite
    • currencyNameLabel
    • currencyDescriptionLabel
    • priceLabel

  1. Fügen Sie der CurrencyPackageItemComponent-Klasse eine init-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
  2. Hängen Sie die CurrencyPackageItemComponent an den Stammknoten des Prefabs an.
  3. Binden Sie das Prefab-Element an die Properties der CurrencyPackageItemComponent, wie in der Abbildung gezeigt:

Beispielhaftes Widget-Skript (CurrencyPackageItemComponent):

Copy
Full screen
Small screen
  • typescript
import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { VirtualCurrencyPackage } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
const { ccclass, property } = _decorator;


@ccclass('CurrencyPackageItemComponent')
export class CurrencyPackageItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    currencyNameLabel: Label;

    @property(Label)
    currencyDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    init(data: VirtualCurrencyPackage) {

        this.currencyNameLabel.string = data.name;
        this.currencyDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

Benutzeroberfläche erstellen

Erstellen Sie eine Szene für eine “Virtuelles Währungspaket”-Katalogseite, und fügen Sie ihr das Element ScrollView hinzu.

Beispielhafte Seitenstruktur:

Damit die ScrollView zum erstellten CurrencyPackageItem-Prefab passt, müssen Sie dessen Größe festlegen:

  1. Ändern Sie den Wert des Parameters ContentSize im ScrollView-Knoten und im inneren view-Knoten.
  2. Binden Sie die Komponente Layout und den content-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:
    • Type == vertical
    • ResizeMode == Container

Skriptkomponente "Währungspaketekatalog" erstellen

  1. Erstellen Sie eine CurrencyPackagesCatalogComponent, und fügen Sie die folgenden Properties hinzu:
    • itemsScrollView
    • currencyPackageItemPrefab

  1. Fügen Sie der Klasse CurrencyPackagesCatalogComponent die Lifecycle-Funktion start und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
  2. Fügen Sie die CurrencyPackagesCatalogComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
  3. Binden Sie die Prefab-Elemente an die Properties der CurrencyPackagesCatalogComponent, wie in der Abbildung gezeigt:

Beispielhaftes Klassenskript (CurrencyPackagesCatalogComponent):

Copy
Full screen
Small screen
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { CurrencyPackageItemComponent } from './CurrencyPackageItemComponent';
const { ccclass, property } = _decorator;


@ccclass('CurrencyPackagesCatalogComponent')
export class CurrencyPackagesCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    currencyPackageItemPrefab: Prefab;

    start() {
        XsollaCatalog.getVirtualCurrencyPackages(null, null, [], itemsData => {
        for (let i = 0; i < itemsData.items.length; ++i) {
                let currencyPackageItem = instantiate(this.currencyPackageItemPrefab);
                this.itemsScrollView.content.addChild(currencyPackageItem);
                currencyPackageItem.getComponent(CurrencyPackageItemComponent).init(itemsData.items[i]);
            }
        });
    }
}

    Beispielhaftes Verarbeitungsergebnis des Skripts:

    Virtuelle Gegenstände gegen echte Währung verkaufen

    In diesem Abschnitt wird erklärt, wie Sie mit den 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.

    Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

    Achtung

    Im Skriptbeispiel verwenden wir zur Anmeldung die Anmeldedaten eines Demo-Kontos (Benutzername: xsolla, Passwort: xsolla). Dieses Konto ist nur für das Demoprojekt verfügbar.

    Im Skriptbeispiel ist keine seitenweise Anzeige von Artikeln im Katalog (Paginierung) implementiert. Nutzen Sie die Parameter offset und limit der SDK-Methode getCatalog, um eine Paginierung zu implementieren. Maximal können 50 Artikel pro Seite angezeigt werden. Wenn der Katalog mehr als 50 Artikel enthält, ist eine Paginierung erforderlich.

    Artikel-Widget fertigstellen

    Fügen Sie dem Artikel-Widget eine Kaufen-Schaltfläche hinzu und konfigurieren Sie deren Erscheinungsbild.
    Hinweis
    In dem Beispiel wird die modifizierte Klasse in RC_StoreItemComponent geändert.
    Beispielhafte Widget-Struktur:

    Artikel-Widget-Skript fertigstellen

    1. Fügen Sie der RC_StoreItemComponent die Property buyButton hinzu, um mithilfe von Code eine Rückruffunktion an die Kaufen-Schaltfläche zu binden.
    2. Fügen Sie der Klasse RC_StoreItemComponent eine Methode hinzu, die beim Klick auf BuyButton aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.
    3. Binden Sie einen Rückruf an die Kaufen-Schaltfläche auf eine der folgenden Arten:

      • über das Inspector-Fenster, wie in der Abbildung unten gezeigt
      • durch Einfügen des folgenden Codeblocks in das Seitenskript

    Rückruf per Inspector-Fenster binden:

    Rückruf per Code binden:

    Copy
    Full screen
    Small screen
    • typescript
    start() {
	this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
  }

    Beispielhaftes Widget-Skript (RC_StoreItemComponent):

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Button, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreItem, XsollaCatalog } from '../../api/XsollaCatalog';
import { TokenStorage } from '../../common/TokenStorage';
import { OrderTracker } from '../../common/OrderTracker';
import { XsollaPayments } from '../../api/XsollaPayments';
const { ccclass, property } = _decorator;


export namespace sellForRealMoneyItem {


    @ccclass('RC_StoreItemComponent')
    export class RC_StoreItemComponent extends Component {


        @property(Sprite)
        iconSprite: Sprite;


        @property(Label)
        itemNameLabel: Label;


        @property(Label)
        itemDescriptionLabel: Label;


        @property(Label)
        priceLabel: Label;


        @property(Button)
        buyButton: Button;


        private _data: StoreItem;


        start() {
            this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
        }


        init(data: StoreItem) {

            this._data = data;


            this.itemNameLabel.string = data.name;
            this.itemDescriptionLabel.string = data.description;

            if (data.virtual_prices.length > 0) {
                this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
            } else {
                this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
            }


            assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
                if(err == null) {
                const spriteFrame = new SpriteFrame();
                const texture = new Texture2D();
                texture.image = imageAsset;
                spriteFrame.texture = texture;
                this.iconSprite.spriteFrame = spriteFrame;
                } else {
                    console.log(`Cant load image with url ${data.image_url}`);
                }
            });
        }


        onBuyClicked() {
            XsollaCatalog.fetchPaymentToken(TokenStorage.getToken().access_token, this._data.sku, 1, undefined, undefined, undefined, undefined, undefined, result => {
                OrderTracker.checkPendingOrder(result.token, result.orderId, () => {
                    console.log('success purchase!');
                }, error => {
                    console.log(`Order checking failed - Status code: ${error.status}, Error code: ${error.code}, Error message: ${error.description}`);
                });
                XsollaPayments.openPurchaseUI(result.token);
            }, error => {
                console.log(error.description);
            });
        }
    }
}

    Skriptkomponente "Artikelkatalog" vervollständigen

    Hinweis
    In dem Beispielskript wird die modifizierte Klasse in RC_ItemsCatalogComponent geändert.

    Fügen Sie die Logik für den Abruf eines gültigen Autorisierungstokens zur start-Methode der Klasse RC_ItemsCatalogComponent hinzu, wie im Skriptbeispiel gezeigt.

    Beispielhaftes Klassenskript (RC_ItemsCatalogComponent):

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { RC_StoreItemComponent } from './RC_StoreItemComponent';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { TokenStorage } from 'db://xsolla-commerce-sdk/scripts/common/TokenStorage';
const { ccclass, property } = _decorator;




@ccclass('RC_ItemsCatalogComponent')
export class RC_ItemsCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;


    @property(Prefab)
    storeItemPrefab: Prefab;


    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            TokenStorage.saveToken(token, false);
            XsollaCatalog.getCatalog(null, null, [], itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let storeItem = instantiate(this.storeItemPrefab);
                        this.itemsScrollView.content.addChild(storeItem);
                        storeItem.getComponent(RC_StoreItemComponent).init(itemsData.items[i]);
                    }
                });
        });
    }
}

    Beispielhaftes Verarbeitungsergebnis des Skripts:

    Virtuelle Gegenstände gegen virtuelle Währung verkaufen

    In diesem Abschnitt wird erklärt, wie Sie mit den 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. Das folgende Beispiel zeigt, wie Sie den Kauf von virtuellen Gegenständen implementieren. Die Konfiguration für andere Artikeltypen erfolgt auf ähnliche Weise.

    Dieses Tutorial beschreibt die Implementierung der folgenden Logik:

    Achtung

    Im Skriptbeispiel verwenden wir zur Anmeldung die Anmeldedaten eines Demo-Kontos (Benutzername: xsolla, Passwort: xsolla). Dieses Konto ist nur für das Demoprojekt verfügbar.

    Im Skriptbeispiel ist keine seitenweise Anzeige von Artikeln im Katalog (Paginierung) implementiert. Nutzen Sie die Parameter offset und limit der SDK-Methode getCatalog, um eine Paginierung zu implementieren. Maximal können 50 Artikel pro Seite angezeigt werden. Wenn der Katalog mehr als 50 Artikel enthält, ist eine Paginierung erforderlich.

    Artikel-Widget fertigstellen

    Fügen Sie dem Artikel-Widget eine Kaufen-Schaltfläche hinzu und konfigurieren Sie deren Erscheinungsbild.
    Hinweis
    In dem Beispiel wird die modifizierte Klasse in VC_StoreItemComponent geändert.
    Beispielhafte Widget-Struktur:

    Artikel-Widget-Skript fertigstellen

    1. Fügen Sie der VC_StoreItemComponent die Property buyButton hinzu, um mithilfe von Code eine Rückruffunktion an die Kaufen-Schaltfläche zu binden.
    2. Fügen Sie der Klasse VC_StoreItemComponent eine Methode hinzu, die beim Klick auf BuyButton aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.
    3. Binden Sie einen Rückruf an die Kaufen-Schaltfläche auf eine der folgenden Arten:

      • über das Inspector-Fenster, wie in der Abbildung unten gezeigt
      • durch Einfügen des folgenden Codeblocks in das Seitenskript

    Rückruf per Inspector-Fenster binden:

    Rückruf per Code binden:

    Copy
    Full screen
    Small screen
    • typescript
    start() {
	this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
  }

    Beispielhaftes Widget-Skript (VC_StoreItemComponent):

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Button, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { StoreItem, XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { TokenStorage } from 'db://xsolla-commerce-sdk/scripts/common/TokenStorage';
import { OrderTracker } from 'db://xsolla-commerce-sdk/scripts/common/OrderTracker';
const { ccclass, property } = _decorator;


@ccclass('VC_StoreItemComponent')
export class VC_StoreItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    priceLabel: Label;

    @property(Button)
    buyButton: Button;

    private _data: StoreItem;

    start() {
        this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
    }

    init(data: StoreItem) {

        this._data = data;

        this.itemNameLabel.string = data.name;
        this.itemDescriptionLabel.string = data.description;

        if (data.virtual_prices.length > 0) {
            this.priceLabel.string = data.virtual_prices[0].amount.toString() + ' ' + data.virtual_prices[0].name;
        } else {
            this.priceLabel.string = parseFloat(data.price.amount) + ' ' + data.price.currency;
        }

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }

    onBuyClicked() {
        XsollaCatalog.purchaseItemForVirtualCurrency(TokenStorage.getToken().access_token, this._data.sku, this._data.virtual_prices[0].sku, orderId => {
            OrderTracker.checkPendingOrder(TokenStorage.getToken().access_token, orderId, () => {
                console.log('success purchase!');
            }, error => {
                console.log(`Order checking failed - Status code: ${error.status}, Error code: ${error.code}, Error message: ${error.description}`);
            });
        }, error => {
            console.log(error.description);
        });
    }
}

    Skriptkomponente "Artikelkatalog" vervollständigen

    Hinweis
    In dem Beispielskript wird die modifizierte Klasse in VC_ItemsCatalogComponent geändert.

    Fügen Sie die Logik für den Abruf eines gültigen Autorisierungstokens zur start-Methode der Klasse VC_ItemsCatalogComponent hinzu, wie im Skriptbeispiel gezeigt.

    Beispielhaftes Klassenskript (VC_ItemsCatalogComponent):

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaCatalog } from 'db://xsolla-commerce-sdk/scripts/api/XsollaCatalog';
import { VC_StoreItemComponent } from './VC_StoreItemComponent';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { TokenStorage } from 'db://xsolla-commerce-sdk/scripts/common/TokenStorage';
const { ccclass, property } = _decorator;


@ccclass('VC_ItemsCatalogComponent')
export class VC_ItemsCatalogComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    storeItemPrefab: Prefab;

    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            TokenStorage.saveToken(token, false);
            XsollaCatalog.getCatalog(null, null, [], itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let storeItem = instantiate(this.storeItemPrefab);
                        this.itemsScrollView.content.addChild(storeItem);
                        storeItem.getComponent(VC_StoreItemComponent).init(itemsData.items[i]);
                    }
                });
        });
    }
}

    Beispielhaftes Verarbeitungsergebnis des Skripts:

    Virtuelles Währungsguthaben anzeigen

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

    Widget für die Guthabenanzeige erstellen

    1. Erstellen Sie ein Prefab. Wählen Sie dazu die Option Create > Node Prefab aus dem Kontextmenü des Ordners aus.
    2. Öffnen Sie das erstellte Prefab.
    3. Fügen Sie eine UITransform-Komponente in das Stammverzeichnis des Prefabs ein, wie in der folgenden Abbildung gezeigt, und legen Sie die Inhaltsgröße fest.

    1. Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
      • Widget-Hintergrundbild
      • Währungsname
      • Währungsmenge
      • Währungsbild

    Beispielhafte Widget-Struktur:

    Widget-Skript für die Guthabenanzeige erstellen

    1. Erstellen Sie eine CurrencyBalanceItemComponent, und fügen Sie die folgenden Properties hinzu:
      • iconSprite
      • currencyNameLabel
      • quantityLabel

    1. Fügen Sie der CurrencyBalanceItemComponent-Klasse eine init-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
    2. Hängen Sie die CurrencyBalanceItemComponent an den Stammknoten des Prefabs an.
    3. Binden Sie das Prefab-Element an die Properties der CurrencyBalanceItemComponent, wie in der Abbildung gezeigt:

    Beispielhaftes Widget-Skript (CurrencyBalanceItemComponent):

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { VirtualCurrencyBalance } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
const { ccclass, property } = _decorator;


@ccclass('CurrencyBalanceItemComponent')
export class CurrencyBalanceItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    currencyNameLabel: Label;

    @property(Label)
    quantityLabel: Label;

    init(data: VirtualCurrencyBalance) {

        this.currencyNameLabel.string = data.name;
        this.quantityLabel.string = data.amount.toString();

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

    Benutzeroberfläche erstellen

    Erstellen Sie eine Szene für eine “Virtuelles Währungsguthaben”-Katalogseite, und fügen Sie ihr das Element ScrollView hinzu.

    Beispielhafte Seitenstruktur:

    Damit die ScrollView zum erstellten CurrencyBalanceItem-Prefab passt, müssen Sie dessen Größe festlegen:

    1. Ändern Sie den Wert des Parameters ContentSize im ScrollView-Knoten und im inneren view-Knoten.
    2. Binden Sie die Komponente Layout und den content-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:
      • Type == vertical
      • ResizeMode == Container

    Skriptkomponente "Währungsguthaben" erstellen

    1. Erstellen Sie eine CurrencyBalanceComponent, und fügen Sie die folgenden Properties hinzu:
      • itemsScrollView
      • currencyBalanceItemPrefab

    1. Fügen Sie der Klasse CurrencyBalanceComponent die Lifecycle-Funktion start und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
    2. Fügen Sie die CurrencyBalanceComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
    3. Binden Sie die Prefab-Elemente an die Properties der CurrencyBalanceItemComponent, wie in der Abbildung gezeigt:
    Hinweis
    Im Skriptbeispiel verwenden wir zur Anmeldung die Anmeldedaten eines Demo-Kontos (Benutzername: xsolla, Passwort: xsolla). Dieses Konto ist nur für das Demoprojekt verfügbar.
    Beispielhaftes Klassenskript (CurrencyBalanceComponent):
    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { XsollaInventory } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
import { CurrencyBalanceItemComponent } from './CurrencyBalanceItemComponent';
const { ccclass, property } = _decorator;


@ccclass('CurrencyBalanceComponent')
export class CurrencyBalanceComponent extends Component {

    @property(ScrollView)
    itemsList: ScrollView;

    @property(Prefab)
    currencyBalanceItemPrefab: Prefab;

    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            XsollaInventory.getVirtualCurrencyBalance(token.access_token, null, itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let currencyBalanceItem = instantiate(this.currencyBalanceItemPrefab);
                        this.itemsList.content.addChild(currencyBalanceItem);
                             currencyBalanceItem.getComponent(CurrencyBalanceItemComponent).init(itemsData.items[i]);
                    }
                });
        });

    }
}

    Beispielhaftes Verarbeitungsergebnis des Skripts:

    Anzeige von Artikeln im Inventar

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

    Artikel-Widget erstellen

    1. Erstellen Sie ein Prefab. Wählen Sie dazu die Option Create > Node Prefab aus dem Kontextmenü des Ordners aus.
    2. Öffnen Sie das erstellte Prefab.
    3. Fügen Sie eine UITransform-Komponente in das Stammverzeichnis des Prefabs ein, wie in der folgenden Abbildung gezeigt, und legen Sie die Inhaltsgröße fest.

    1. Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
      • Widget-Hintergrundbild
      • Inventarartikelname
      • Inventarartikelbeschreibung
      • Artikelmenge
      • Artikelbild

    Beispielhafte Widget-Struktur:

    Artikel-Widget-Skript erstellen

    1. Erstellen Sie eine InventoryItemComponent , und fügen Sie die folgenden Properties hinzu:
      • iconSprite
      • itemNameLabel
      • itemDescriptionLabel
      • quantityLabel

    1. Fügen Sie der InventoryItemComponent-Klasse eine init-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
    2. Hängen Sie die InventoryItemComponent an den Stammknoten des Prefabs an.
    3. Binden Sie das Prefab-Element an die Properties der InventoryItemComponent, wie in der Abbildung gezeigt:

    Beispielhaftes Widget-Skript (InventoryItemComponent):

    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, assetManager, Component, ImageAsset, Label, Sprite, SpriteFrame, Texture2D } from 'cc';
import { InventoryItem } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
const { ccclass, property } = _decorator;

@ccclass('InventoryItemComponent')
export class InventoryItemComponent extends Component {

    @property(Sprite)
    iconSprite: Sprite;

    @property(Label)
    itemNameLabel: Label;

    @property(Label)
    itemDescriptionLabel: Label;

    @property(Label)
    quantityLabel: Label;

    init(data: InventoryItem) {

        this.itemNameLabel.string = data.name;
        this.itemDescriptionLabel.string = data.description;
        this.quantityLabel.string = data.quantity.toString();

        assetManager.loadRemote<ImageAsset>(data.image_url, (err, imageAsset) => {
            if(err == null) {
            const spriteFrame = new SpriteFrame();
            const texture = new Texture2D();
            texture.image = imageAsset;
            spriteFrame.texture = texture;
            this.iconSprite.spriteFrame = spriteFrame;
            } else {
                console.log(`Can’t load image with URL ${data.image_url}`);
            }
        });
    }
}

    Benutzeroberfläche erstellen

    Erstellen Sie eine Szene für eine Inventarseite, und fügen Sie ihr das Element ScrollView hinzu.

    Beispielhafte Seitenstruktur:

    Damit die ScrollView zum erstellten InventoryItem-Prefab passt, müssen Sie dessen Größe festlegen:

    1. Ändern Sie den Wert des Parameters ContentSize im ScrollView-Knoten und im inneren view-Knoten.
    2. Binden Sie die Komponente Layout und den content-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:
      • Type == vertical
      • ResizeMode == Container

    Skriptkomponente "Inventarseite" erstellen

    1. Erstellen Sie eine InventoryItemsComponent, und fügen Sie die folgenden Properties hinzu:
      • itemsScrollView
      • inventoryItemPrefab

    1. Fügen Sie der Klasse InventoryItemsComponent die Lifecycle-Funktion start und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt.
    2. Fügen Sie die InventoryItemsComponent dem Knoten in der Szene hinzu. Sie können einen neuen Knoten hinzufügen oder einen vorhandenen Knoten mit der während der SDK-Initialisierung hinzugefügten Komponente XsollaSettingsManager verwenden.
    3. Binden Sie die Prefab-Elemente an die Properties der InventoryItemsComponent, wie in der Abbildung gezeigt:
    Hinweis
    Im Skriptbeispiel verwenden wir zur Anmeldung die Anmeldedaten eines Demo-Kontos (Benutzername: xsolla, Passwort: xsolla). Dieses Konto ist nur für das Demoprojekt verfügbar.
    Beispielhaftes Klassenskript (InventoryItemsComponent):
    Copy
    Full screen
    Small screen
    • typescript
    import { _decorator, Component, instantiate, Prefab, ScrollView } from 'cc';
import { XsollaAuth } from 'db://xsolla-commerce-sdk/scripts/api/XsollaAuth';
import { XsollaInventory } from 'db://xsolla-commerce-sdk/scripts/api/XsollaInventory';
import { InventoryItemComponent } from './InventoryItemComponent';
const { ccclass, property } = _decorator;


@ccclass('InventoryItemsComponent')
export class InventoryItemsComponent extends Component {

    @property(ScrollView)
    itemsScrollView: ScrollView;

    @property(Prefab)
    inventoryItemPrefab: Prefab;

    start() {
        XsollaAuth.authByUsernameAndPassword('xsolla', 'xsolla', false, token => {
            XsollaInventory.getInventory(token.access_token, null, itemsData => {
                for (let i = 0; i < itemsData.items.length; ++i) {
                        let inventoryItem = instantiate(this.inventoryItemPrefab);
                        this.itemsScrollView.content.addChild(inventoryItem);
                        inventoryItem.getComponent(InventoryItemComponent).init(itemsData.items[i]);
                    }
                });
        });

    }
}

    Beispielhaftes Verarbeitungsergebnis des Skripts:

    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.
    Letztmalig aktualisiert: 22. Januar 2024

    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!