Kaufverwaltung
Dieses Tutorial erläutert, wie Sie die SDK-Methoden verwenden, um die folgenden Artikel in einem Ingame-Shop anzuzeigen:
- virtuelle Gegenstände
- Gruppen von virtuellen Gegenständen
- Bundles
- Pakete mit virtueller Währung
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:
Die Logiken und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Ein möglicher Artikelkatalog im Rahmen einer Ingame-Shop-Implementierung ist im Demoprojekt beschrieben.
Im Rahmen des Beispiels wird für jeden Artikel in einem Katalog Folgendes angezeigt:
- Artikelname
- Artikelbeschreibung
- Artikelpreis
- 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 leeres Spielobjekt. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Konvertieren Sie das erstellte Spielobjekt in ein Prefab. Ziehen Sie dazu ein Spielobjekt aus dem
Hierarchy -Fenster in einProject -Fenster. - Wählen Sie ein erstelltes Prefab aus, und klicken Sie im
Inspector -Fenster aufOpen Prefab . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Artikelhintergrundbild
- Artikelname
- Artikelbeschreibung
- Artikelpreis
- Artikelbild
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Artikel-Widget-Skript erstellen
- Erstellen Sie ein
VirtualItemWidget
-Skript, übernommen aus der Basisklasse MonoBehaviour. - Deklarieren Sie Variablen für die Benutzeroberflächenelemente des Artikel-Widgets, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualItemWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Image IconImage;
}
}
Seite für die Anzeige von Artikellisten erstellen
- Legen Sie in der Szene ein leeres Spielobjekt an. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Seitenhintergrundbild
- Anzeigebereich für Artikel-Widgets
Das folgende Bild zeigt einen beispielhaften Seitenaufbau.
Page Controller erstellen
- Erstellen Sie ein
VirtualItemsPage
-Skript, übernommen aus der BasisklasseMonoBehaviour
. - Deklarieren Sie die folgenden Variablen:
WidgetsContainer
— Container für WidgetsWidgetPrefab
— Prefab des Artikel-Widgets
- Hängen Sie einem Seiten-Spielobjekt ein Skript an:
- Wählen Sie ein Objekt im
Hierarchy -Fenster aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie einVirtualItemsPage
-Skript aus.
- Wählen Sie ein Objekt im
- Legen Sie Werte für die Variablen im
Inspector -Fenster fest.
- Fügen Sie Anmeldelogiken hinzu. Rufen Sie dazu eine
XsollaLogin.Instance.SignIn
-SDK-Methode in der MethodeStart
auf, und übermitteln Sie ihr Folgendes:- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
username
- ein Benutzerpasswort im Parameter
password
- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
xsolla
, Passwort: xsolla
).- ein Flag/Merker im Parameter
rememberUser
bezüglich dessen, ob man am Konto angemeldet bleibt - die Rückrufmethode
OnAuthenticationSuccess
bei einer erfolgreichen Benutzeranmeldung - die Rückrufmethode
OnError
bei einem Fehler
- ein Flag/Merker im Parameter
- Fügen Sie Logiken für das Abrufen der Artikelliste hinzu. Rufen Sie in der Methode
OnAuthenticationSuccess
die SDK-MethodeXsollaStore.Instance.GetCatalog
auf, und übermitteln Sie ihr Folgendes:- Projekt-ID im Parameter
projectId
- Projekt-ID im Parameter
- die Rückrufmethode
OnItemsRequestSuccess
bei erfolgreichem Abruf einer Artikelliste - die Rückrufmethode
OnError
bei einem Fehler - einen Offset basierend auf dem ersten Artikel in der Liste im Parameter
offset
- die Anzahl der geladenen Artikel im Parameter
limit
- die Rückrufmethode
offset
und limit
sind nicht zwingend erforderlich, jedoch lässt sich darüber eine Seitennummerierung implementieren, also eine seitenweise Anzeige der Artikel im Katalog. Die maximale Anzahl von Artikeln pro Seite beträgt 50. Wenn der Katalog mehr als 50 Artikel enthält, ist eine Seitennummerierung erforderlich.- Fügen Sie in der Methode
OnItemsRequestSuccess
Logiken zum Erstellen eines Widgets für jeden empfangenen Artikel hinzu:- Instanziieren Sie ein Prefab des Artikel-Widgets als untergeordnetes Container-Objekt.
- Hängen Sie die empfangene
VirtualItemWidget
-Komponente einerwidget
-Variable an.
- Übermitteln Sie dem Artikel-Widget folgende Daten:
- Übermitteln Sie den Wert der Variable
storeItem.name
an das Element mit dem Artikelnamen. - Übermitteln Sie den Wert der Variable
storeItem.description
an das Element mit der Artikelbeschreibung. - Implementieren Sie die folgenden Logiken, um den Artikelpreis anzeigen zu können:
- Sofern der Wert der Variable
storeItem.price
ungleichnull
ist, wird der Artikel gegen echte Währung verkauft. Geben Sie den Preis im Format{amount} {currency}
an, und übermitteln Sie ihn an das Widget-Element. - Sofern der Wert der Variable
storeItem.virtual_prices
ungleichnull
ist, wird der Artikel gegen virtuelle Währung verkauft. Geben Sie den Preis im Format{name}: {amount}
an, und übermitteln Sie ihn an das Widget-Element.
- Sofern der Wert der Variable
- Übermitteln Sie den Wert der Variable
storeItem.virtual_prices
enthält ein Array von Preisen in verschiedenen Währungen für denselben Artikel. Das Beispiel zeigt einen Preis, der standardmäßig in den Artikeleinstellungen im Kundenportal unter Online-Shop > Virtuelle Gegenstände festgelegt ist.- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
ImageLoader.Instance.GetImageAsync
, und übermitteln Sie ihr Folgendes:- Bild-URL.
- Eine anonyme Funktion als Rückruf. Fügen Sie in dieser Funktion ein erhaltenes Sprite als Artikelbild ein.
- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
Beispielhaftes Page-Controller-Skript:
- C#
uusing System.Linq;
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class VirtualItemsPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, OnAuthenticationSuccess, OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for catalog from store
XsollaStore.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0, limit: 50);
}
private void OnItemsRequestSuccess(StoreItems storeItems)
{
// Iterating the items collection and assign values for appropriate ui elements
foreach (var storeItem in storeItems.items)
{
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<VirtualItemWidget>();
widget.NameText.text = storeItem.name;
widget.DescriptionText.text = storeItem.description;
if (storeItem.price != null)
{
var realMoneyPrice = storeItem.price;
widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
}
else if (storeItem.virtual_prices != null)
{
var virtualCurrencyPrice = storeItem.virtual_prices.First(x => x.is_default);
widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
}
ImageLoader.Instance.GetImageAsync(storeItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
}
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Das folgende Bild zeigt das Arbeitsergebnis des Skripts.
Anzeige von Gruppen virtueller Gegenstände implementieren
Artikel-Widget erstellen
- Erstellen Sie ein leeres Spielobjekt. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Konvertieren Sie das erstellte Spielobjekt in ein Prefab. Ziehen Sie dazu ein Spielobjekt aus dem
Hierarchy -Fenster in einProject -Fenster. - Wählen Sie ein erstelltes Prefab aus, und klicken Sie im
Inspector -Fenster aufOpen Prefab . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Artikelhintergrundbild
- Artikelname
- Artikelbeschreibung
- Artikelpreis
- Artikelbild
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Artikel-Widget-Skript erstellen
- Erstellen Sie ein
VirtualItemWidget
-Skript, übernommen aus der Basisklasse MonoBehaviour. - Deklarieren Sie Variablen für die Benutzeroberflächenelemente des Artikel-Widgets, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualItemWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Image IconImage;
}
}
Widget für Schaltflächen zum Öffnen von Artikelgruppen erstellen
- Erstellen Sie ein leeres Spielobjekt. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Konvertieren Sie das erstellte Spielobjekt in ein Prefab. Ziehen Sie dazu ein Spielobjekt aus dem
Hierarchy -Fenster in einProject -Fenster. - Wählen Sie ein erstelltes Prefab aus, und klicken Sie im
Inspector -Fenster aufOpen Prefab . - Fügen Sie die Schaltfläche, mit der sich Artikelgruppen anzeigen lassen, einem Prefab als untergeordnetes Objekt hinzu, und konfigurieren Sie ihr Erscheinungsbild.
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Skript für Schaltflächen zum Öffnen von Artikelgruppen erstellen
- Erstellen Sie das
VirtualItemGroupButton
-Skript, übernommen aus der BasisklasseMonoBehaviour
. - Deklarieren Sie Variablen für die Schaltfläche, mit der sich Artikelgruppen öffnen lassen, und legen Sie die Werte für die Variablen im
Inspector -Fenster fest. - Fügen Sie dem Stammobjekt eines Prefabs ein Skript hinzu:
- Wählen Sie ein Objekt im
Hierarchy -Fenster aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie einVirtualItemGroupButton
-Skript aus.
- Wählen Sie ein Objekt im
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualItemGroupButton : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Button Button;
}
}
Seite für die Anzeige von Artikellisten erstellen
- Legen Sie in der Szene ein leeres Spielobjekt an. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Seitenhintergrundbild
- Anzeigebereich für Artikelgruppenschaltflächen
- Anzeigebereich für Artikel-Widgets
Das folgende Bild zeigt einen beispielhaften Seitenaufbau.
Page Controller erstellen
- Erstellen Sie das
VirtualItemsByGroupsPage
-Skript, übernommen aus der BasisklasseMonoBehaviour
. - Deklarieren Sie Variablen:
GroupButtonsContainer
— Container für GruppenschaltflächenGroupButtonPrefab
— Schaltflächen-PrefabItemWidgetsContainer
— Container für Artikel-WidgetsWidgetPrefab
— Prefab des Artikel-Widgets
- Hängen Sie einem Seiten-Spielobjekt ein Skript an:
- Wählen Sie ein Objekt im
Hierarchy -Fenster aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie einVirtualItemsByGroupsPage
-Skript aus.
- Wählen Sie ein Objekt im
- Legen Sie Werte für die Variablen im
Inspector -Fenster fest. - Fügen Sie Anmeldelogiken hinzu. Rufen Sie dazu eine
XsollaLogin.Instance.SignIn
-SDK-Methode in der MethodeStart
auf, und übermitteln Sie ihr Folgendes:- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
username
- ein Benutzerpasswort im Parameter
password
- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
xsolla
, Passwort: xsolla
).- ein Flag/Merker im Parameter
rememberUser
bezüglich dessen, ob man am Konto angemeldet bleibt - die Rückrufmethode
OnAuthenticationSuccess
bei einer erfolgreichen Benutzeranmeldung - die Rückrufmethode
OnError
bei einem Fehler
- ein Flag/Merker im Parameter
- Fügen Sie Logiken für das Abrufen der Artikelliste hinzu. Rufen Sie in der Methode
OnAuthenticationSuccess
die SDK-MethodeXsollaStore.Instance.GetCatalog
auf, und übermitteln Sie ihr Folgendes:- Projekt-ID im Parameter
projectId
- Projekt-ID im Parameter
- die Rückrufmethode
OnItemsRequestSuccess
bei erfolgreichem Abruf einer Artikelliste - die Rückrufmethode
OnError
bei einem Fehler - einen Offset basierend auf dem ersten Artikel in der Liste im Parameter
offset
- die Anzahl der geladenen Artikel im Parameter
limit
- die Rückrufmethode
offset
und limit
sind nicht zwingend erforderlich, jedoch lässt sich darüber eine Seitennummerierung implementieren, also eine seitenweise Anzeige der Artikel im Katalog. Die maximale Anzahl von Artikeln pro Seite beträgt 50. Wenn der Katalog mehr als 50 Artikel enthält, ist eine Seitennummerierung erforderlich.- Fügen Sie in der Methode
OnItemsRequestSuccess
Logiken für die Erzeugung einer Liste von Artikelgruppen hinzu:- Rufen Sie die Liste der individuellen Gruppen aus einer empfangenen Artikelliste ab. Fügen Sie ihr das Element
All
hinzu, das alle Artikel unabhängig von deren Kategorie anzeigt. - Löschen Sie den Schaltflächen-Container, indem Sie alle untergeordneten Objekte löschen. Rufen Sie dazu die Methode
DeleteAllChildren
auf, und übermitteln Sie ihr ein Container-Objekt. - Gehen Sie für jede Artikelgruppe wie folgt vor:
- Rufen Sie die Liste der individuellen Gruppen aus einer empfangenen Artikelliste ab. Fügen Sie ihr das Element
- Instanziieren Sie ein Prefab des Artikel-Widgets als untergeordnetes Container-Objekt.
- Legen Sie die empfangene
VirtualItemGroupButton
-Komponente als VariablegroupButton
fest. - Übermitteln Sie den Wert der Variable
groupName
an das Element mit einem Gruppennamen. - Ergänzen Sie die Handlung des Anklickens der Schaltfläche um eine anonyme Methode. Rufen Sie in dieser Methode die Methode
OnGroupSelected
auf, und übermitteln Sie den Namen der Artikelgruppe und die Artikelliste als Parameter.
- Rufen Sie zum Anzeigen aller Artikel die Methode
OnGroupSelected
auf, und übermitteln SieAll
als Gruppennamen.
- Rufen Sie zum Anzeigen aller Artikel die Methode
- Fügen Sie in der Methode
OnGroupSelected
Logiken für die erstmalige Anzeige der Artikel hinzu:- Erstellen Sie die Variable
itemsForDisplay
, und weisen Sie ihr alle empfangenen Artikel zu, wenn der Name der ArtikelgruppeAll
lautet. Verknüpfen Sie andernfalls Artikel, deren Gruppenname mit der VariablegroupName
übereinstimmt, mit der VariableitemsForDisplay
. - Löschen Sie den Schaltflächen-Container, indem Sie alle untergeordneten Objekte löschen. Rufen Sie dazu die Methode
DeleteAllChildren
auf, und übermitteln Sie ihr ein Container-Objekt.
- Erstellen Sie die Variable
- Fügen Sie Logiken zum Erstellen eines Widgets für jeden empfangenen Artikel hinzu:
- Instanziieren Sie ein Prefab des Artikel-Widgets als untergeordnetes Container-Objekt.
- Hängen Sie die empfangene
VirtualItemWidget
-Komponente einerwidget
-Variable an.
- Übermitteln Sie die folgenden Daten an das Artikel-Widget:
- Übermitteln Sie den Wert der Variable
storeItem.name
an das Element mit dem Artikelnamen. - Übermitteln Sie den Wert der Variable
storeItem.description
an das Element mit der Artikelbeschreibung. - Implementieren Sie die folgenden Logiken für die Anzeige von Artikelpreisen:
- Übermitteln Sie den Wert der Variable
- Sofern der Wert der Variable
storeItem.price
ungleichnull
ist, wird das Paket gegen echte Währung verkauft. Geben Sie den Preis im Format{amount} {currency}
an, und übermitteln Sie ihn an das Widget-Element. - Sofern der Wert der Variable
storeItem.virtual_prices
ungleichnull
ist, wird das Paket gegen virtuelle Währung verkauft. Geben Sie den Preis im Format{name}: {amount}
an, und übermitteln Sie ihn an das Widget-Element.
- Sofern der Wert der Variable
storeItem.virtual_prices
enthält ein Array von Preisen in verschiedenen Währungen für denselben Artikel. Das Beispiel zeigt einen Preis, der standardmäßig in den Artikeleinstellungen im Kundenportal unter Online-Shop > Virtuelle Gegenstände festgelegt ist.- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
ImageLoader.Instance.GetImageAsync
, und übermitteln Sie ihr Folgendes:- Bild-URL.
- Eine anonyme Funktion als Rückruf. Fügen Sie in dieser Funktion ein erhaltenes Sprite als Artikelbild ein.
- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
- C#
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class VirtualItemsByGroupsPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform GroupButtonsContainer;
public GameObject GroupButtonPrefab;
public Transform ItemWidgetsContainer;
public GameObject ItemWidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for catalog from store
XsollaStore.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0, limit: 50);
}
private void OnItemsRequestSuccess(StoreItems storeItems)
{
// Selecting the group’s name from items and order them alphabetical
var groupNames = storeItems.items
.SelectMany(x => x.groups)
.GroupBy(x => x.name)
.Select(x => x.First())
.OrderBy(x => x.name)
.Select(x => x.name)
.ToList();
// Add group name for “all groups”, which will mean show all items regardless of group affiliation
groupNames.Insert(0, "All");
// Clear container
DeleteAllChildren(GroupButtonsContainer);
// Iterating the group names and creating ui-button for each
foreach (var groupName in groupNames)
{
var buttonObj = Instantiate(GroupButtonPrefab, GroupButtonsContainer, false);
var groupButton = buttonObj.GetComponent<VirtualItemGroupButton>();
groupButton.NameText.text = groupName;
groupButton.Button.onClick.AddListener(() => OnGroupSelected(groupName, storeItems));
}
// Calling method for redraw page
OnGroupSelected("All", storeItems);
}
private void OnGroupSelected(string groupName, StoreItems storeItems)
{
// Declaring variable for items which will display on page
IEnumerable<StoreItem> itemsForDisplay;
if (groupName == "All")
{
itemsForDisplay = storeItems.items;
}
else
{
itemsForDisplay = storeItems.items.Where(item => item.groups.Any(group => group.name == groupName));
}
// Clear container
DeleteAllChildren(ItemWidgetsContainer);
// Iterating the items collection and assign values for appropriate ui elements
foreach (var storeItem in itemsForDisplay)
{
var widgetGo = Instantiate(ItemWidgetPrefab, ItemWidgetsContainer, false);
var widget = widgetGo.GetComponent<VirtualItemWidget>();
widget.NameText.text = storeItem.name;
widget.DescriptionText.text = storeItem.description;
if (storeItem.price != null)
{
var realMoneyPrice = storeItem.price;
widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
}
else if (storeItem.virtual_prices != null)
{
var virtualCurrencyPrice = storeItem.virtual_prices.First(x => x.is_default);
widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
}
ImageLoader.Instance.GetImageAsync(storeItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
}
}
// Utility method for delete all children of container
private static void DeleteAllChildren(Transform parent)
{
var childList = parent.Cast<Transform>().ToList();
foreach (var childTransform in childList)
{
Destroy(childTransform.gameObject);
}
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Beispielhaftes Page-Controller-Skript:
Anzeige von Bundles implementieren
Bundle-Widget erstellen
- Erstellen Sie ein leeres Spielobjekt. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Konvertieren Sie das erstellte Spielobjekt in ein Prefab. Ziehen Sie dazu ein Spielobjekt aus dem
Hierarchy -Fenster in einProject -Fenster. - Wählen Sie ein erstelltes Prefab aus, und klicken Sie im
Inspector -Fenster aufOpen Prefab . - 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
- Beschreibung des Bundle-Inhalts (Artikel und deren Stückzahl)
- Bundle-Bild
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Widget-Skript erstellen
- Erstellen Sie ein
BundleWidget
-Skript, übernommen aus der Basisklasse MonoBehaviour. - Deklarieren Sie Variablen für die Benutzeroberflächenelemente des Artikel-Widgets, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class BundleWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Text ContentText;
public Image IconImage;
}
}
Seite für die Anzeige von Bundles erstellen
- Legen Sie in der Szene ein leeres Spielobjekt an. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Seitenhintergrundbild
- Anzeigebereich für Bundle-Widgets
Das folgende Bild zeigt einen beispielhaften Seitenaufbau.
Page Controller erstellen
- Erstellen Sie das
BundlesPage
-Skript, übernommen aus der BasisklasseMonoBehaviour
. - Deklarieren Sie Variablen.
WidgetsContainer
— Container für WidgetsWidgetPrefab
— Prefab des Bundle-Widgets
- Hängen Sie einem Seiten-Spielobjekt ein Skript an:
- Wählen Sie ein Objekt im
Hierarchy -Fenster aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie einBundlesPage
-Skript aus.
- Wählen Sie ein Objekt im
- Legen Sie Werte für die Variablen im
Inspector -Fenster fest. - Fügen Sie Anmeldelogiken hinzu. Rufen Sie dazu eine
XsollaLogin.Instance.SignIn
-SDK-Methode in der MethodeStart
auf, und übermitteln Sie ihr Folgendes:- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
username
- ein Benutzerpasswort im Parameter
password
- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
xsolla
, Passwort: xsolla
).- ein Flag/Merker im Parameter
rememberUser
bezüglich dessen, ob man am Konto angemeldet bleibt - die Rückrufmethode
OnAuthenticationSuccess
bei einer erfolgreichen Benutzeranmeldung - die Rückrufmethode
OnError
bei einem Fehler
- ein Flag/Merker im Parameter
- Fügen Sie Logiken für das Abrufen der Bundles-Liste hinzu. Rufen Sie in der Methode
OnAuthenticationSuccess
die SDK-MethodeXsollaStore.Instance.GetBundles
auf, und übermitteln Sie ihr Folgendes:- eine Projekt-ID im Parameter
projectId
- eine Projekt-ID im Parameter
- die Rückrufmethode
OnItemsRequestSuccess
bei erfolgreichem Abruf einer Bundles-Liste - die Rückrufmethode
OnError
bei einem Fehler
- die Rückrufmethode
- Fügen Sie in der Methode
OnBundlesRequestSuccess
Logiken zum Erstellen eines Widgets für jedes empfangene Bundle hinzu:- Instanziieren Sie ein Prefab des Artikel-Widgets als untergeordnetes Container-Objekt.
- Hängen Sie die empfangene
BundleWidget
-Komponente einerwidget
-Variable an.
- Übermitteln Sie folgende Daten an das Bundle-Widget:
- Übermitteln Sie den Wert der Variable
bundleItem.name
an das Element mit dem Artikelnamen. - Übermitteln Sie den Wert der Variable
bundleItem.description
an das Element mit der Artikelbeschreibung. - Implementieren Sie die folgenden Logiken, um den Bundle-Inhalt anzeigen zu können:
- Legen Sie für jeden Artikel in einem Bundle eine Zeile an, die den Artikelnamen und die Stückzahl enthält. Die Zeile sollte folgendes Format aufweisen:
{name} x {quantity}
. - Fassen Sie diese Zeilen in einer neuen Zeile zusammen. Nutzen Sie dazu ein Zeilenvorschubzeichen als Trennzeichen.
- Übermitteln Sie die neue Zeile an das Widget-Element.
- Legen Sie für jeden Artikel in einem Bundle eine Zeile an, die den Artikelnamen und die Stückzahl enthält. Die Zeile sollte folgendes Format aufweisen:
- Übermitteln Sie den Wert der Variable
- Implementieren Sie die folgenden Logiken, um den Bundle-Preis anzeigen zu können:
- Sofern der Wert der Variable
bundleItem.price
ungleichnull
ist, wird das Bundle gegen echte Währung verkauft. Geben Sie den Preis im Format{amount} {currency}
an, und übermitteln Sie ihn an das Widget-Element. - Sofern der Wert der Variable
bundleItem.virtual_prices
ungleichnull
ist, wird das Bundle gegen virtuelle Währung verkauft. Geben Sie den Preis im Format{name}: {amount}
an, und übermitteln Sie ihn an das Widget-Element.
- Sofern der Wert der Variable
- Implementieren Sie die folgenden Logiken, um den Bundle-Preis anzeigen zu können:
bundleItem.virtual_prices
enthält ein Array von Preisen in verschiedenen Währungen für dasselbe Bundle. Das Beispiel zeigt einen Preis, der standardmäßig in den Artikeleinstellungen im Kundenportal unter Online-Shop > Bundles festgelegt ist.- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
ImageLoader.Instance.GetImageAsync
, und übermitteln Sie ihr Folgendes:- Bild-URL.
- Eine anonyme Funktion als Rückruf. Fügen Sie in dieser Funktion ein erhaltenes Sprite als Bundle-Bild.
- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
Beispielhaftes Page-Controller-Skript:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class BundlesPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for bundles from store
XsollaStore.Instance.GetBundles(XsollaSettings.StoreProjectId, OnBundlesRequestSuccess, OnError);
}
private void OnBundlesRequestSuccess(BundleItems bundleItems)
{
// Iterating the bundles collection and assign values for appropriate ui elements
foreach (var bundleItem in bundleItems.items)
{
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<BundleWidget>();
widget.NameText.text = bundleItem.name;
widget.DescriptionText.text = bundleItem.description;
var bundleContent = bundleItem.content.Select(x => $"{x.name} x {x.quantity}");
widget.ContentText.text = string.Join("\n", bundleContent);
if (bundleItem.price != null)
{
var realMoneyPrice = bundleItem.price;
widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
}
else if (bundleItem.virtual_prices != null)
{
var virtualCurrencyPrice = bundleItem.virtual_prices.First(x => x.is_default);
widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
}
ImageLoader.Instance.GetImageAsync(bundleItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
}
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Das folgende Bild zeigt das Arbeitsergebnis des Skripts.
Anzeige von virtuellen Währungspaketen implementieren
Widget für virtuelle Währungspakete erstellen
- Erstellen Sie ein leeres Spielobjekt. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Konvertieren Sie das erstellte Spielobjekt in ein Prefab. Ziehen Sie dazu ein Spielobjekt aus dem
Hierarchy -Fenster in einProject -Fenster. - Wählen Sie ein erstelltes Prefab aus, und klicken Sie im
Inspector -Fenster aufOpen Prefab . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Widget-Hintergrundbild
- Paketname
- Paketbeschreibung
- Paketpreis
- Paketbild
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Widget-Skript erstellen
- Erstellen Sie ein
VirtualCurrencyPackageWidget
-Skript, übernommen aus der Basisklasse MonoBehaviour. - Deklarieren Sie Variablen für die Benutzeroberflächenelemente des Artikel-Widgets, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualCurrencyPackageWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Image IconImage;
}
}
Seite für die Anzeige der Liste der virtuellen Währungspaketen erstellen
- Legen Sie in der Szene ein leeres Spielobjekt an. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Seitenhintergrundbild
- Anzeigebereich für die Widgets mit den virtuellen Währungspaketen
Das folgende Bild zeigt einen beispielhaften Seitenaufbau.
Page Controller erstellen
- Erstellen Sie das
VirtualCurrencyPackagesPage
-Skript, übernommen aus der BasisklasseMonoBehaviour
. - Deklarieren Sie Variablen.
WidgetsContainer
— Container für WidgetsWidgetPrefab
— Prefab des virtuellen Währungspakets
- Hängen Sie einem Seiten-Spielobjekt ein Skript an:
- Wählen Sie ein Objekt im
Hierarchy -Fenster aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie einVirtualCurrencyPackagesPage
-Skript aus.
- Wählen Sie ein Objekt im
- Legen Sie Werte für die Variablen im
Inspector -Fenster fest. - Fügen Sie Anmeldelogiken hinzu. Rufen Sie dazu eine
XsollaLogin.Instance.SignIn
-SDK-Methode in der MethodeStart
auf, und übermitteln Sie ihr Folgendes:
- Benutzername oder E-Mail-Adresse im Parameter
username
- Benutzerpasswort im Parameter
password
- Benutzername oder E-Mail-Adresse im Parameter
xsolla
, Passwort: xsolla
).- ein Flag/Merker im Parameter
rememberUser
bezüglich dessen, ob man am Konto angemeldet bleibt - die Rückrufmethode
OnAuthenticationSuccess
bei einer erfolgreichen Benutzeranmeldung - die Rückrufmethode
OnError
bei einem Fehler
- ein Flag/Merker im Parameter
- Fügen Sie Logiken für das Abrufen der Artikelliste hinzu. Rufen Sie in der Methode
OnAuthenticationSuccess
die SDK-MethodeXsollaStore.Instance.GetVirtualCurrencyPackagesList
auf, und übermitteln Sie ihr Folgendes:- Projekt-ID im Parameter
projectId
- Projekt-ID im Parameter
- die Rückrufmethode
OnItemsRequestSuccess
bei erfolgreichem Abruf einer Artikelliste - die Rückrufmethode
OnError
bei einem Fehler
- die Rückrufmethode
- Fügen Sie in der Methode
OnPackagesRequestSuccess
Logiken zum Erstellen eines Widgets für jedes empfangene Paket hinzu:- Instanziieren Sie ein Prefab des Artikel-Widgets als untergeordnetes Container-Objekt.
- Hängen Sie die empfangene
VirtualCurrencyPackageWidget
-Komponente einerwidget
-Variable an.
- Übermitteln Sie die folgenden Daten an das Paket-Widget:
- Übermitteln Sie den Wert der Variable
packageItem.name
an das Element mit dem Paketnamen. - Übermitteln Sie den Wert der Variable
packageItem.description
an das Element mit der Paketbeschreibung. - Implementieren Sie die folgenden Logiken für die Anzeige von Paketpreisen:
- Übermitteln Sie den Wert der Variable
- Sofern der Wert der Variable
packageItem.price
ungleichnull
ist, wird das Paket gegen echte Währung verkauft. Geben Sie den Preis im Format{amount} {currency}
an, und übermitteln Sie ihn an das Widget-Element. - Sofern der Wert der Variable
packageItem.virtual_prices
ungleichnull
ist, wird das Paket gegen virtuelle Währung verkauft. Geben Sie den Preis im Format{name}: {amount}
an, und übermitteln Sie ihn an das Widget-Element.
- Sofern der Wert der Variable
packageItem.virtual_prices
enthält ein Array von Preisen in verschiedenen Währungen für dasselbe Paket. Das Beispiel zeigt einen Preis, der standardmäßig in den Paketeinstellungen im Kundenportal unter Online-Shop > Virtuelle Währung > Pakete festgelegt ist.- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
ImageLoader.Instance.GetImageAsync
, und übermitteln Sie ihr Folgendes:- Bild-URL.
- Eine anonyme Funktion als Rückruf. Fügen Sie in dieser Funktion ein erhaltenes Sprite als Artikelbild ein.
- Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
Beispielhaftes Page-Controller-Skript:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class VirtualCurrencyPackagesPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for packages from store
XsollaStore.Instance.GetVirtualCurrencyPackagesList(XsollaSettings.StoreProjectId, OnPackagesRequestSuccess, OnError);
}
private void OnPackagesRequestSuccess(VirtualCurrencyPackages packageItems)
{
// Iterating the packages collection and assign values for appropriate ui elements
foreach (var packageItem in packageItems.items)
{
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<VirtualCurrencyPackageWidget>();
widget.NameText.text = packageItem.name;
widget.DescriptionText.text = packageItem.description;
if (packageItem.price != null)
{
var realMoneyPrice = packageItem.price;
widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
}
else if (packageItem.virtual_prices != null)
{
var virtualCurrencyPrice = packageItem.virtual_prices.First(x => x.is_default);
widget.PriceText.text = $"{virtualCurrencyPrice.name}: {virtualCurrencyPrice.amount}";
}
ImageLoader.Instance.GetImageAsync(packageItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
}
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Das folgende Bild zeigt das Arbeitsergebnis des Skripts.
Diese Anleitung erläutert, wie Sie mithilfe der SDK-Methoden den Verkauf von virtuellen Gegenständen gegen echte Währung implementieren.
Zuerst müssen Sie die Anzeige von virtuellen Gegenständen in einem Katalog implementieren. Das folgende Beispiel zeigt, wie Sie den Kauf von virtuellen Gegenständen implementieren. Die Konfiguration für andere Artikeltypen erfolgt auf ähnliche Weise.
Dieses Tutorial beschreibt die Implementierung der folgenden Logik:
Die Logik und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Eine mögliche Implementierungsoption für den Verkauf von Artikeln gegen echte Währung und die Anzeige eines Artikelkatalogs ist im Demoprojekt beschrieben.
Artikel-Widget fertigstellen
Fügen Sie dem Artikel-Widget eine Kaufen-Schaltfläche hinzu und konfigurieren Sie deren Erscheinungsbild.
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Artikel-Widget-Skript fertigstellen
- Öffnen Sie das
VirtualItemWidget
-Skript. - Deklarieren Sie die Variablen für die Kaufen-Schaltfläche, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualItemWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Image IconImage;
public Button BuyButton;
}
}
Page Controller für Anzeige der Artikelliste fertigstellen
- Öffnen Sie das
VirtualItemsPage
-Skript. - Übermitteln Sie in der
OnAuthenticationSuccess
-Methode den Autorisierungstoken an dieXsollaStore.Instance.Token
-Variable.
- Einen während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.SignIn
erhaltenen JWT. - Den während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.GetUserAccessToken
erhaltenen Zugriffstoken der Bezahlstation. Nutzen Sie diesen Token, falls Sie Ihr eigenes Autorisierungssystem implementiert haben.
- Fügen Sie die Logik, mit deren Hilfe der Klick auf die Schaltfläche für den Kauf eines virtuellen Gegenstands verarbeitet wird, hinzu:
- Abonnieren Sie in der Methode
OnItemsRequestSuccess
das Schaltflächenklick-Ereignis. - Fügen Sie eine anonyme Methode hinzu, die nach dem Klick auf die Schaltfläche aufgerufen wird.
- Rufen Sie in dieser Methode die SDK-Methode
XsollaStore.Instance.ItemPurchase
auf, um eine Bestellung anzulegen und Folgendes zu übermitteln:
- Abonnieren Sie in der Methode
- eine Projekt-ID im Parameter
projectId
- eine Artikelkennung im Parameter
itemSku
- die Methode
OnOrderCreateSuccess
, um bei einer erfolgreichen Artikelbestellung den Auftrag verarbeiten zu können - die Rückrufmethode
OnError
bei einem Fehler
- eine Projekt-ID im Parameter
- Implementieren Sie das Öffnen einer Zahlungsseite. Fügen Sie dazu die Methode
OnOrderCreateSuccess
hinzu, und rufen Sie darin Folgendes auf:- die SDK-Methode
XsollaStore.Instance.OpenPurchaseUi
, um eine Zahlungsseite zu öffnen. - die Coroutine
TrackOrderStatus
, um Bestellstatusänderungen zu tracken.
- die SDK-Methode
- Implementieren Sie in der Coroutine
TrackOrderStatus
einen sekündlichen Abruf der Bestellstatusinfos. Nutzen Sie dazu die SDK-MethodeXsollaStore.Instance.CheckOrderStatus
und übermitteln Sie ihr Folgendes:- eine Projekt-ID im Parameter
projectId
- eine Bestellnummer aus den Zahlungsdetails im Parameter
orderId
- eine anonyme Methode zur Verarbeitung des erfolgreichen Empfangs von Bestellstatusinfos
- eine anonyme Methode zur Fehlerbearbeitung
- eine Projekt-ID im Parameter
- Implementieren Sie in der Methode für die Verarbeitung des erfolgreichen Bestellstatusinfo-Erhalts den Rückruf einer
OnPurchaseSuccess
-Methode bei der Bezahlung der Bestellung (Zahlungsstatus:done
oderpaid
). - Implementieren Sie in der Methode
OnPurchaseSuccess
die Verarbeitung eines erfolgreichen Kaufs eines virtuellen Gegenstands.
Im Skriptbeispiel rufen wir die Basismethode Debug.Log auf, wenn der Artikelkauf erfolgreich ist. Sie können weitere Aktionen hinzufügen, z. B. die Inventaranzeige usw.
Eine Logik für das Hinzufügen von gekauften Artikeln zum Inventar muss nicht hinzugefügt werden, das geschieht automatisch.
- Wenn Sie einen integrierten Browser zum Öffnen einer Zahlungsseite verwenden, schließen Sie diesen Browser.
Beispielhaftes Skript für eine Seite:
- C#
using System.Collections;
using System.Linq;
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class VirtualItemsPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for catalog from store
Token.Instance = Token.Create(token);
XsollaStore.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0, limit: 50);
}
private void OnItemsRequestSuccess(StoreItems storeItems)
{
// Iterating the items collection and assign values for appropriate ui elements
foreach (var storeItem in storeItems.items)
{
if (storeItem.price == null)
continue;
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<VirtualItemWidget>();
widget.NameText.text = storeItem.name;
widget.DescriptionText.text = storeItem.description;
var realMoneyPrice = storeItem.price;
widget.PriceText.text = $"{realMoneyPrice.amount} {realMoneyPrice.currency}";
ImageLoader.Instance.GetImageAsync(storeItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
widget.BuyButton.onClick.AddListener(() => { XsollaStore.Instance.ItemPurchase(XsollaSettings.StoreProjectId, storeItem.sku, OnOrderCreateSuccess, OnError); });
}
}
private void OnOrderCreateSuccess(PurchaseData purchaseData)
{
XsollaStore.Instance.OpenPurchaseUi(purchaseData);
StartCoroutine(TrackOrderStatus(purchaseData));
}
private IEnumerator TrackOrderStatus(PurchaseData purchaseData)
{
var isDone = false;
while (!isDone)
{
XsollaStore.Instance.CheckOrderStatus
(
XsollaSettings.StoreProjectId,
purchaseData.order_id,
status =>
{
if (status.status == "paid" || status.status == "done")
{
isDone = true;
OnPurchaseSuccess();
}
},
error => { OnError(error); }
);
yield return new WaitForSeconds(1f);
}
}
private void OnPurchaseSuccess()
{
UnityEngine.Debug.Log($"Purchase successful");
BrowserHelper.Instance.Close();
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Diese Anleitung erläutert, wie Sie mithilfe der SDK-Methoden den Verkauf von virtuellen Gegenständen gegen virtuelle Währung implementieren.
Zuerst müssen Sie die Anzeige von virtuellen Gegenständen in einem Katalog implementieren. 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:
Die Logik und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Eine mögliche Implementierungsoption für den Verkauf von Artikeln gegen echte Währung und die Anzeige eines Artikelkatalogs ist im Demoprojekt beschrieben.
Artikel-Widget fertigstellen
Fügen Sie dem Artikel-Widget eine Kaufen-Schaltfläche hinzu und konfigurieren Sie deren Erscheinungsbild.
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Artikel-Widget-Skript fertigstellen
- Öffnen Sie das
VirtualItemWidget
-Skript. - Deklarieren Sie die Variablen für die Kaufen-Schaltfläche, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualItemWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text DescriptionText;
public Text PriceText;
public Image IconImage;
public Button BuyButton;
}
}
Page Controller für Anzeige der Artikelliste fertigstellen
- Öffnen Sie das
VirtualItemsPage
-Skript. - Übermitteln Sie in der
OnAuthenticationSuccess
-Methode den Autorisierungstoken an dieXsollaStore.Instance.Token
-Variable.
- Einen während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.SignIn
erhaltenen JWT. - Den während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.GetUserAccessToken
erhaltenen Zugriffstoken der Bezahlstation. Nutzen Sie diesen Token, falls Sie Ihr eigenes Autorisierungssystem implementiert haben.
- Fügen Sie die Logik, mit deren Hilfe der Klick auf die Schaltfläche für den Kauf eines virtuellen Gegenstands verarbeitet wird, hinzu:
- Abonnieren Sie in der Methode
OnItemsRequestSuccess
das Schaltflächenklick-Ereignis. - Fügen Sie eine anonyme Methode hinzu, die nach dem Klick auf die Schaltfläche aufgerufen wird.
- Rufen Sie in dieser Methode die SDK-Methode
XsollaStore.Instance.ItemPurchase
auf, um eine Bestellung anzulegen und Folgendes zu übermitteln:
- Abonnieren Sie in der Methode
- eine Projekt-ID im Parameter
projectId
- eine Artikelkennung im Parameter
itemSku
- die Methode
OnOrderCreateSuccess
, um bei einer erfolgreichen Artikelbestellung den Auftrag verarbeiten zu können - die Rückrufmethode
OnError
bei einem Fehler
- eine Projekt-ID im Parameter
- Implementieren Sie in der Methode
OnOrderCreateSuccess
die Bestellstatusprüfung. Nutzen Sie dazu die SDK-MethodeXsollaStore.Instance.CheckOrderStatus
und übermitteln Sie ihr Folgendes:- eine Projekt-ID im Parameter
projectId
- eine Bestellnummer aus den Zahlungsdetails im Parameter
orderId
- eine anonyme Methode zur Verarbeitung des erfolgreichen Empfangs von Bestellstatusinfos
- eine anonyme Methode zur Fehlerbearbeitung
- eine Projekt-ID im Parameter
- Implementieren Sie in der Methode für die Verarbeitung des erfolgreichen Bestellstatusinfo-Erhalts den Rückruf einer
OnPurchaseSuccess
-Methode bei der Bezahlung der Bestellung (Zahlungsstatus:done
oderpaid
). - Implementieren Sie in der Methode
OnPurchaseSuccess
die Verarbeitung eines erfolgreichen Kaufs eines virtuellen Gegenstands.
Im Skriptbeispiel rufen wir die Basismethode Debug.Log auf, wenn der Artikelkauf erfolgreich ist. Sie können weitere Aktionen hinzufügen, z. B. die Inventaranzeige, Änderung des virtuellen Währungsguthabens usw.
Eine Logik für das Hinzufügen von gekauften Artikeln zum Inventar muss nicht hinzugefügt werden, das geschieht automatisch.
Beispielhaftes Skript für eine Seite:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class VirtualItemsPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, onSuccess: OnAuthenticationSuccess, onError: OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for catalog from store
Token.Instance = Token.Create(token);
XsollaStore.Instance.GetCatalog(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError, offset: 0, limit: 50);
}
private void OnItemsRequestSuccess(StoreItems storeItems)
{
// Iterating the items collection and assign values for appropriate ui elements
foreach (var storeItem in storeItems.items)
{
if (storeItem.virtual_prices.Length == 0)
continue;
var widget = Instantiate(WidgetPrefab, WidgetsContainer, false).GetComponent<VirtualItemWidget>();
widget.NameText.text = storeItem.name;
widget.DescriptionText.text = storeItem.description;
var defaultPrice = storeItem.virtual_prices.First(x => x.is_default);
widget.PriceText.text = $"{defaultPrice.name}: {defaultPrice.amount}";
ImageLoader.Instance.GetImageAsync(storeItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
widget.BuyButton.onClick.AddListener(() =>
{
var price = storeItem.virtual_prices.First(x => x.is_default);
XsollaStore.Instance.ItemPurchaseForVirtualCurrency(XsollaSettings.StoreProjectId, storeItem.sku, price.sku, OnOrderCreateSuccess, OnError);
});
}
}
private void OnOrderCreateSuccess(PurchaseData purchaseData)
{
XsollaStore.Instance.CheckOrderStatus
(
XsollaSettings.StoreProjectId,
purchaseData.order_id,
status =>
{
if (status.status == "paid" || status.status == "done")
{
OnPurchaseSuccess();
}
},
error =>
{
OnError(error);
}
);
}
private void OnPurchaseSuccess()
{
UnityEngine.Debug.Log($"Purchase successful");
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Dieses Tutorial erläutert, wie Sie die SDK-Methoden verwenden, um das virtuelle Währungsguthaben in Ihrer App anzuzeigen.
Die Logiken und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Ein möglicher Artikelkatalog im Rahmen einer Ingame-Shop-Implementierung ist im Demoprojekt beschrieben.
Widget für die Guthabenanzeige erstellen
- Erstellen Sie ein leeres Spielobjekt. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Konvertieren Sie das erstellte Spielobjekt in ein Prefab. Ziehen Sie dazu ein Spielobjekt aus dem
Hierarchy -Fenster in einProject -Fenster. - Wählen Sie ein erstelltes Prefab aus, und klicken Sie im
Inspector -Fenster aufOpen Prefab . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Widget-Hintergrundbild
- Name der virtuellen Währung
- Menge der virtuellen Währung
- Bild der virtuellen Währung
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Widget-Skript für die Guthabenanzeige erstellen
- Erstellen Sie ein
VirtualCurrencyWidget
-Skript, übernommen aus der Basisklasse MonoBehaviour. - Deklarieren Sie Variablen für die Benutzeroberflächenelemente des Artikel-Widgets, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualCurrencyWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text AmountText;
public Image IconImage;
}
}
Seite mit Liste virtueller Währungen erstellen
- Legen Sie in der Szene ein leeres Spielobjekt an. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Seitenhintergrundbild
- Anzeigebereich für Widgets
Das folgende Bild zeigt einen beispielhaften Seitenaufbau.
Controller für Seite mit Liste virtueller Währungen erstellen
- Erstellen Sie ein
VirtualCurrenciesPage
-Skript, übernommen aus der BasisklasseMonoBehaviour
. - Deklarieren Sie die folgenden Variablen:
WidgetsContainer
— Container für WidgetsWidgetPrefab
— Prefab des Guthabenanzeige-Widgets
- Hängen Sie einem Seiten-Spielobjekt ein Skript an:
- Wählen Sie ein Objekt im
Hierarchy -Fenster aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie einVirtualCurrenciesPage
-Skript aus.
- Wählen Sie ein Objekt im
- Legen Sie Werte für die Variablen im
Inspector -Fenster fest. - Fügen Sie Anmeldelogiken hinzu. Rufen Sie dazu eine
XsollaLogin.Instance.SignIn
-SDK-Methode in der MethodeStart
auf, und übermitteln Sie ihr Folgendes:- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
username
- ein Benutzerpasswort im Parameter
password
- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
xsolla
, Passwort: xsolla
).- ein Flag/Merker im Parameter
rememberUser
bezüglich dessen, ob man am Konto angemeldet bleibt - die Rückrufmethode
OnAuthenticationSuccess
bei einer erfolgreichen Benutzeranmeldung - die Rückrufmethode
OnError
bei einem Fehler
- ein Flag/Merker im Parameter
- Fügen Sie die Logiken für den Abruf einer Liste von virtuellen Währungen hinzu. Gehen Sie dazu in der
OnAuthenticationSuccess
-Methode wie folgt vor:- Übermitteln Sie den Autorisierungstoken an die Variable
XsollaStore.Instance.Token
.
- Übermitteln Sie den Autorisierungstoken an die Variable
- Einen während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.SignIn
erhaltenen JWT. - Den während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.GetUserAccessToken
erhaltenen Zugriffstoken der Bezahlstation. Nutzen Sie diesen Token, falls Sie Ihr eigenes Autorisierungssystem implementiert haben.
- Rufen Sie die SDK-Methode
XsollaStore.Instance.GetVirtualCurrencyBalance
auf, und übermitteln Sie Ihr Folgendes:- die Projekt-ID im Parameter
projectId
- die Projekt-ID im Parameter
- Rufen Sie die SDK-Methode
- die Methode
OnBalanceRequestSuccess
bei erfolgreichem Abruf einer Artikelliste - die Rückrufmethode
OnError
bei einem Fehler
- die Methode
- Fügen Sie in der Methode
OnBalanceRequestSuccess
Logiken zum Erstellen eines Widgets für jeden empfangene virtuelle Währung hinzu:- Instanziieren Sie ein Prefab des Artikel-Widgets als untergeordnetes Container-Objekt.
- Hängen Sie die empfangene
VirtualCurrencyWidget
-Komponente einerwidget
-Variable an.
- Übermitteln Sie die folgenden Daten an das Guthaben-Widget:
- Übermitteln Sie den Wert der Variable
balanceItem.name
an das Element mit dem Namen der virtuellen Währung. - Übermitteln Sie den Wert der Variable
balanceItem.amount.ToString()
an das Element mit der Menge der virtuellen Währung. - Implementieren Sie die folgenden Logiken für die Anzeige des Artikelpreises. Um das Bild einer virtuellen Währung anzuzeigen, verwenden Sie die Dienstprogrammmethode
ImageLoader.Instance.GetImageAsync
, und übermitteln Sie ihr Folgendes:- Die Bild-URL.
- Eine anonyme Rückruffunktion. Legen Sie in dieser Funktion den erhaltenen Sprite als Bild der virtuellen Währung fest.
- Übermitteln Sie den Wert der Variable
Beispielhaftes Page-Controller-Skript:
- C#
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class VirtualCurrenciesPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, OnAuthenticationSuccess, OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for virtual currencies
Token.Instance = Token.Create(token);
XsollaStore.Instance.GetVirtualCurrencyBalance(XsollaSettings.StoreProjectId, OnBalanceRequestSuccess, OnError);
}
private void OnBalanceRequestSuccess(VirtualCurrenciesBalance balance)
{
// Iterating the virtual currencies list and assign values for appropriate ui elements
foreach (var balanceItem in balance.items)
{
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<VirtualCurrencyWidget>();
widget.NameText.text = balanceItem.name;
widget.AmountText.text = balanceItem.amount.ToString();
ImageLoader.Instance.GetImageAsync(balanceItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
}
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Das folgende Bild zeigt das Arbeitsergebnis des Skripts.
Dieses Tutorial erläutert, wie Sie die SDK-Methoden verwenden, um Artikel im Benutzerinventar anzuzeigen.
Die Logiken und die Benutzeroberfläche in den Beispielen sind einfach gehalten und können in Ihrer Anwendung durchaus komplexer ausfallen. Eine mögliche Option zur Implementierung des Inventars ist im Demoprojekt beschrieben.
Artikel-Widget erstellen
- Erstellen Sie ein leeres Spielobjekt. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Konvertieren Sie das erstellte Spielobjekt in ein Prefab. Ziehen Sie dazu ein Spielobjekt aus dem
Hierarchy -Fenster in einProject -Fenster. - Wählen Sie ein erstelltes Prefab aus, und klicken Sie im
Inspector -Fenster aufOpen Prefab . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Artikelhintergrundbild
- Artikelname
- Artikelbeschreibung
- Artikelmenge
- Artikelbild
Das folgende Bild zeigt den beispielhaften Widget-Aufbau.
Artikel-Widget-Skript erstellen
- Erstellen Sie ein
InventoryItemWidget
-Skript, übernommen aus der Basisklasse MonoBehaviour. - Deklarieren Sie Variablen für die Benutzeroberflächenelemente des Artikel-Widgets, und legen Sie die Werte dafür im
Inspector -Fenster fest.
Beispielhaftes Widget-Skript:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class InventoryItemWidget : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Text DescriptionText;
public Text QuantityText;
public Image IconImage;
}
}
Seite für die Anzeige des Inventars erstellen
- Legen Sie in der Szene ein leeres Spielobjekt an. Wechseln Sie dazu in das Hauptmenü, und klicken Sie auf
GameObject > Create Empty . - Fügen Sie die folgenden Benutzeroberflächenelemente als untergeordnete Prefab-Objekte hinzu, und konfigurieren Sie deren Erscheinungsbild:
- Seitenhintergrundbild
- Anzeigebereich für Artikel-Widgets
Das folgende Bild zeigt einen beispielhaften Seitenaufbau.
Page Controller erstellen
- Erstellen Sie ein
InventoryItemsPage
-Skript, übernommen aus der BasisklasseMonoBehaviour
. - Deklarieren Sie die folgenden Variablen:
WidgetsContainer
— Container für Artikel-WidgetsWidgetPrefab
— Prefab des Artikel-Widgets
- Hängen Sie einem Seiten-Spielobjekt ein Skript an:
- Wählen Sie ein Objekt im
Hierarchy -Fenster aus. - Klicken Sie im
Inspector -Fenster aufAdd Component , und wählen Sie einInventoryItemsPage
-Skript aus.
- Wählen Sie ein Objekt im
- Legen Sie Werte für die Variablen im
Inspector -Fenster fest. - Fügen Sie Anmeldelogiken hinzu. Rufen Sie dazu eine
XsollaLogin.Instance.SignIn
-SDK-Methode in der MethodeStart
auf, und übermitteln Sie ihr Folgendes:- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
username
- ein Benutzerpasswort im Parameter
password
- einen Benutzernamen oder eine E-Mail-Adresse im Parameter
xsolla
, Passwort: xsolla
).- ein Flag/Merker im Parameter
rememberUser
bezüglich dessen, ob man am Konto angemeldet bleibt - die Rückrufmethode
OnAuthenticationSuccess
bei einer erfolgreichen Benutzeranmeldung - die Rückrufmethode
OnError
bei einem Fehler
- ein Flag/Merker im Parameter
- Fügen Sie die Logik für den Abruf einer Artikelliste im Inventar hinzu. Gehen Sie dazu in der
OnAuthenticationSuccess
-Methode wie folgt vor:- Übermitteln Sie einen Autorisierungstoken an die Variable
XsollaStore.Instance.Token
.
- Übermitteln Sie einen Autorisierungstoken an die Variable
- Einen während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.SignIn
erhaltenen JWT. - Den während der Benutzerautorisierung über die SDK-Methode
XsollaLogin.Instance.GetUserAccessToken
erhaltenen Zugriffstoken der Bezahlstation. Nutzen Sie diesen Token, falls Sie Ihr eigenes Autorisierungssystem implementiert haben.
- Rufen Sie die SDK-Methode
XsollaStore.Instance.GetInventoryItems
auf, und übermitteln Sie Ihr Folgendes:- eine Projekt-ID im Parameter
projectId
- eine Projekt-ID im Parameter
- Rufen Sie die SDK-Methode
- die Methode
OnItemsRequestSuccess
bei erfolgreichem Abruf einer Artikelliste - die Rückrufmethode
OnError
bei einem Fehler
- die Methode
- Fügen Sie für jeden empfangenen Artikel in der Methode
OnItemsRequestSuccess
eine Logik für das Erstellen eines Widgets hinzu:- Prüfen Sie mithilfe der Methode
InventoryItem.IsVirtualCurrency
, ob der empfangenen Artikel keine virtuelle Währung ist.
- Prüfen Sie mithilfe der Methode
- Instanziieren Sie ein Prefab eines Artikel-Widgets als untergeordnetes Container-Objekt.
- Hängen Sie die empfangene
InventoryItemWidget
-Komponente einerwidget
-Variable an.
- Übermitteln Sie die folgenden Daten an das Artikel-Widget:
- Übermitteln Sie den Wert der Variable
inventoryItem.name
an das Element mit dem Artikelnamen. - Übermitteln Sie den Wert der Variable
inventoryItem.description
an das Element mit der Artikelbeschreibung. - Übermitteln Sie den Wert der Variable
inventoryItem.amount.ToString()
an das Element mit der Artikelmenge. - Nutzen Sie zum Anzeigen eines Artikelbilds die Dienstprogrammmethode
ImageLoader.Instance.GetImageAsync
, und übermitteln Sie ihr Folgendes:- Bild-URL
- Eine anonyme Funktion als Rückruf. Fügen Sie in dieser Funktion ein erhaltenes Sprite als Artikelbild ein.
- Übermitteln Sie den Wert der Variable
Beispielhaftes Page-Controller-Skript:
- C#
using UnityEngine;
using Xsolla.Core;
using Xsolla.Login;
using Xsolla.Store;
namespace Recipes
{
public class InventoryItemsPage : MonoBehaviour
{
// Declaration of variables for containers and widget prefabs
public Transform WidgetsContainer;
public GameObject WidgetPrefab;
private void Start()
{
// Starting the authentication process
XsollaLogin.Instance.SignIn("xsolla", "xsolla", true, null, OnAuthenticationSuccess, OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for virtual currencies
Token.Instance = Token.Create(token);
XsollaStore.Instance.GetInventoryItems(XsollaSettings.StoreProjectId, OnItemsRequestSuccess, OnError);
}
private void OnItemsRequestSuccess(InventoryItems inventoryItems)
{
// Iterating the item list and assign values for appropriate ui elements
foreach (var inventoryItem in inventoryItems.items)
{
if (inventoryItem.IsVirtualCurrency())
continue;
var widgetGo = Instantiate(WidgetPrefab, WidgetsContainer, false);
var widget = widgetGo.GetComponent<InventoryItemWidget>();
widget.NameText.text = inventoryItem.name;
widget.DescriptionText.text = inventoryItem.description;
widget.QuantityText.text = inventoryItem.quantity.ToString();
ImageLoader.Instance.GetImageAsync(inventoryItem.image_url, (url, sprite) => widget.IconImage.sprite = sprite);
}
}
private void OnError(Error error)
{
UnityEngine.Debug.LogError($"Error message: {error.errorMessage}");
}
}
}
Das folgende Bild zeigt das Arbeitsergebnis des Skripts.
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.