アプリケーション側でSDKを統合する
- ログインシステムやゲーム内ストアなど、アプリケーションの各ページのインターフェイスをデザインします。
- SDKメソッドを使用して、アプリケーションのロジックに応じたイベント処理を設定します。SDKの基本的な機能を使い始めるには、以下のステップバイステップのチュートリアルに従います。
この説明では、SDKのメソッドを使用して実装する方法を示します:
- ユーザー登録
- 登録確認メールの再送依頼
- ユーザーログイン
- ユーザーパスワードリセット
ユーザーの認証は、ユーザー名またはメールアドレスで行うことができます。以下の例では、ユーザー名でユーザーを認証し、メールアドレスは登録の確認やパスワードのリセットに使用します。
例題の論理とインターフェースは、お客様のアプリケーションでの使用よりも複雑ではありません。認証システムの実装方法は、デモプロジェクトで紹介されています。
ユーザー登録を実装する
このチュートリアルでは、以下のロジックの実装について説明します:
ページのインターフェースを作成する
登録ページのシーンを作り、そこに以下の要素を追加します:
- ユーザー名欄
- ユーザーEメールアドレス欄
- ユーザーパスワード欄
- 登録ボタン
次の図は、ページ構成の例です。
ページコントローラーを作成する
- MonoBehaviour基底クラスを継承したスクリプト
RegistrationPage
を作成します。 - ページインターフェース要素の変数を宣言し、
Inspector パネルでその値を設定します。 - 登録をクリックする処理にロジックを追加します:
Start
メソッドで、クリックイベントを購読します。- ボタンをクリックした後に呼び出される匿名メソッドを追加します。
- このメソッドで、
username
、email
、password
の各変数を宣言し、ページ上のフィールドの値で初期化します。 XsollaAuth.Instance.Register
SDKメソッドを呼び出して、username
、email
、およびpassword
の各変数、ページ上のフィールドの値を渡します:
OnSuccess
— 登録が成功した場合に呼び出されるOnError
— エラーが発生した場合に呼び出される
スクリプトの例では、OnSuccess
とOnError
メソッドは標準のDebug.Logメソッドを呼び出します。エラーコードと説明は、error
パラメータに渡されます。
登録メールの再送リクエストのページを開いたり、登録が成功した場合にログインページを開くなど、他のアクションを追加することができます。
登録ページのスクリプトの例:
- C#
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;
namespace Recipes
{
public class RegistrationPage : MonoBehaviour
{
// Declaration of variables for UI elements on the page
[SerializeField] private InputField UsernameInput;
[SerializeField] private InputField EmailInputField;
[SerializeField] private InputField PasswordInputField;
[SerializeField] private Button RegisterButton;
private void Start()
{
// Handling the button click
RegisterButton.onClick.AddListener(() =>
{
var username = UsernameInput.text;
var email = EmailInputField.text;
var password = PasswordInputField.text;
XsollaAuth.Instance.Register(username, password, email, onSuccess: OnSuccess, onError: OnError);
});
}
private void OnSuccess()
{
UnityEngine.Debug.Log("Registration successful");
// Some actions
}
private void OnError(Error error)
{
UnityEngine.Debug.Log($"Registration failed. Description: {error.errorMessage}");
// Some actions
}
}
}
登録の確認メールを設定する
登録に成功すると、ユーザーは指定したアドレスに登録確認メールを受け取ります。パブリッシャーアカウントで、ユーザーに送られるメールはカスタマイズできます。
Androidアプリケーションを開発している場合、ユーザーが登録を確認した後、アプリケーションに戻るためのディープリンクをセットアップします。
登録確認メールの再送依頼を実装する
このチュートリアルでは、以下のロジックの実装について説明します:
ページのインターフェースを作成する
確認メールの再送信依頼があるページのシーンを作り、そこに以下の要素を追加します:
- ユーザー名/メールアドレス欄
- メール再送信ボタン
次の図は、ページ構成の一例です。
ページコントローラーを作成する
- MonoBehaviour基底クラスを継承したスクリプト
ResendConfirmationEmail
を作成します。 - ページインターフェース要素の変数を宣言し、
Inspector パネルでその値を設定します。 - メール再送信ボタンをクリックする処理にロジックを追加します:
Start
メソッドで、クリックイベントを購読します。- ボタンをクリックした後に呼び出される匿名メソッドを追加します。
- このメソッドでは、
username
変数を宣言し、ページ上のフィールドの値で初期化します。 XsollaAuth.Instance.ResendConfirmationLink
のSDKメソッドを呼び出し、username
変数とOnSuccess
およびOnError
メソッドを渡します。
メール再送ページのスクリプト例:
- C#
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;
namespace Recipes
{
public class ResendConfirmationEmail : MonoBehaviour
{
// Declaration of variables for UI elements on the page
[SerializeField] private InputField UsernameInput;
[SerializeField] private Button ResendEmailButton;
private void Start()
{
// Handling the button click
ResendEmailButton.onClick.AddListener(() =>
{
var username = UsernameInput.text;
XsollaAuth.Instance.ResendConfirmationLink(username, onSuccess: OnSuccess, onError: OnError);
});
}
private void OnSuccess()
{
UnityEngine.Debug.Log("Resend confirmation email successful");
// Some actions
}
private void OnError(Error error)
{
UnityEngine.Debug.Log($"Resend confirmation email failed. Description: {error.errorMessage}");
// Some actions
}
}
}
リクエストが成功した場合、ユーザーは登録時に指定したメールアドレスに登録確認メールを受け取ります。
ユーザーログインを実装する
このチュートリアルでは、以下のロジックの実装について説明します:
ページのインターフェースを作成する
ログインページのシーンを作成し、そこに以下の要素を追加します:
- ユーザー名欄
- パスワード欄
- ログイン状態を保存するチェックボックス
- ログインボタン
次の図は、ページ構成の一例です。
ページコントローラーを作成する
- MonoBehaviour基底クラスを継承したスクリプト
AutorizationPage
を作成します。 - ページインターフェース要素の変数を宣言し、
Inspector パネルでその値を設定します。 - ログインボタンをクリックする処理にロジックを追加します:
Start
メソッドで、クリックイベントを購読します。- ボタンをクリックした後に呼び出される匿名メソッドを追加します。
- このメソッドでは、
username
とpassword
という変数を宣言し、ページ上のフィールドの値で初期化します。rememberMe
変数を作成し、アカウントを記憶するためのチェックボックスの状態で初期化します。 XsollaAuth.Instance.SignIn
のSDKメソッドを呼び出し、username
、password
とrememberMe
の各変数およびOnSuccess
、OnError
の各メソッドを渡します。
token
パラメータに渡されます。認証トークンは、エクソラサーバへのリクエストで使用されます。ログインページのスクリプトの例:
- C#
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;
namespace Recipes
{
public class AuthorizationPage : MonoBehaviour
{
// Declaration of variables for UI elements on the page
[SerializeField] private InputField UsernameInput;
[SerializeField] private InputField PasswordInputField;
[SerializeField] private Toggle RememberMeToggle;
[SerializeField] private Button AuthorizationButton;
private void Start()
{
// Handling the button click
AuthorizationButton.onClick.AddListener(() =>
{
var username = UsernameInput.text;
var password = PasswordInputField.text;
var rememberMe = RememberMeToggle.isOn;
XsollaAuth.Instance.SignIn(username, password, rememberMe, null, onSuccess: OnSuccess, onError: OnError);
});
}
private void OnSuccess(string token)
{
UnityEngine.Debug.Log($"Authorization successful. Token: {token}");
// Some actions
}
private void OnError(Error error)
{
UnityEngine.Debug.Log($"Authorization failed. Description: {error.errorMessage}");
// Some actions
}
}
}
パスワードリセットを実装する
このチュートリアルでは、以下のロジックの実装について説明します:
ページのインターフェースを作成する
パスワードリセットページのシーンを作成し、以下の要素をページに追加します:
- ユーザー名/メールアドレス欄
- パスワードリセットボタン
次の図は、ページ構成の一例です。
ページコントローラーを作成する
- MonoBehaviour基底クラスを継承したスクリプト
ResetPasswordPage
を作成します。 - ページインターフェース要素の変数を宣言し、
Inspector パネルでその値を設定します。 - パスワードリセットボタンをクリックする処理にロジックを追加します:
Start
メソッドで、クリックイベントを購読します。- ボタンがクリックされた後に呼び出される匿名メソッドを追加します。
- このメソッドでは、
username
変数を宣言し、ページ上のフィールドの値で初期化します。 XsollaAuth.Instance.ResetPassword
のSDKメソッドを呼び出し、username
変数とOnSuccess
およびOnError
メソッドを渡します。
パスワードリセットページのスクリプトの例:
- C#
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;
namespace Recipes
{
public class ResetPasswordPage : MonoBehaviour
{
// Declaration of variables for UI elements on the page
[SerializeField] private InputField UsernameInput;
[SerializeField] private Button ResetPasswordButton;
private void Start()
{
// Handling the button click
ResetPasswordButton.onClick.AddListener(() =>
{
var username = UsernameInput.text;
XsollaAuth.Instance.ResetPassword(username, null, null, OnSuccess, OnError);
});
}
private void OnSuccess()
{
UnityEngine.Debug.Log("Password reset successful");
// Some actions
}
private void OnError(Error error)
{
UnityEngine.Debug.Log($"Password reset failed. Description: {error.errorMessage}");
// Some actions
}
}
}
パスワード再設定のリクエストに成功すると、ユーザーにパスワード再設定用のリンクが記載されたメールが送信されます。パブリッシャーアカウント> ログインプロジェクト > セキュリティ > OAuth 2.0 > OAuth 2.0リダイレクトURIで、認証に成功した後、メールによる確認、またはパスワードのリセット後に、ユーザーがリダイレクトされるURLアドレスまたはパスを設定することができます。
このガイドでは、SDKメソッドを使用して、ユーザーのサインアップとソーシャルネットワークアカウントによるログインを実装する方法を紹介します。
ユーザー名/ユーザーのメールアドレスとパスワードによるユーザー認証とは異なり、ユーザーのサインアップのために別のロジックを実装する必要はありません。ユーザーの初回ログインがソーシャルネットワーク経由の場合、新しいアカウントが自動的に作成されます。
別の認証方法としてアプリケーションにソーシャルログインを実装している場合、以下の条件を満たすと、ソーシャルネットワークアカウントは既存のユーザーアカウントに自動的にリンクします。
- ユーザー名/メールアドレスとパスワードでサインアップしたユーザーが、ソーシャルネットワークアカウントを介してアプリケーションにログインしました。
- ソーシャルネットワークでは、メールアドレスを返します。
- ソーシャルネットワークでのユーザーのメールアドレスは、アプリケーションで登録に使用したメールアドレスと同じです。
LinkSocialProvider
SDKメソッドを使用します。このチュートリアルでは、以下のロジックの実装について説明します:
この例では、Twitterアカウントによるユーザーログインを設定しています。すべてのソーシャルネットワークを同じ方法で設定できます。
例題の論理とインターフェースは、お客様のアプリケーションでの使用よりも複雑ではありません。認証システムの実装方法は、デモプロジェクトで紹介されています。
ページのインターフェースを作成する
ログインページのシーンを作成し、そこにソーシャルログインボタンを追加します。次の図は、ページ構成の例です。
ページコントローラーを作成する
- MonoBehaviour基底クラスを継承した
SocialAuthorizationPage
スクリプトを作成します。 - アプリケーションのログインページインターフェース要素の変数を宣言し、
Inspector パネルでその値を設定します。 - ログインボタンをクリックする処理にロジックを追加します:
Start
メソッドで、クリックイベントを購読します。- ボタンをクリックした後に呼び出される匿名メソッドを追加します。
- ログインページのURLを渡すには、匿名メソッドで
url
変数を宣言します。SocialProvider
パラメータにFacebook
の値を渡して、GetSocialNetworkAuthUrl
SDKメソッドでこの変数を初期化します。 - ブラウザを開くには、
BrowserHelper.Instance.Open
メソッドを呼び出します。ビルドインのブラウザーを使用するには、url
変数とtrue
値をメソッドに渡します。
- トークンを取得してブラウザを閉じるために、ユーザー登録が成功した後のページURLの変化を追跡します:
singlePageBrowser
変数を宣言し、BrowserHelper.Instance.GetLastBrowser
SDKメソッドで初期化します。- アクティブページのURL変更イベントを受信し、ハンドラとして
OnUrlChanged
メソッドを設定します。
- トークンを取得してブラウザを閉じるために、ユーザー登録が成功した後のページURLの変化を追跡します:
- トークンの取得を実装します:
OnUrlChanged
メソッドで渡されたアクティブページのURLを解析するために、ParseUtils.TryGetValueFromUrl
ユーティリティーメソッドを使用します。- アクティブページのURLに認証コードが含まれているかどうかをチェックする機能を追加します。
ParseUtils.TryGetValueFromUrl
メソッドは、code
変数で認証コードを渡します。 - 認証コードをトークンと交換するには、
ExchangeCodeToToken
SDKメソッドを呼び出し、code
変数と以下のメソッドを渡します:OnSuccess
— 登録が成功した場合に呼び出されるOnError
— エラーが発生した場合に呼び出される
スクリプトの例では、OnSuccess
とOnError
メソッドは標準のDebug.Logメソッドを呼び出します。他のアクションを追加することができます。
ユーザーがログインに成功すると、認証トークンがtoken
パラメータで渡されます。このトークンは、エクソラサーバへのリクエストで使用されます。エラーが発生した場合は、そのコードと説明がerror
パラメータに渡されます。
- トークンを取得したら、ブラウザでゲームオブジェクトを削除します。
ログインページのスクリプトの例:
- C#
using UnityEngine;
using UnityEngine.UI;
using Xsolla.Auth;
using Xsolla.Core;
namespace Recipes
{
public class SocialAuthorizationPage : MonoBehaviour
{
// Declaration of variables for UI elements on the page
[SerializeField] private Button FacebookButton;
private void Start()
{
// Handling the button click
FacebookButton.onClick.AddListener(() =>
{
// Opening browser
var url = XsollaAuth.Instance.GetSocialNetworkAuthUrl(SocialProvider.Facebook);
BrowserHelper.Instance.Open(url, true);
// Determining the end of authentication
BrowserHelper.Instance.InAppBrowser.AddUrlChangeHandler(OnUrlChanged);
});
}
// Getting token
private void OnUrlChanged(string url)
{
if (ParseUtils.TryGetValueFromUrl(url, ParseParameter.code, out var code))
{
XsollaAuth.Instance.ExchangeCodeToToken(code, OnSuccess, OnError);
BrowserHelper.Instance.Close();
}
}
private void OnSuccess(string token)
{
UnityEngine.Debug.Log($"Authorization successful. Token: {token}");
// Some actions
}
private void OnError(Error error)
{
UnityEngine.Debug.Log($"Authorization failed. Description: {error.errorMessage}");
// Some actions
}
}
}
このチュートリアルでは、SDKメソッドを使って、ゲーム内ストアに以下のアイテムを表示する方法を紹介します:
- 仮想アイテム
- 仮想アイテムのグループ
- バンドル
- 仮想通貨のパッケージ
始める前に、パブリッシャーアカウントの項目を設定します:
このチュートリアルでは、以下のロジックの実装について説明します:
例のロジックとインターフェイスは、アプリケーションよりも複雑ではありません。ゲーム内ストアの実装オプションで可能なアイテムカタログについては、デモプロジェクトで説明しています。
カタログ内のすべてのアイテムの例は次のとおり:
- アイテム名
- アイテム説明
- アイテム価格
- 画像
また、アイテムに関する他の情報がゲーム内ストアに保存されている場合は、その情報を表示することもできます。
仮想アイテムの表示を実装する
アイテムウィジェットを作成する
- 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、
GameObject > Create Empty を選択します。 - プレハブで作成したゲームオブジェクトを
Hierarchy パネルからProject パネルにドラッグして変換します。 - 作成したプレハブを選択し、
Inspector パネルで、Open Prefab をクリックします。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- アイテムの背景画像
- アイテム名
- アイテムの説明
- アイテムの価格
- アイテムの画像
次の図は、ウィジェットの構造の一例です。
アイテムウィジェットスクリプトを作成する
- MonoBehaviourのベースクラスを継承した
VirtualItemWidget
スクリプトを作成します。 - アイテムウィジェットのインターフェイス要素のための変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
アイテムのリストを表示するページを作成する
- シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューで
GameObject > Create Empty を選択します。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ページの背景画像
- アイテムウィジェットの表示エリア
次の図は、ページ構成の一例です。
ページコントローラーを作成する
MonoBehaviour
のベースクラスを継承したVirtualItemsPage
スクリプトを作成します。- 以下の変数を宣言します:
WidgetsContainer
— ウィジェットのコンテナWidgetPrefab
— アイテムウィジェットのプレハブ
- ページゲームオブジェクトにスクリプトを添付します:
Hierarchy パネルでオブジェクトを選択します。Inspector パネルで、Add Component をクリックしてVirtualItemsPage
スクリプトを選択します。
Inspector パネルで変数の値を設定します。
Start
メソッドで、XsollaAuth.Instance.SignIn
SDKメソッドを呼び出してログインロジックを追加して、以下のことを渡します:username
パラメータのユーザー名またはメールアドレスpassword
パラメータのユーザーパスワード
xsolla
、パスワード:xsolla
)。- アカウントを記憶するための
rememberUser
パラメータのフラグ - ユーザーログインを成功させるための
OnAuthenticationSuccess
コールバックメソッド - エラーの
OnError
コールバックメソッド
- アカウントを記憶するための
- アイテムのリストを取得するためのロジックを追加します。
OnAuthenticationSuccess
メソッドで、XsollaCatalog.Instance.GetCatalog
SDKメソッドを呼び出して、以下のことを渡します:projectId
パラメータでのプロジェクトID
- アイテムのリストの取得に成功した場合の
OnItemsRequestSuccess
- エラーが発生した場合の
OnError
コールバックメソッド offset
パラメーターのリストの最初の項目に基づくオフセットlimit
パラメーターにロードされたアイテムの数
- アイテムのリストの取得に成功した場合の
offset
とlimit
のパラメータは必須ではありません。それらを使用してページネーションを実装します — カタログ内のアイテムのページごとの表示。ページ内の最大アイテム数は50です。カタログに50を超えるアイテムがある場合は、ページネーションが必要です。OnItemsRequestSuccess
メソッドで、受信したすべてのアイテムのウィジェットを作成するためのロジックを追加します:- アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
- 受信した
VirtualItemWidget
コンポーネントをwidget
変数にアタッチします。
- 以下のデータをアイテムウィジェットに渡します:
storeItem.name
変数値をアイテム名の要素に渡します。- アイテムの説明が書かれた要素に
storeItem.description
変数の値を渡します。 - アイテムの価格を表示するために、以下のロジックを実装します:
storeItem.price
変数の値が、null
と一致しない場合、アイテムは実際通貨で販売されます。価格を{amount} {currency}
の形式で指定し、ウェジット要素に渡します。storeItem.virtual_prices
変数の値が、null
と一致しない場合、アイテムは仮想通貨で販売されます。価格を{name}: {amount}
の形式で指定し、ウェジット要素に渡します。
storeItem.virtual_prices
変数は、同じアイテムの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > 仮想アイテムのアイテム設定で、デフォルトで指定されている価格を示しています。- アイテムの画像を表示するには、
ImageLoader.Instance.GetImageAsync
ユーティリティーメソッドを使用し、以下のことを渡します:- 画像URL。
- コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。
- アイテムの画像を表示するには、
ページコントローラースクリプトの例:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
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
XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, null, OnAuthenticationSuccess, OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for catalog from store
XsollaCatalog.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}");
}
}
}
次の写真は、スクリプトの作業の結果です。
仮想アイテムグループの表示を実装する
アイテムウィジェットを作成する
- 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、
GameObject > Create Empty を選択します。 - プレハブで作成したゲームオブジェクトを
Hierarchy パネルからProject パネルにドラッグして変換します。 - 作成したプレハブを選択し、
Inspector パネルで、Open Prefab をクリックします。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- アイテムの背景画像
- アイテム名
- アイテムの説明
- アイテムの価格
- アイテムの画像
次の図は、ウィジェットの構造の一例です。
アイテムウィジェットスクリプトを作成する
- MonoBehaviourのベースクラスを継承した
VirtualItemWidget
スクリプトを作成します。 - アイテムウィジェットのインターフェイス要素のための変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
アイテムのグループを開くボタンのウィジェットを作成する
- 空のゲームオブジェクトを作成します。これを行うには、メインメニューで
GameObject > Create Empty を選択します。 - 作成したゲームオブジェクトを
Hierarchy パネルからProject パネルにドラッグしてプレハブに変換します。 - 作成したプレハブを選択し、
Inspector パネルでOpen Prefab をクリックします。 - アイテムのグループをプレハブの子オブジェクトとして表示するボタンを追加し、そのビジュアルを設定します。
次の図は、ウィジェットの構造の一例です。
アイテムのグループを開くボタンのスクリプトを作成する
MonoBehaviour
ベースクラスから継承したVirtualItemGroupButton
スクリプトを作成します。- アイテムのグループを開くボタンの変数を宣言し、
Inspector パネルに変数の値を設定します。 - プレハブのルートオブジェクトにスクリプトを追加します:
Hierarchy パネルでオブジェクトを選択します。Inspector パネルで、Add Component をクリックし、VirtualItemGroupButton
スクリプトを選択します。
ウィジェットスクリプトの例:
- C#
using UnityEngine;
using UnityEngine.UI;
namespace Recipes
{
public class VirtualItemGroupButton : MonoBehaviour
{
// Declaration of variables for UI elements
public Text NameText;
public Button Button;
}
}
アイテムのリストを表示するページを作成する
- シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューで
GameObject > Create Empty を選択します。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ページの背景画像
- アイテムグループボタン表示エリア
- アイテムウェジットボタン表示エリア
次の図は、ページ構成の一例です。
ページコントローラーを作成する
MonoBehaviour
ベースクラスから継承したVirtualItemsByGroupsPage
スクリプトを作成します。- 変数を宣言します:
GroupButtonsContainer
— グループボタンのコンテナGroupButtonPrefab
— ボタンプレハブItemWidgetsContainer
— アイテムウィジェットのコンテナWidgetPrefab
— アイテムウィジェットプレハブ
- ページゲームオブジェクトにスクリプトをアタッチします:
Hierarchy パネルでオブジェクトを選択します。Inspector パネルで、Add Component をクリックして、VirtualItemsByGroupsPage
スクリプトを選択します。
Inspector パネルで変数の値を設定します。Start
メソッドでXsollaAuth.Instance.SignIn
SDKメソッドを呼び出すことでログインロジックを追加し、以下のことを渡します:username
パラメータでのユーザー名またはメールアドレスpassword
パラメータでのユーザーパスワード
xsolla
、パスワード:xsolla
)。- アカウントを記憶するための
rememberUser
パラメータのフラグ - ユーザーログインを成功させるための
OnAuthenticationSuccess
コールバックメソッド - エラーの
OnError
コールバックメソッド
- アカウントを記憶するための
- アイテムのリストを取得するためのロジックを追加します。
OnAuthenticationSuccess
メソッドで、XsollaCatalog.Instance.GetCatalog
SDKメソッドを呼び出して、以下のことを渡します:projectId
パラメータでのプロジェクトID
- アイテムのリストの取得に成功した場合の
OnItemsRequestSuccess
- エラーが発生した場合の
OnError
コールバックメソッド offset
パラメーターのリストの最初の項目に基づくオフセットlimit
パラメーターにロードされたアイテムの数
- アイテムのリストの取得に成功した場合の
offset
とlimit
のパラメータは必須ではありません。それらを使用してページネーションを実装します — カタログ内のアイテムのページごとの表示。ページ内の最大アイテム数は50です。カタログに50を超えるアイテムがある場合は、ページネーションが必要です。OnItemsRequestSuccess
メソッドで、アイテムグループのリストを作成するためのロジックを追加します:- 受信したアイテムリストからユニークグループのリストを取得します。そこに、カテゴリーに依存しないすべてのアイテムを表示する
All
要素を追加します。 - 子オブジェクトをすべて削除して、ボタンコンテナをクリアします。これを行うには、
DeleteAllChildren
メソッドを呼び出し、コンテナオブジェクトを渡します。 - すべてのアイテムグループに対するには:
- 受信したアイテムリストからユニークグループのリストを取得します。そこに、カテゴリーに依存しないすべてのアイテムを表示する
- アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
- 受信した
VirtualItemGroupButton
コンポーネントをgroupButton
変数に設定します。 groupName
変数値をグループ名の要素に渡します。- 翻译结果ボタンをクリックするアクションに無名のメソッドを追加します。このメソッドでは、
OnGroupSelected
メソッドを呼び出し、パラメータとしてアイテムグループの名とアイテムのリストを渡します。
- すべてのアイテムを表示するには、
OnGroupSelected
メソッドを呼び出し、グループ名としてAll
を渡します。
- すべてのアイテムを表示するには、
OnGroupSelected
メソッドで、アイテムの初期表示用のロジックを追加します:itemsForDisplay
変数を作成し、アイテムグループの名前にAll
が付いている場合は、受け取ったすべてのアイテムをこの変数に割り当てます。それ以外の場合は、グループ名がgroupName
変数と一致するアイテムをitemsForDisplay
変数にリンクします。- 子オブジェクトをすべて削除して、ボタンコンテナをクリアします。これを行うには、
DeleteAllChildren
メソッドを呼び出し、コンテナオブジェクトを渡します。
- 受信したすべてのアイテムのウィジェットを作成するためのロジックを追加します。
- アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
- 受信した
VirtualItemWidget
コンポーネントをwidget
変数にアタッチします。
- 以下のデータをアイテムウィジェットに渡します:
- アイテム名を持つ要素に
storeItem.name
の変数値を渡します。 storeItem.description
の変数値を、アイテムの説明を持つ要素に渡します。- アイテムの価格を表示するために、以下のロジックを実装します:
- アイテム名を持つ要素に
storeItem.price
変数の値が、null
と一致しない場合、アイテムは実際通貨で販売されています。価格を{amount} {currency}
形式で指定し、ウェジット要素に渡します。storeItem.virtual_prices
変数の値が、null
と一致しない場合、アイテムは仮想通貨で販売されます。価格を{name}: {amount}
形式で指定し、ウェジット要素に渡します。
storeItem.virtual_prices
変数は、同じアイテムの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > 仮想アイテムのアイテム設定で、デフォルトで指定されている価格を示しています。- アイテムの画像を表示するには、
ImageLoader.Instance.GetImageAsync
ユーティリティーメソッドを使用し、以下のことを渡します:- 画像URL。
- コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。
- アイテムの画像を表示するには、
- C#
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
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
XsollaAuth.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
XsollaCatalog.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}");
}
}
}
ページコントローラースクリプトの例:
バンドルの表示を実装する
バンドルウィジェットを作成する
- 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、
GameObject > Create Empty を選択します。 - プレハブで作成したゲームオブジェクトを
Hierarchy パネルからProject パネルにドラッグして変換します。 - 作成したプレハブを選択し、
Inspector パネルで、Open Prefab をクリックします。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ウィジェットの背景画像
- バンドル名
- バンドル説明
- バンドル価格
- バンドルコンテンツの説明(アイテムとその数量)
- バンドル画像
次の図は、ウィジェットの構造の一例です。
ウィジェットスクリプトを作成する
- MonoBehaviourのベースクラスを継承した
BundleWidget
スクリプトを作成します。 - アイテムウィジェットのインターフェイス要素のための変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
バンドルを表示するページを作成する
- シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューで
GameObject > Create Empty を選択します。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ページの背景画像
- バンドルウィジェットの表示エリア
次の図は、ページ構成の一例です。
ページコントローラーを作成する
MonoBehaviour
ベースクラスを継承したBundlesPage
スクリプトを作成します。- 変数を宣言します:
WidgetsContainer
— バンドルウィジェットのコンテナWidgetPrefab
— バンドルウィジェットプレハブ
- ページゲームオブジェクトにスクリプトをアタッチします:
Hierarchy パネルでオブジェクトを選択します。Inspector パネルで、Add Component をクリックしてBundlesPage
スクリプトを選択します。
Inspector パネルで変数を設定します。Start
メソッドの中でXsollaAuth.Instance.SignIn
SDKメソッドを呼び出してパスすることでログインロジックを追加し、以下のことを渡します:username
パラメータでのユーザー名またはメールアドレスpassword
パラメータでのユーザーパスワード
xsolla
、パスワード:xsolla
)。- アカウントを記憶するための
rememberUser
パラメータのフラグ - ユーザーログインを成功させるための
OnAuthenticationSuccess
コールバックメソッド - エラーの
OnError
コールバックメソッド
- アカウントを記憶するための
- バンドルのリストを取得するためのロジックを追加します。
OnAuthenticationSuccess
メソッドで、XsollaCatalog.Instance.GetBundles
SDKメソッドを呼び出して、以下のことを渡します:projectId
パラメータでのプロジェクトID
- バンドルのリストを取得する操作を成功させるための
OnItemsRequestSuccess
コールバックメソッド - エラーの
OnError
コールバックメソッド
- バンドルのリストを取得する操作を成功させるための
OnBundlesRequestSuccess
メソッドで、受信したすべてのバンドルのウィジェットを作成するためのロジックを追加します:- アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
- 受信した
BundleWidget
コンポーネントをwidget
変数にアタッチします。
- バンドルウィジェットに以下のデータを渡します:
bundleItem.name
の変数値をアイテム名の要素に渡します。bundleItem.description
の変数値を、アイテムの説明を持つ要素に渡します。- バンドルコンテンツを表示するために、以下のロジックを実装します:
- バンドル内のすべてのアイテムを使用して、アイテム名とその数量を含むラインを形成します。行は、
{name} x {quantity}
の形式でなければなりません。 - 改行文字をセパレーターにして、これらの行を1行にまとめます。
- 新しい行をウィジェット要素に渡します。
- バンドル内のすべてのアイテムを使用して、アイテム名とその数量を含むラインを形成します。行は、
- バンドル価格を表示するために、以下のロジックを実装します:
bundleItem.price
変数の値が、null
と一致しない場合、バンドルは実際通貨で販売されます。価格を{amount} {currency}
の形式で指定し、ウェジット要素に渡します。bundleItem.virtual_prices
変数の値が、null
と一致しない場合、バンドルは実際通貨で販売されます。価格を{name}: {amount}
の形式で指定し、ウェジット要素に渡します。
- バンドル価格を表示するために、以下のロジックを実装します:
bundleItem.virtual_prices
変数は、同じバンドルの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > バンドルのアイテム設定で、デフォルトで指定されている価格を示しています。- アイテムの画像を表示するには、
ImageLoader.Instance.GetImageAsync
ユーティリティーメソッドを使用し、以下のことを渡します- 画像URL。
- コールバックとしての無名関数です。この関数では,受信したスプライトをバンドル画像として追加します。
- アイテムの画像を表示するには、
ページコントローラースクリプトの例:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
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
XsollaAuth.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
XsollaCatalog.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}");
}
}
}
次の写真は、スクリプトの作業の結果です。
仮想通貨パッケージの表示を実装する
仮想通貨パッケージのウィジェットを作成する
- 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、
GameObject > Create Empty を選択します。 - プレハブで作成したゲームオブジェクトを
Hierarchy パネルからProject パネルにドラッグして変換します。 - 作成したプレハブを選択し、
Inspector パネルで、Open Prefab をクリックします。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ウィジェットの背景画像
- パッケージ名
- パッケージ説明
- パッケージ価格
- パッケージ画像
次の図は、ウィジェットの構造の一例です。
ウィジェットスクリプトを作成する
- MonoBehaviourのベースクラスを継承した
VirtualCurrencyPackageWidget
スクリプトを作成します。 - アイテムウィジェットのインターフェイス要素のための変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
仮想通貨パッケージのリストを表示するページを作成する
- シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューで
GameObject > Create Empty を選択します。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ページの背景画像
- 仮想通貨パッケージウィジェットの表示エリア
次の図は、ページ構成の一例です。
ページコントローラーを作成する
MonoBehaviour
ベースクラスを継承したVirtualCurrencyPackagesPage
スクリプトを作成します。- 変数を宣言します:
WidgetsContainer
— ウィジェットのコンテナWidgetPrefab
— 仮想通貨パッケージプレハブ
- ページゲームオブジェクトにスクリプトをアタッチします:
Hierarchy パネルでオブジェクトを選択します。Inspector パネルで、Add Component をクリックして、VirtualCurrencyPackagesPage
スクリプトを選択します。
Inspector パネルで変数の値を設定します。XsollaAuth.Instance.SignIn
SDKのメソッドをStart
メソッドで呼び出してログインロジックを追加し、以下のことを渡します:
username
パラメータでのユーザー名またはメールアドレスpassword
パラメータでのユーザーパスワード
xsolla
、パスワード:xsolla
)。- アカウントを記憶するための
rememberUser
パラメータのフラグ - ユーザーログインを成功させるための
OnAuthenticationSuccess
コールバックメソッド - エラーの
OnError
コールバックメソッド
- アカウントを記憶するための
- アイテムのリストを取得するためのロジックを追加します。
OnAuthenticationSuccess
メソッドで、XsollaCatalog.Instance.GetVirtualCurrencyPackagesList
SDKメソッドを呼び出して、以下のことを渡します:projectId
パラメータでのプロジェクトID
- アイテムのリストを取得する操作を成功させるための
OnItemsRequestSuccess
- エラーの
OnError
コールバックメソッド
- アイテムのリストを取得する操作を成功させるための
OnPackagesRequestSuccess
メソッドで、受信したすべてのパッケージのウィジェットを作成するためのロジックを追加します:- アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
- 受信した
VirtualCurrencyPackageWidget
コンポーネントをwidget
変数にアタッチします。
- パッケージウィジェットに以下のデータを渡します:
- パッケージ名を持つ要素に
packageItem.name
の変数値を渡します。 packageItem.description
の変数値をパッケージの説明を持つ要素に渡します。- パッケージの価格を表示するために、以下のロジックを実装します:
- パッケージ名を持つ要素に
packageItem.price
変数の値が、null
と一致しない場合、パッケージは実際通貨で販売されています。価格を{amount} {currency}
形式で指定し、ウェジット要素に渡します。packageItem.virtual_prices
変数の値が、null
と一致しない場合、パッケージは仮想通貨で販売されます。価格を{name}: {amount}
形式で指定し、ウェジット要素に渡します。
packageItem.virtual_prices
変数は、同じパッケージの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > 仮想通貨 > パッケージのパッケージ設定で、デフォルトで指定されている価格を示しています。- アイテムの画像を表示するには、
ImageLoader.Instance.GetImageAsync
ユーティリティーメソッドを使用し、以下のことを渡します:- 画像URL。
- コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。
- アイテムの画像を表示するには、
ページコントローラースクリプトの例:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
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
XsollaAuth.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
XsollaCatalog.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}");
}
}
}
次の写真は、スクリプトの作業の結果です。
この説明では、SDKのメソッドを使用して、実際通貨で仮想アイテムの販売を実装する方法を示します。
始める前に、カタログに仮想アイテムを表示する機能を実装します。以下の例では、仮想アイテムの購入を実装する方法を説明します。他のアイテムタイプの設定も同様です。
このチュートリアルでは、以下のロジックの実装について説明します:
例題のロジックとインターフェイスは、あなたのアプリケーションに比べてそれほど複雑ではありません。実際通貨でアイテムを販売し、アイテムのカタログを表示するための実装オプションの可能性については、デモプロジェクトで説明しています。
アイテムウィジェットを完成する
アイテムウィジェットに購入ボタンを追加し、そのビジュアルを構成します。
次の図は、ウィジェットの構造の一例です。
アイテムウィジェットスクリプトを完成する
VirtualItemWidget
スクリプトを開きます。- 購入ボタン用の変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
アイテムのリストを表示するページコントローラーを完成する
VirtualItemsPage
スクリプトを開きます。OnAuthenticationSuccess
メソッドで、認証トークンをToken.Instance
変数に渡します。
XsollaAuth.Instance.SignIn
SDKメソッドによるユーザー認証の際に受け取ったJWT。- カスタムID(サーバーで生成したユーザーID)によりアプリケーションのバックエンドで受信するJWT。独自の認証システムを実装している場合は、このトークンを使用します。
- 仮想アイテム購入ボタンをクリックして処理するためのロジックを追加します:
OnItemsRequestSuccess
メソッドで、ボタンクリックイベントを購読する。- ボタンがクリックされた後に呼び出される匿名メソッドを追加します。
- このメソッドで、
XsollaCatalog.Instance.PurchaseItem
SDKメソッドを呼び出して注文を作成し、それに渡します:
projectId
パラメータでのプロジェクトIDitemSku
パラメータでのアイテム識別子- アイテム発注書の正常な形成を処理する
OnOrderCreateSuccess
メソッド - エラーの
OnError
コールバックメソッド
- 決済ページのオープンを実装します。これを行うには、
OnOrderCreateSuccess
メソッドを追加し、以下の中で呼び出します:- 決済ページを開くには
XsollaOrders.Instance.OpenPurchaseUi
SDKメソッド - 注文状況の変化を把握するには
TrackOrderStatus
コルーチン
- 決済ページを開くには
TrackOrderStatus
のコルーチンでは、1秒に1回、注文状況の情報を取得するように実装します。これをするには、XsollaOrders.Instance.CheckOrderStatus
SDKメソッドを利用して以下へ渡します:projectId
パラメータでのプロジェクトIDorderId
パラメータでの決済詳細からの注文番号- 注文ステータス情報の正常な受信を処理するための匿名メソッド
- エラー処理のための匿名メソッド
- 注文状況情報の正常な受信を処理するメソッドで、注文の決済中に
OnPurchaseSuccess
メソッドのコールバックを実装します(決済ステータスdone
またはpaid
)。 OnPurchaseSuccess
メソッドで、成功した仮想アイテム購入の処理を実装します。
- 決済ページを開くためにビルドインブラウザを使用している場合は、このブラウザを閉じてください。
ページのスクリプトの例:
- C#
using System.Collections;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
using Xsolla.Orders;
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
XsollaAuth.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);
XsollaCatalog.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(() =>
{
XsollaCatalog.Instance.PurchaseItem(XsollaSettings.StoreProjectId, storeItem.sku, OnOrderCreateSuccess, OnError);
});
}
}
private void OnOrderCreateSuccess(PurchaseData purchaseData)
{
XsollaOrders.Instance.OpenPurchaseUi(purchaseData);
StartCoroutine(TrackOrderStatus(purchaseData));
}
private IEnumerator TrackOrderStatus(PurchaseData purchaseData)
{
var isDone = false;
while (!isDone)
{
XsollaOrders.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}");
}
}
}
この説明では、SDKのメソッドを使用して、仮想アイテムの仮想通貨への販売を実装する方法を示します。
始める前に、カタログに仮想アイテムを表示する機能を実装します。以下の例では、仮想アイテムの購入を実装する方法を説明します。他のアイテムタイプの設定も同様です。
このチュートリアルでは、以下のロジックの実装について説明します:
例題のロジックとインターフェイスは、あなたのアプリケーションに比べてそれほど複雑ではありません。実際通貨でアイテムを販売し、アイテムのカタログを表示するための実装オプションの可能性については、デモプロジェクトで説明しています。
アイテムウィジェットを完成する
アイテムウィジェットに購入ボタンを追加し、そのビジュアルを構成します。
次の図は、ウィジェットの構造の一例です。
アイテムウィジェットスクリプトを完成する
VirtualItemWidget
スクリプトを開きます。- 購入ボタン用の変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
アイテムのリストを表示するページコントローラーを完成する
VirtualItemsPage
スクリプトを開きます。OnAuthenticationSuccess
メソッドで、認証トークンをToken.Instance
変数に渡します。
XsollaAuth.Instance.SignIn
SDKメソッドによるユーザー認証の際に受け取ったJWT。- カスタムID(サーバーで生成したユーザーID)によりアプリケーションのバックエンドで受信するJWT。独自の認証システムを実装している場合は、このトークンを使用します。
- 仮想アイテム購入ボタンをクリックして処理するためのロジックを追加します:
OnItemsRequestSuccess
メソッドで、ボタンクリックイベントを購読する。- ボタンがクリックされた後に呼び出される匿名メソッドを追加します。
- このメソッドで、
XsollaCatalog.Instance.PurchaseItem
SDKメソッドを呼び出して注文を作成し、それに渡します:
projectId
パラメータでのプロジェクトIDitemSku
パラメータでのアイテム識別子- アイテム発注書の正常な形成を処理する
OnOrderCreateSuccess
メソッド - エラーの
OnError
コールバックメソッド
OnOrderCreateSuccess
メソッドで、注文ステータスチェックプロセスを実装します。これをするには、XsollaOrders.Instance.CheckOrderStatus
SDKメソッドを利用して以下へ渡します:projectId
パラメータでのプロジェクトIDorderId
パラメータでの決済詳細からの注文番号- 注文ステータス情報の正常な受信を処理するための匿名メソッド
- エラー処理のための匿名メソッド
- 注文状況情報の正常な受信を処理するメソッドで、注文の決済中に
OnPurchaseSuccess
メソッドのコールバックを実装します(決済ステータスdone
またはpaid
)。 OnPurchaseSuccess
メソッドで、成功した仮想アイテム購入の処理を実装します。
ページのスクリプトの例:
- C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
using Xsolla.Orders;
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
XsollaAuth.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);
XsollaCatalog.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);
XsollaCatalog.Instance.PurchaseItemForVirtualCurrency(XsollaSettings.StoreProjectId, storeItem.sku, price.sku, OnOrderCreateSuccess, OnError);
});
}
}
private void OnOrderCreateSuccess(PurchaseData purchaseData)
{
XsollaOrders.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}");
}
}
}
このチュートリアルでは、SDKメソッドを使って、アプリ内で仮想通貨の残高を表示する方法を紹介します。
例のロジックとインターフェイスは、アプリケーションよりも複雑ではありません。ゲーム内ストアの実装オプションで可能なアイテムカタログについては、デモプロジェクトで説明しています。
残高表示用ウィジェットの作成
- 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、
GameObject > Create Empty を選択します。 - プレハブで作成したゲームオブジェクトを
Hierarchy パネルからProject パネルにドラッグして変換します。 - 作成したプレハブを選択し、
Inspector パネルで、Open Prefab をクリックします。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ウィジェットの背景画像
- 仮想通貨名
- 仮想通貨の数量
- 仮想通貨の画像
次の図は、ウィジェットの構造の一例です。
残高表示のためのウィジェットスクリプトを作成する
- MonoBehaviourのベースクラスを継承した
VirtualCurrencyWidget
スクリプトを作成します。 - アイテムウィジェットのインターフェイス要素のための変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
仮想通貨の一覧ページを作成する
- シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューで
GameObject > Create Empty を選択します。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ページの背景画像
- ウィジェットの表示エリア
次の図は、ページ構成の一例です。
仮想通貨のリストを表示するページのコントローラを作成する
MonoBehaviour
のベースクラスを継承したVirtualCurrenciesPage
スクリプトを作成します。- 以下の変数を宣言します:
WidgetsContainer
— ウィジェットのコンテナWidgetPrefab
— 残高表示ウィジェットのプレハブ
- ページゲームオブジェクトにスクリプトをアタッチします:
Hierarchy パネルでオブジェクトを選択します。Inspector パネルで、Add Component をクリックしてVirtualCurrenciesPage
スクリプトを選択します。
Inspector パネルで変数を設定します。Start
メソッドの中でXsollaAuth.Instance.SignIn
SDKメソッドを呼び出してパスすることでログインロジックを追加し、以下のことを渡します:username
パラメータでのユーザー名またはメールアドレスpassword
パラメータでのユーザーパスワード
xsolla
、パスワード:xsolla
)。- アカウントを記憶するための
rememberUser
パラメータのフラグ - ユーザーログインを成功させるための
OnAuthenticationSuccess
コールバックメソッド - エラーの
OnError
コールバックメソッド
- アカウントを記憶するための
- 仮想通貨のリストを取得するロジックを追加しました。そのためには、
OnAuthenticationSuccess
メソッドの中で:- 認証トークンを
Token.Instance
変数に渡します。
- 認証トークンを
XsollaAuth.Instance.SignIn
SDKメソッドによるユーザー認証の際に受け取ったJWT- カスタムID(サーバーで生成したユーザーID)によりアプリケーションのバックエンドで受信するJWT。独自の認証システムを実装している場合は、このトークンを使用します。
XsollaInventory.Instance.GetVirtualCurrencyBalance
SDKメソッドを呼び出し、以下を渡します:projectId
パラメータでのプロジェクトID
- アイテムのリストを取得する操作を成功させるための
OnBalanceRequestSuccess
メソッド - エラーの
OnError
コールバックメソッド
- アイテムのリストを取得する操作を成功させるための
OnBalanceRequestSuccess
メソッドで、受信したすべての仮想通貨ウィジェットを作成するためのロジックを追加します:- アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
- 受信した
VirtualCurrencyWidget
コンポーネントをwidget
変数にアタッチします。
- 以下のデータを残高ウィジェットに渡します。
- 仮想通貨名を持つ要素に
balanceItem.name
の変数値を渡します。 - 仮想通貨の数量を持つ要素に
balanceItem.amount.ToString()
変数の値を渡します。 - アイテムの価格を表示するために、以下のロジックを実装します。仮想通貨の画像を表示するには、
ImageLoader.Instance.GetImageAsync
ユーティリティーメソッドを使用し、それを渡します:- イメージURL。
- 無名のコールバック関数です。この関数では,受け取ったスプライトを仮想通貨の画像として設定します。
- 仮想通貨名を持つ要素に
ページコントローラースクリプトの例:
- C#
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Core;
using Xsolla.Inventory;
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
XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, null, OnAuthenticationSuccess, OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for virtual currencies
Token.Instance = Token.Create(token);
XsollaInventory.Instance.GetVirtualCurrencyBalance(XsollaSettings.StoreProjectId, OnBalanceRequestSuccess, OnError);
}
private void OnBalanceRequestSuccess(VirtualCurrencyBalances 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}");
}
}
}
次の写真は、スクリプトの作業の結果です。
このチュートリアルでは、SDKのメソッドを使ってユーザーのインベントリにアイテムを表示する方法を紹介します。
例題の論理とインターフェースは、お客様のアプリケーションでの使用よりも複雑ではありません。イベントリの実装方法は、デモプロジェクトで紹介されています。
アイテムウィジェットを作成する
- 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、
GameObject > Create Empty を選択します。 - プレハブで作成したゲームオブジェクトを
Hierarchy パネルからProject パネルにドラッグして変換します。 - 作成したプレハブを選択し、
Inspector パネルで、Open Prefab をクリックします。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- アイテムの背景画像
- アイテム名
- アイテムの説明
- アイテムの量
- アイテムの画像
次の図は、ウィジェットの構造の一例です。
アイテムウィジェットスクリプトを作成する
- MonoBehaviourのベースクラスを継承した
InventoryItemWidget
スクリプトを作成します。 - アイテムウィジェットのインターフェイス要素のための変数を宣言し、
Inspector パネルでその値を設定します。
ウィジェットスクリプトの例:
- 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;
}
}
インベントリを表示するページを作成する
- シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューで
GameObject > Create Empty を選択します。 - 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
- ページの背景画像
- アイテムウィジェットの表示エリア
次の図は、ページ構成の一例です。
ページコントローラーを作成する
MonoBehaviour
のベースクラスを継承したInventoryItemsPage
スクリプトを作成します。- 以下の変数を宣言します:
WidgetsContainer
— アイテムウィジェットのコンテナWidgetPrefab
— アイテムウィジェットのプレハブ
- ページゲームオブジェクトにスクリプトをアタッチします:
Hierarchy パネルでオブジェクトを選択します。Inspector パネルで、Add Component をクリックしてInventoryItemsPage
スクリプトを選択します。
Inspector パネルで変数を設定します。Start
メソッドの中でXsollaAuth.Instance.SignIn
SDKメソッドを呼び出してパスすることでログインロジックを追加し、以下のことを渡します:username
パラメータでのユーザー名またはメールアドレスpassword
パラメータでのユーザーパスワード
xsolla
、パスワード:xsolla
)。- アカウントを記憶するための
rememberUser
パラメータのフラグ - ユーザーログインを成功させるための
OnAuthenticationSuccess
コールバックメソッド - エラーの
OnError
コールバックメソッド
- アカウントを記憶するための
- インベントリ内のアイテムのリストを取得するためのロジックを追加します。これを行うには、
OnAuthenticationSuccess
メソッドの中で:- 認証トークンを
Token.Instance
変数に渡します。
- 認証トークンを
XsollaAuth.Instance.SignIn
SDKメソッドによるユーザー認証の際に受け取ったJWT。- カスタムID(サーバーで生成したユーザーID)によりアプリケーションのバックエンドで受信するJWT。独自の認証システムを実装している場合は、このトークンを使用します。
XsollaInventory.Instance.GetInventoryItems
SDKメソッドを呼び出し、以下を渡します:projectId
パラメータでのプロジェクトID
- アイテムのリストを取得する操作を成功させるための
OnItemsRequestSuccess
- エラーの
OnError
コールバックメソッド
- アイテムのリストを取得する操作を成功させるための
OnItemsRequestSuccess
メソッドで受信したアイテムごとに、ウィジェットを作成するロジックを追加します:InventoryItem.IsVirtualCurrency
メソッドを使用して、受け取ったアイテムが仮想通貨でないことを確認するチェック機能を追加します。
- アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
- 受信した
InventoryItemWidget
コンポーネントをwidget
変数にアタッチします。
- 以下のデータをアイテムウィジェットに渡します:
- アイテム名を持つ要素に
inventoryItem.name
の変数値を渡します。 - アイテムの説明を持つ要素に
inventoryItem.description
の変数値を渡します。 - アイテムの数量を持つ要素に
inventoryItem.amount.ToString()
を渡します。 - アイテムの画像を表示するには、
ImageLoader.Instance.GetImageAsync
ユーティリティーメソッドを使用して、これを渡します:- イメージURL
- コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。
- アイテム名を持つ要素に
ページコントローラースクリプトの例:
- C#
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Core;
using Xsolla.Inventory;
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
XsollaAuth.Instance.SignIn("xsolla", "xsolla", true, null, null, OnAuthenticationSuccess, OnError);
}
private void OnAuthenticationSuccess(string token)
{
// After successful authentication starting the request for virtual currencies
Token.Instance = Token.Create(token);
XsollaInventory.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}");
}
}
}
次の写真は、スクリプトの作業の結果です。
お役立ちリンク
最終更新日: 2023年10月10日誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。