SDK aufseiten der Anwendung integrieren
- Gestalten Sie eine Benutzeroberfläche für das Anmeldesystem, den Ingame-Shop und sonstige Seiten Ihrer Anwendung.
- Implementieren Sie in Ihrer Anwendungslogik mithilfe von SDK-Methoden die Benutzerauthentifizierung, die Anzeige des Shops, den Kaufvorgang und mehr.
<xsollaExtention>/assets/scripts/samples
.Benutzerregistrierung und ‑anmeldung über Benutzername/E-Mail-Adresse und Passwort
Diese Anleitung 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 Passworts
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.
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
- 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
- Fügen Sie der Klasse
RegistrationComponent
eine Methode hinzu, die beim Klick aufSignUpButton
aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt. - 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. - Binden Sie die Szenenelemente an die Property der
RegistrationComponent
, wie in der Abbildung gezeigt:
- 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
- über das
Rückruf per
Rückruf per Code binden:
- typescript
start() {
this.signUpButton.node.on(Button.EventType.CLICK, this.onSignUpClicked, this);
}
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.
- 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.
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
- 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
- Fügen Sie der Klasse
ResendConfirmationEmailComponent
eine Methode hinzu, die beim Klick aufResendEmail
aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt. - 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. - Binden Sie die Szenenelemente an die Property der
ResendConfirmationEmailComponent
, wie in der Abbildung gezeigt:
- 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
- über das
Rückruf per
Rückruf per Code binden:
- 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.
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.
- 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
- 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
- Fügen Sie der Klasse
LoginComponent
eine Methode hinzu, die beim Klick aufLoginButton
aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt. - 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. - Binden Sie die Szenenelemente an die Property der
LoginComponent
, wie in der Abbildung gezeigt:
- 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
- über das
Rückruf per
Rückruf per Code binden:
- typescript
start() {
this.loginButton.node.on(Button.EventType.CLICK, this.onLoginClicked, this);
}
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.
- 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
- 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
- Fügen Sie der Klasse
ResetPasswordComponent
eine Methode hinzu, die beim Klick aufResetPassword
aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt. - 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. - Binden Sie die Szenenelemente an die Property der
ResetPasswordComponent
, wie in der Abbildung gezeigt:
- 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
- über das
Rückruf per
Rückruf per Code binden:
- typescript
start() {
this.resetPasswordButton.node.on(Button.EventType.CLICK, this.onResetPasswordClicked, this);
}
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.
- 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
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
- Erstellen Sie eine SocialLoginComponent. Fügen Sie die Property
socialLoginButton
hinzu, um eine Rückruffunktion an die Social-Media-Anmeldeschaltfläche zu binden. - Fügen Sie der Klasse
SocialLoginComponent
eine Methode hinzu, die beim Klick aufSocialLogin
aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt.
- 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. - Binden Sie die
SocialLogin
-Schaltfläche an die PropertysocialLoginButton
derSocialLoginComponent
, wie in der Abbildung gezeigt:
- 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
- über das
Rückruf per
Rückruf per Code binden:
- typescript
start() {
this.socialLoginButton.node.on(Button.EventType.CLICK, this.onSocialLoginClicked, this);
}
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.
- 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:
- Konfigurieren Sie virtuelle Gegenstände und Gruppen virtueller Gegenstände.
- Konfigurieren Sie Pakete mit virtuellen Währungen.
- Konfigurieren Sie Bundles.
Dieses Tutorial beschreibt die Implementierung der folgenden Logik:
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
- Erstellen Sie ein Prefab. Wählen Sie dazu die Option
Create > Node Prefab aus dem Kontextmenü des Ordners aus. - Öffnen Sie das erstellte Prefab.
- 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.
- 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
- Erstellen Sie eine
StoreItemComponent
, und fügen Sie die folgenden Properties hinzu:iconSprite
itemNameLabel
itemDescriptionLabel
priceLabel
- Fügen Sie der
StoreItemComponent
-Klasse eineinit
-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - Hängen Sie die StoreItemComponent an den Stammknoten des Prefabs an.
- Binden Sie das Prefab-Element an die Properties der
StoreItemComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Widget-Skript (StoreItemComponent):
- 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:
- Ändern Sie den Wert des Parameters
ContentSize
imScrollView
-Knoten und im innerenview
-Knoten. - Binden Sie die Komponente
Layout
und dencontent
-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:Type == vertical
ResizeMode == Container
Skriptkomponente "Artikelkatalog" erstellen
- Erstellen Sie eine ItemsCatalogComponent, und fügen Sie die folgenden Properties hinzu:
itemsScrollView
storeItemPrefab
- Fügen Sie der Klasse
ItemsCatalogComponent
die Lifecycle-Funktionstart und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - 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. - Binden Sie die Prefab-Elemente an die Properties der
ItemsCatalogComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Klassenskript (ItemsCatalogComponent):
- 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
- Erstellen Sie ein Prefab. Wählen Sie dazu die Option
Create > Node Prefab aus dem Kontextmenü des Ordners aus. - Öffnen Sie das erstellte Prefab.
- 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.
- 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
- Erstellen Sie eine BundleItemComponent, und fügen Sie die folgenden Properties hinzu:
iconSprite
bundleNameLabel
bundleDescriptionLabel
priceLabel
contentDescriptionlabel
- Fügen Sie der
BundleItemComponent
-Klasse eineinit
-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - Hängen Sie die BundleItemComponent an den Stammknoten des Prefabs an.
- Binden Sie das Prefab-Element an die Properties der
BundleItemComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Widget-Skript (BundleItemComponent):
- 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:
- Ändern Sie den Wert des Parameters
ContentSize
imScrollView
-Knoten und im innerenview
-Knoten. - Binden Sie die Komponente
Layout
und dencontent
-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:Type == vertical
ResizeMode == Container
Skriptkomponente "Bundles-Katalog" erstellen
- Erstellen Sie eine BundlesCatalogComponent, und fügen Sie die folgenden Properties hinzu:
itemsScrollView
bundleItemPrefab
- Fügen Sie der Klasse
BundlesCatalogComponent
die Lifecycle-Funktionstart und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - 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. - Binden Sie die Prefab-Elemente an die Properties der
BundlesCatalogComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Klassenskript (BundlesCatalogComponent):
- 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
- Erstellen Sie ein Prefab. Wählen Sie dazu die Option
Create > Node Prefab aus dem Kontextmenü des Ordners aus. - Öffnen Sie das erstellte Prefab.
- 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.
- 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
- Erstellen Sie eine CurrencyPackageItemComponent, und fügen Sie die folgenden Properties hinzu:
iconSprite
currencyNameLabel
currencyDescriptionLabel
priceLabel
- Fügen Sie der
CurrencyPackageItemComponent
-Klasse eineinit
-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - Hängen Sie die CurrencyPackageItemComponent an den Stammknoten des Prefabs an.
- Binden Sie das Prefab-Element an die Properties der
CurrencyPackageItemComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Widget-Skript (CurrencyPackageItemComponent):
- 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:
- Ändern Sie den Wert des Parameters
ContentSize
imScrollView
-Knoten und im innerenview
-Knoten. - Binden Sie die Komponente
Layout
und dencontent
-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:Type == vertical
ResizeMode == Container
Skriptkomponente "Währungspaketekatalog" erstellen
- Erstellen Sie eine
CurrencyPackagesCatalogComponent
, und fügen Sie die folgenden Properties hinzu:itemsScrollView
currencyPackageItemPrefab
- Fügen Sie der Klasse
CurrencyPackagesCatalogComponent
die Lifecycle-Funktionstart und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - 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. - Binden Sie die Prefab-Elemente an die Properties der
CurrencyPackagesCatalogComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Klassenskript (CurrencyPackagesCatalogComponent):
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:
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.RC_StoreItemComponent
geändert.Artikel-Widget-Skript fertigstellen
- Fügen Sie der
RC_StoreItemComponent
die PropertybuyButton
hinzu, um mithilfe von Code eine Rückruffunktion an die Kaufen-Schaltfläche zu binden. - Fügen Sie der Klasse
RC_StoreItemComponent
eine Methode hinzu, die beim Klick aufBuyButton
aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt. - 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
- über das
Rückruf per
Rückruf per Code binden:
- typescript
start() {
this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
}
Beispielhaftes Widget-Skript (RC_StoreItemComponent):
- 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
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):
- 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:
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.VC_StoreItemComponent
geändert.Artikel-Widget-Skript fertigstellen
- Fügen Sie der
VC_StoreItemComponent
die PropertybuyButton
hinzu, um mithilfe von Code eine Rückruffunktion an die Kaufen-Schaltfläche zu binden. - Fügen Sie der Klasse
VC_StoreItemComponent
eine Methode hinzu, die beim Klick aufBuyButton
aufgerufen wird. Ergänzen Sie außerdem die Logik für die Verarbeitung des Klick-Ereignisses, wie im Skript-Beispiel gezeigt. - 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
- über das
Rückruf per
Rückruf per Code binden:
- typescript
start() {
this.buyButton.node.on(Button.EventType.CLICK, this.onBuyClicked, this);
}
Beispielhaftes Widget-Skript (VC_StoreItemComponent):
- 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
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):
- 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
- Erstellen Sie ein Prefab. Wählen Sie dazu die Option
Create > Node Prefab aus dem Kontextmenü des Ordners aus. - Öffnen Sie das erstellte Prefab.
- 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.
- 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
- Erstellen Sie eine CurrencyBalanceItemComponent, und fügen Sie die folgenden Properties hinzu:
iconSprite
currencyNameLabel
quantityLabel
- Fügen Sie der
CurrencyBalanceItemComponent
-Klasse eineinit
-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - Hängen Sie die CurrencyBalanceItemComponent an den Stammknoten des Prefabs an.
- Binden Sie das Prefab-Element an die Properties der
CurrencyBalanceItemComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Widget-Skript (CurrencyBalanceItemComponent):
- 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:
- Ändern Sie den Wert des Parameters
ContentSize
imScrollView
-Knoten und im innerenview
-Knoten. - Binden Sie die Komponente
Layout
und dencontent
-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:Type == vertical
ResizeMode == Container
Skriptkomponente "Währungsguthaben" erstellen
- Erstellen Sie eine CurrencyBalanceComponent, und fügen Sie die folgenden Properties hinzu:
itemsScrollView
currencyBalanceItemPrefab
- Fügen Sie der Klasse
CurrencyBalanceComponent
die Lifecycle-Funktionstart und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - 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 KomponenteXsollaSettingsManager
verwenden. - Binden Sie die Prefab-Elemente an die Properties der
CurrencyBalanceItemComponent
, wie in der Abbildung gezeigt:
xsolla
, Passwort: xsolla
). Dieses Konto ist nur für das Demoprojekt verfügbar.- 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
- Erstellen Sie ein Prefab. Wählen Sie dazu die Option
Create > Node Prefab aus dem Kontextmenü des Ordners aus. - Öffnen Sie das erstellte Prefab.
- 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.
- 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
- Erstellen Sie eine InventoryItemComponent , und fügen Sie die folgenden Properties hinzu:
iconSprite
itemNameLabel
itemDescriptionLabel
quantityLabel
- Fügen Sie der
InventoryItemComponent
-Klasse eineinit
-Methode und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - Hängen Sie die InventoryItemComponent an den Stammknoten des Prefabs an.
- Binden Sie das Prefab-Element an die Properties der
InventoryItemComponent
, wie in der Abbildung gezeigt:
Beispielhaftes Widget-Skript (InventoryItemComponent):
- 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:
- Ändern Sie den Wert des Parameters
ContentSize
imScrollView
-Knoten und im innerenview
-Knoten. - Binden Sie die Komponente
Layout
und dencontent
-Knoten, und richten Sie ihn ein. In dem Beispiel sind die folgenden Einstellungen gewählt:Type == vertical
ResizeMode == Container
Skriptkomponente "Inventarseite" erstellen
- Erstellen Sie eine InventoryItemsComponent, und fügen Sie die folgenden Properties hinzu:
itemsScrollView
inventoryItemPrefab
- Fügen Sie der Klasse
InventoryItemsComponent
die Lifecycle-Funktionstart und die Initialisierungslogik hinzu, wie im Skriptbeispiel gezeigt. - 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. - Binden Sie die Prefab-Elemente an die Properties der
InventoryItemsComponent
, wie in der Abbildung gezeigt:
xsolla
, Passwort: xsolla
). Dieses Konto ist nur für das Demoprojekt verfügbar.- 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:
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.