購入管理

以下のステップバイステップのチュートリアルに従って、SDKの基本的な機能を使ってみましょう。

アイテムカタログの表示

このチュートリアルでは、SDKメソッドを使って、ゲーム内ストアに以下のアイテムを表示する方法を紹介します:

  • 仮想アイテム
  • 仮想アイテムのグループ
  • バンドル
  • 仮想通貨のパッケージ

始める前に、パブリッシャーアカウントの項目を設定します:

  1. バーチャルアイテムとバーチャルアイテムのグループを設定します
  2. 仮想通貨のパッケージを設定します
  3. バンドルを設定します

このチュートリアルでは、以下のロジックの実装について説明します:

例のロジックとインターフェイスは、アプリケーションよりも複雑ではありません。ゲーム内ストアの実装オプションで可能なアイテムカタログについては、デモプロジェクトで説明しています。

お知らせ

カタログ内のすべてのアイテムの例は次のとおり:

  • アイテム名
  • アイテム説明
  • アイテム価格
  • 画像

また、アイテムに関する他の情報がゲーム内ストアに保存されている場合は、その情報を表示することもできます。

仮想アイテムの表示を実装する

アイテムウィジェットを作成する

  1. 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、GameObject > Create Emptyを選択します。
  2. プレハブで作成したゲームオブジェクトをHierarchyパネルからProjectパネルにドラッグして変換します。
  3. 作成したプレハブを選択し、Inspectorパネルで、Open Prefabをクリックします。
  4. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • アイテムの背景画像
    • アイテム名
    • アイテムの説明
    • アイテムの価格
    • アイテムの画像

次の図は、ウィジェットの構造の一例です。

アイテムウィジェットスクリプトを作成する

  1. MonoBehaviourのベースクラスを継承したVirtualItemWidgetスクリプトを作成します。
  2. アイテムウィジェットのインターフェイス要素のための変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen

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;
	}
}

アイテムのリストを表示するページを作成する

  1. シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューでGameObject > Create Emptyを選択します。
  2. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ページの背景画像
    • アイテムウィジェットの表示エリア

次の図は、ページ構成の一例です。

ページコントローラーを作成する

  1. MonoBehaviourのベースクラスを継承したVirtualItemsPageスクリプトを作成します。
  2. 以下の変数を宣言します:
    • WidgetsContainer — ウィジェットのコンテナ
    • WidgetPrefab — アイテムウィジェットのプレハブ
  1. ページゲームオブジェクトにスクリプトを添付します:
    1. Hierarchyパネルでオブジェクトを選択します。
    2. Inspectorパネルで、Add ComponentをクリックしてVirtualItemsPageスクリプトを選択します。
  2. Inspectorパネルで変数の値を設定します。
  1. Startメソッドで、XsollaLogin.Instance.SignIn SDKメソッドを呼び出してログインロジックを追加して、以下のことを渡します:
    • usernameパラメータのユーザー名またはメールアドレス
    • passwordパラメータのユーザーパスワード
お知らせ
ログインするスクリプトの例では、デモアカウントの資格情報を使用します(ユーザー名:xsolla、パスワード:xsolla)。
    • アカウントを記憶するためのrememberUserパラメータのフラグ
    • ユーザーログインを成功させるためのOnAuthenticationSuccessコールバックメソッド
    • エラーのOnErrorコールバックメソッド
  1. アイテムのリストを取得するためのロジックを追加します。OnAuthenticationSuccessメソッドで、XsollaStore.Instance.GetCatalog SDKメソッドを呼び出して、以下のことを渡します:
    • projectIdパラメータでのプロジェクトID
お知らせ
プロジェクトIDは、パブリッシャーアカウントのプロジェクト設定で確認できます。スクリプトの例では、SDK設定の値をパラメータに渡しています。
    • アイテムのリストの取得に成功した場合のOnItemsRequestSuccess
    • エラーが発生した場合のOnErrorコールバックメソッド
    • offsetパラメーターのリストの最初の項目に基づくオフセット
    • limitパラメーターにロードされたアイテムの数
お知らせ
offsetlimitのパラメータは必須ではありません。それらを使用してページネーションを実装します — カタログ内のアイテムのページごとの表示。ページ内の最大アイテム数は50です。カタログに50を超えるアイテムがある場合は、ページネーションが必要です。
  1. OnItemsRequestSuccessメソッドで、受信したすべてのアイテムのウィジェットを作成するためのロジックを追加します:
    1. アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
    2. 受信したVirtualItemWidgetコンポーネントをwidget変数にアタッチします。
  1. 以下のデータをアイテムウィジェットに渡します:
    1. storeItem.name変数値をアイテム名の要素に渡します。
    2. アイテムの説明が書かれた要素にstoreItem.description変数の値を渡します。
    3. アイテムの価格を表示するために、以下のロジックを実装します:
      • storeItem.price変数の値が、nullと一致しない場合、アイテムは実際通貨で販売されます。価格を{amount} {currency}の形式で指定し、ウェジット要素に渡します。
      • storeItem.virtual_prices変数の値が、nullと一致しない場合、アイテムは仮想通貨で販売されます。価格を{name}: {amount}の形式で指定し、ウェジット要素に渡します。
お知らせ
storeItem.virtual_prices変数は、同じアイテムの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > 仮想アイテムのアイテム設定で、デフォルトで指定されている価格を示しています。
    1. アイテムの画像を表示するには、ImageLoader.Instance.GetImageAsyncユーティリティーメソッドを使用し、以下のことを渡します:
      • 画像URL。
      • コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。

ページコントローラースクリプトの例:

Copy
Full screen
Small screen
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}");
		}
	}
}

次の写真は、スクリプトの作業の結果です。

仮想アイテムグループの表示を実装する

アイテムウィジェットを作成する

  1. 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、GameObject > Create Emptyを選択します。
  2. プレハブで作成したゲームオブジェクトをHierarchyパネルからProjectパネルにドラッグして変換します。
  3. 作成したプレハブを選択し、Inspectorパネルで、Open Prefabをクリックします。
  4. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • アイテムの背景画像
    • アイテム名
    • アイテムの説明
    • アイテムの価格
    • アイテムの画像

次の図は、ウィジェットの構造の一例です。

アイテムウィジェットスクリプトを作成する

  1. MonoBehaviourのベースクラスを継承したVirtualItemWidgetスクリプトを作成します。
  2. アイテムウィジェットのインターフェイス要素のための変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen

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;
	}
}

アイテムのグループを開くボタンのウィジェットを作成する

  1. 空のゲームオブジェクトを作成します。これを行うには、メインメニューでGameObject > Create Emptyを選択します。
  2. 作成したゲームオブジェクトをHierarchyパネルからProjectパネルにドラッグしてプレハブに変換します。
  3. 作成したプレハブを選択し、InspectorパネルでOpen Prefabをクリックします。
  4. アイテムのグループをプレハブの子オブジェクトとして表示するボタンを追加し、そのビジュアルを設定します。

次の図は、ウィジェットの構造の一例です。

アイテムのグループを開くボタンのスクリプトを作成する

  1. MonoBehaviourベースクラスから継承したVirtualItemGroupButtonスクリプトを作成します。
  2. アイテムのグループを開くボタンの変数を宣言し、Inspectorパネルに変数の値を設定します。
  3. プレハブのルートオブジェクトにスクリプトを追加します:
    1. Hierarchyパネルでオブジェクトを選択します。
    2. Inspectorパネルで、Add Componentをクリックし、VirtualItemGroupButtonスクリプトを選択します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen
using UnityEngine;
using UnityEngine.UI;

namespace Recipes
{
	public class VirtualItemGroupButton : MonoBehaviour
	{
		// Declaration of variables for UI elements
		public Text NameText;

		public Button Button;
	}
}

アイテムのリストを表示するページを作成する

  1. シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューでGameObject > Create Emptyを選択します。
  2. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ページの背景画像
    • アイテムグループボタン表示エリア
    • アイテムウェジットボタン表示エリア

次の図は、ページ構成の一例です。

ページコントローラーを作成する

  1. MonoBehaviourベースクラスから継承したVirtualItemsByGroupsPageスクリプトを作成します。
  2. 変数を宣言します:
    • GroupButtonsContainer — グループボタンのコンテナ
    • GroupButtonPrefab — ボタンプレハブ
    • ItemWidgetsContainer — アイテムウィジェットのコンテナ
    • WidgetPrefab — アイテムウィジェットプレハブ
  1. ページゲームオブジェクトにスクリプトをアタッチします:
    1. Hierarchyパネルでオブジェクトを選択します。
    2. Inspectorパネルで、Add Componentをクリックして、VirtualItemsByGroupsPageスクリプトを選択します。
  2. Inspectorパネルで変数の値を設定します。
  3. StartメソッドでXsollaLogin.Instance.SignIn SDKメソッドを呼び出すことでログインロジックを追加し、以下のことを渡します:
    • usernameパラメータでのユーザー名またはメールアドレス
    • passwordパラメータでのユーザーパスワード
お知らせ
ログインするスクリプトの例では、デモアカウントの資格情報を使用します(ユーザー名:xsolla、パスワード:xsolla)。
    • アカウントを記憶するためのrememberUserパラメータのフラグ
    • ユーザーログインを成功させるためのOnAuthenticationSuccessコールバックメソッド
    • エラーのOnErrorコールバックメソッド
  1. アイテムのリストを取得するためのロジックを追加します。OnAuthenticationSuccessメソッドで、XsollaStore.Instance.GetCatalog SDKメソッドを呼び出して、以下のことを渡します:
    • projectIdパラメータでのプロジェクトID
お知らせ
プロジェクトIDは、パブリッシャーアカウントのプロジェクト設定で確認できます。スクリプトの例では、SDK設定の値をパラメータに渡しています。
    • アイテムのリストの取得に成功した場合のOnItemsRequestSuccess
    • エラーが発生した場合のOnErrorコールバックメソッド
    • offsetパラメーターのリストの最初の項目に基づくオフセット
    • limitパラメーターにロードされたアイテムの数
お知らせ
offsetlimitのパラメータは必須ではありません。それらを使用してページネーションを実装します — カタログ内のアイテムのページごとの表示。ページ内の最大アイテム数は50です。カタログに50を超えるアイテムがある場合は、ページネーションが必要です。
  1. OnItemsRequestSuccessメソッドで、アイテムグループのリストを作成するためのロジックを追加します:
    1. 受信したアイテムリストからユニークグループのリストを取得します。そこに、カテゴリーに依存しないすべてのアイテムを表示するAll要素を追加します。
    2. 子オブジェクトをすべて削除して、ボタンコンテナをクリアします。これを行うには、DeleteAllChildrenメソッドを呼び出し、コンテナオブジェクトを渡します。
    3. すべてのアイテムグループに対するには:
      1. アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
      2. 受信したVirtualItemGroupButtonコンポーネントをgroupButton変数に設定します。
      3. groupName>変数値をグループ名の要素に渡します。
      4. 翻译结果ボタンをクリックするアクションに無名のメソッドを追加します。このメソッドでは、OnGroupSelectedメソッドを呼び出し、パラメータとしてアイテムグループの名とアイテムのリストを渡します。
    1. すべてのアイテムを表示するには、OnGroupSelectedメソッドを呼び出し、グループ名としてAllを渡します。
  1. OnGroupSelectedメソッドで、アイテムの初期表示用のロジックを追加します:
    1. itemsForDisplay変数を作成し、アイテムグループの名前にAllが付いている場合は、受け取ったすべてのアイテムをこの変数に割り当てます。それ以外の場合は、グループ名がgroupName変数と一致するアイテムをitemsForDisplay変数にリンクします。
    2. 子オブジェクトをすべて削除して、ボタンコンテナをクリアします。これを行うには、DeleteAllChildrenメソッドを呼び出し、コンテナオブジェクトを渡します。
  1. 受信したすべてのアイテムのウィジェットを作成するためのロジックを追加します。
    1. アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
    2. 受信したVirtualItemWidgetコンポーネントをwidget変数にアタッチします。
  1. 以下のデータをアイテムウィジェットに渡します:
    1. アイテム名を持つ要素にstoreItem.nameの変数値を渡します。
    2. storeItem.descriptionの変数値を、アイテムの説明を持つ要素に渡します。
    3. アイテムの価格を表示するために、以下のロジックを実装します:
      • storeItem.price変数の値が、nullと一致しない場合、アイテムは実際通貨で販売されています。価格を{amount} {currency}形式で指定し、ウェジット要素に渡します。
      • storeItem.virtual_prices変数の値が、nullと一致しない場合、アイテムは仮想通貨で販売されます。価格を{name}: {amount}形式で指定し、ウェジット要素に渡します。
お知らせ
storeItem.virtual_prices変数は、同じアイテムの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > 仮想アイテムのアイテム設定で、デフォルトで指定されている価格を示しています。
    1. アイテムの画像を表示するには、ImageLoader.Instance.GetImageAsyncユーティリティーメソッドを使用し、以下のことを渡します:
      • 画像URL。
      • コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。
Copy
Full screen
Small screen
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}");
		}
	}
}

ページコントローラースクリプトの例:

バンドルの表示を実装する

バンドルウィジェットを作成する

  1. 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、GameObject > Create Emptyを選択します。
  2. プレハブで作成したゲームオブジェクトをHierarchyパネルからProjectパネルにドラッグして変換します。
  3. 作成したプレハブを選択し、Inspectorパネルで、Open Prefabをクリックします。
  4. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ウィジェットの背景画像
    • バンドル名
    • バンドル説明
    • バンドル価格
    • バンドルコンテンツの説明(アイテムとその数量)
    • バンドル画像

次の図は、ウィジェットの構造の一例です。

ウィジェットスクリプトを作成する

  1. MonoBehaviourのベースクラスを継承したBundleWidgetスクリプトを作成します。
  2. アイテムウィジェットのインターフェイス要素のための変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen
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;
	}
}

バンドルを表示するページを作成する

  1. シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューでGameObject > Create Emptyを選択します。
  2. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ページの背景画像
    • バンドルウィジェットの表示エリア

次の図は、ページ構成の一例です。

ページコントローラーを作成する

  1. MonoBehaviourベースクラスを継承したBundlesPageスクリプトを作成します。
  2. 変数を宣言します:
    • WidgetsContainer — バンドルウィジェットのコンテナ
    • WidgetPrefab — バンドルウィジェットプレハブ
  1. ページゲームオブジェクトにスクリプトをアタッチします:
    1. Hierarchyパネルでオブジェクトを選択します。
    2. Inspectorパネルで、Add ComponentをクリックしてBundlesPageスクリプトを選択します。
  1. Inspectorパネルで変数を設定します。
  2. Startメソッドの中でXsollaLogin.Instance.SignIn SDKメソッドを呼び出してパスすることでログインロジックを追加し、以下のことを渡します:
    • usernameパラメータでのユーザー名またはメールアドレス
    • passwordパラメータでのユーザーパスワード
お知らせ
ログインするスクリプトの例では、デモアカウントの資格情報を使用します(ユーザー名:xsolla、パスワード:xsolla)。
    • アカウントを記憶するためのrememberUserパラメータのフラグ
    • ユーザーログインを成功させるためのOnAuthenticationSuccessコールバックメソッド
    • エラーのOnErrorコールバックメソッド
  1. バンドルのリストを取得するためのロジックを追加します。OnAuthenticationSuccessメソッドで、XsollaStore.Instance.GetBundles SDKメソッドを呼び出して、以下のことを渡します:
    • projectIdパラメータでのプロジェクトID
お知らせ
プロジェクトIDは、パブリッシャーアカウントのプロジェクト設定で確認できます。スクリプトの例では、SDK設定の値をパラメータに渡しています。
    • バンドルのリストを取得する操作を成功させるためのOnItemsRequestSuccessコールバックメソッド
    • エラーのOnErrorコールバックメソッド
  1. OnBundlesRequestSuccessメソッドで、受信したすべてのバンドルのウィジェットを作成するためのロジックを追加します:
    1. アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
    2. 受信したBundleWidgetコンポーネントをwidget変数にアタッチします。
  1. バンドルウィジェットに以下のデータを渡します:
    1. bundleItem.nameの変数値をアイテム名の要素に渡します。
    2. bundleItem.descriptionの変数値を、アイテムの説明を持つ要素に渡します。
    3. バンドルコンテンツを表示するために、以下のロジックを実装します:
      1. バンドル内のすべてのアイテムを使用して、アイテム名とその数量を含むラインを形成します。行は、{name} x {quantity}の形式でなければなりません。
      2. 改行文字をセパレーターにして、これらの行を1行にまとめます。
      3. 新しい行をウィジェット要素に渡します。
    1. バンドル価格を表示するために、以下のロジックを実装します:
      • bundleItem.price変数の値が、nullと一致しない場合、バンドルは実際通貨で販売されます。価格を{amount} {currency}の形式で指定し、ウェジット要素に渡します。
      • bundleItem.virtual_prices変数の値が、nullと一致しない場合、バンドルは実際通貨で販売されます。価格を{name}: {amount}の形式で指定し、ウェジット要素に渡します。
お知らせ
bundleItem.virtual_prices変数は、同じバンドルの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > バンドルのアイテム設定で、デフォルトで指定されている価格を示しています。
    1. アイテムの画像を表示するには、ImageLoader.Instance.GetImageAsyncユーティリティーメソッドを使用し、以下のことを渡します
      • 画像URL。
      • コールバックとしての無名関数です。この関数では,受信したスプライトをバンドル画像として追加します。

ページコントローラースクリプトの例:

Copy
Full screen
Small screen
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}");
		}
	}
}

次の写真は、スクリプトの作業の結果です。

仮想通貨パッケージの表示を実装する

仮想通貨パッケージのウィジェットを作成する

  1. 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、GameObject > Create Emptyを選択します。
  2. プレハブで作成したゲームオブジェクトをHierarchyパネルからProjectパネルにドラッグして変換します。
  3. 作成したプレハブを選択し、Inspectorパネルで、Open Prefabをクリックします。
  4. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ウィジェットの背景画像
    • パッケージ名
    • パッケージ説明
    • パッケージ価格
    • パッケージ画像

次の図は、ウィジェットの構造の一例です。

ウィジェットスクリプトを作成する

  1. MonoBehaviourのベースクラスを継承したVirtualCurrencyPackageWidgetスクリプトを作成します。
  2. アイテムウィジェットのインターフェイス要素のための変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen
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;
	}
}

仮想通貨パッケージのリストを表示するページを作成する

  1. シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューでGameObject > Create Emptyを選択します。
  2. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ページの背景画像
    • 仮想通貨パッケージウィジェットの表示エリア

次の図は、ページ構成の一例です。

ページコントローラーを作成する

  1. MonoBehaviourベースクラスを継承したVirtualCurrencyPackagesPageスクリプトを作成します。
  2. 変数を宣言します:
    • WidgetsContainer — ウィジェットのコンテナ
    • WidgetPrefab — 仮想通貨パッケージプレハブ
  1. ページゲームオブジェクトにスクリプトをアタッチします:
    1. Hierarchyパネルでオブジェクトを選択します。
    2. Inspectorパネルで、Add Componentをクリックして、VirtualCurrencyPackagesPageスクリプトを選択します。
  2. Inspectorパネルで変数の値を設定します。
  3. XsollaLogin.Instance.SignIn SDKのメソッドをStartメソッドで呼び出してログインロジックを追加し、以下のことを渡します:
    • usernameパラメータでのユーザー名またはメールアドレス
    • passwordパラメータでのユーザーパスワード
お知らせ
ログインするスクリプトの例では、デモアカウントの資格情報を使用します(ユーザー名:xsolla、パスワード:xsolla)。
    • アカウントを記憶するためのrememberUserパラメータのフラグ
    • ユーザーログインを成功させるためのOnAuthenticationSuccessコールバックメソッド
    • エラーのOnErrorコールバックメソッド
  1. アイテムのリストを取得するためのロジックを追加します。OnAuthenticationSuccessメソッドで、XsollaStore.Instance.GetVirtualCurrencyPackagesList SDKメソッドを呼び出して、以下のことを渡します:
    • projectIdパラメータでのプロジェクトID
お知らせ
プロジェクトIDは、パブリッシャーアカウントのプロジェクト設定で確認できます。スクリプトの例では、SDK設定の値をパラメータに渡しています。
    • アイテムのリストを取得する操作を成功させるためのOnItemsRequestSuccess
    • エラーのOnErrorコールバックメソッド
  1. OnPackagesRequestSuccessメソッドで、受信したすべてのパッケージのウィジェットを作成するためのロジックを追加します:
    1. アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
    2. 受信したVirtualCurrencyPackageWidgetコンポーネントをwidget変数にアタッチします。
  1. パッケージウィジェットに以下のデータを渡します:
    1. パッケージ名を持つ要素にpackageItem.nameの変数値を渡します。
    2. packageItem.descriptionの変数値をパッケージの説明を持つ要素に渡します。
    3. パッケージの価格を表示するために、以下のロジックを実装します:
      • packageItem.price変数の値が、nullと一致しない場合、パッケージは実際通貨で販売されています。価格を{amount} {currency}形式で指定し、ウェジット要素に渡します。
      • packageItem.virtual_prices変数の値が、nullと一致しない場合、パッケージは仮想通貨で販売されます。価格を{name}: {amount}形式で指定し、ウェジット要素に渡します。
お知らせ
packageItem.virtual_prices変数は、同じパッケージの異なる通貨での価格の配列です。この例では、パブリッシャーアカウントのストア > 仮想通貨 > パッケージのパッケージ設定で、デフォルトで指定されている価格を示しています。
    1. アイテムの画像を表示するには、ImageLoader.Instance.GetImageAsyncユーティリティーメソッドを使用し、以下のことを渡します:
      • 画像URL。
      • コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。

ページコントローラースクリプトの例:

Copy
Full screen
Small screen
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}");
		}
	}
}

次の写真は、スクリプトの作業の結果です。

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

仮想アイテムを実際通貨で販売する

この説明では、SDKのメソッドを使用して、実際通貨で仮想アイテムの販売を実装する方法を示します。

始める前に、カタログに仮想アイテムを表示する機能を実装します。以下の例では、仮想アイテムの購入を実装する方法を説明します。他のアイテムタイプの設定も同様です。

このチュートリアルでは、以下のロジックの実装について説明します:

例題のロジックとインターフェイスは、あなたのアプリケーションに比べてそれほど複雑ではありません。実際通貨でアイテムを販売し、アイテムのカタログを表示するための実装オプションの可能性については、デモプロジェクトで説明しています。

アイテムウィジェットを完成する

アイテムウィジェットに購入ボタンを追加し、そのビジュアルを構成します。

次の図は、ウィジェットの構造の一例です。

アイテムウィジェットスクリプトを完成する

  1. VirtualItemWidgetスクリプトを開きます。
  2. 購入ボタン用の変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen

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;
	}
}

アイテムのリストを表示するページコントローラーを完成する

  1. VirtualItemsPageスクリプトを開きます。
  2. OnAuthenticationSuccessメソッドで、認証トークンをXsollaStore.Instance.Token変数に渡します。
お知らせ
以下のトークンを利用することができます:
  • XsollaLogin.Instance.SignIn SDKメソッドを介したユーザー認証中に受信したJWT。
  • XsollaLogin.Instance.GetUserAccessToken SDKメソッドを介してユーザー認証中に受信した決済ステーションアクセストークン。実装済みの独自の認証システムがある場合は、このトークンを使用してください。
  1. 仮想アイテム購入ボタンをクリックして処理するためのロジックを追加します:
    1. OnItemsRequestSuccessメソッドで、ボタンクリックイベントを購読する。
    2. ボタンがクリックされた後に呼び出される匿名メソッドを追加します。
    3. このメソッドで、XsollaStore.Instance.ItemPurchase SDKメソッドを呼び出して注文を作成し、それに渡します:
      • projectIdパラメータでのプロジェクトID
      • itemSkuパラメータでのアイテム識別子
      • アイテム発注書の正常な形成を処理するOnOrderCreateSuccessメソッド
      • エラーのOnErrorコールバックメソッド
  1. 決済ページのオープンを実装します。これを行うには、OnOrderCreateSuccessメソッドを追加し、以下の中で呼び出します:
    • 決済ページを開くにはXsollaStore.Instance.OpenPurchaseUi SDKメソッド
    • 注文状況の変化を把握するにはTrackOrderStatus コルーチン
お知らせ
デフォルトでは、決済ページは内ビルドインブラウザで開きます。外部ブラウザで開くには、Unity編集器のメインメニューにあるWindow > Xsolla > Edit Settingsに移動し、InspectorパネルのEnable in-app browser?ボックスのチェックを外します。Androidアプリで外部ブラウザを使用する場合は、ユーザーが支払いを行った後にアプリにリダイレクトするように、ディープリンクを設定することをお勧めします。
  1. TrackOrderStatusのコルーチンでは、1秒に1回、注文状況の情報を取得するように実装します。これをするには、XsollaStore.Instance.CheckOrderStatus SDKメソッドを利用して以下へ渡します:
    • projectIdパラメータでのプロジェクトID
    • orderIdパラメータでの決済詳細からの注文番号
    • 注文ステータス情報の正常な受信を処理するための匿名メソッド
    • エラー処理のための匿名メソッド
  1. 注文状況情報の正常な受信を処理するメソッドで、注文の決済中にOnPurchaseSuccessメソッドのコールバックを実装します(決済ステータスdoneまたはpaid)。
  2. OnPurchaseSuccessメソッドで、成功した仮想アイテム購入の処理を実装します。
お知らせ

スクリプトの例では、アイテムの購入が成功した場合にDebug.Logベースメソッドを呼び出しています。インベントリ表示などの他のアクションも追加できます。

購入したアイテムをインベントリに追加するロジックを実装する必要はなく、自動的に行われます。

  1. 決済ページを開くためにビルドインブラウザを使用している場合は、このブラウザを閉じてください。

ページのスクリプトの例:

Copy
Full screen
Small screen
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}");
		}
	}
}
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

仮想アイテムを仮想通貨で販売する

この説明では、SDKのメソッドを使用して、仮想アイテムの仮想通貨への販売を実装する方法を示します。

始める前に、カタログに仮想アイテムを表示する機能を実装します。以下の例では、仮想アイテムの購入を実装する方法を説明します。他のアイテムタイプの設定も同様です。

このチュートリアルでは、以下のロジックの実装について説明します:

例題のロジックとインターフェイスは、あなたのアプリケーションに比べてそれほど複雑ではありません。実際通貨でアイテムを販売し、アイテムのカタログを表示するための実装オプションの可能性については、デモプロジェクトで説明しています。

アイテムウィジェットを完成する

アイテムウィジェットに購入ボタンを追加し、そのビジュアルを構成します。

次の図は、ウィジェットの構造の一例です。

アイテムウィジェットスクリプトを完成する

  1. VirtualItemWidgetスクリプトを開きます。
  2. 購入ボタン用の変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen

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;
	}
}

アイテムのリストを表示するページコントローラーを完成する

  1. VirtualItemsPageスクリプトを開きます。
  2. OnAuthenticationSuccessメソッドで、認証トークンをXsollaStore.Instance.Token変数に渡します。
お知らせ
以下のトークンを利用することができます:
  • XsollaLogin.Instance.SignIn SDKメソッドを介したユーザー認証中に受信したJWT。
  • XsollaLogin.Instance.GetUserAccessToken SDKメソッドを介してユーザー認証中に受信した決済ステーションアクセストークン。実装済みの独自の認証システムがある場合は、このトークンを使用してください。
  1. 仮想アイテム購入ボタンをクリックして処理するためのロジックを追加します:
    1. OnItemsRequestSuccessメソッドで、ボタンクリックイベントを購読する。
    2. ボタンがクリックされた後に呼び出される匿名メソッドを追加します。
    3. このメソッドで、XsollaStore.Instance.ItemPurchase SDKメソッドを呼び出して注文を作成し、それに渡します:
      • projectIdパラメータでのプロジェクトID
      • itemSkuパラメータでのアイテム識別子
      • アイテム発注書の正常な形成を処理するOnOrderCreateSuccessメソッド
      • エラーのOnErrorコールバックメソッド
  1. OnOrderCreateSuccessメソッドで、注文ステータスチェックプロセスを実装します。これをするには、XsollaStore.Instance.CheckOrderStatus SDKメソッドを利用して以下へ渡します:
    • projectIdパラメータでのプロジェクトID
    • orderIdパラメータでの決済詳細からの注文番号
    • 注文ステータス情報の正常な受信を処理するための匿名メソッド
    • エラー処理のための匿名メソッド
  1. 注文状況情報の正常な受信を処理するメソッドで、注文の決済中にOnPurchaseSuccessメソッドのコールバックを実装します(決済ステータスdoneまたはpaid)。
  2. OnPurchaseSuccessメソッドで、成功した仮想アイテム購入の処理を実装します。
お知らせ

スクリプトの例では、アイテムの購入が成功した場合にDebug.Logベースメソッドを呼び出しています。インベントリの表示仮想通貨の残高変更など、他のアクションを追加することができます。

購入したアイテムをインベントリに追加するロジックを実装する必要はなく、自動的に行われます。

ページのスクリプトの例:

Copy
Full screen
Small screen
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}");
		}
	}
}
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

仮想通貨残高の表示

このチュートリアルでは、SDKメソッドを使って、アプリ内で仮想通貨の残高を表示する方法を紹介します。

例のロジックとインターフェイスは、アプリケーションよりも複雑ではありません。ゲーム内ストアの実装オプションで可能なアイテムカタログについては、デモプロジェクトで説明しています。

残高表示用ウィジェットの作成

  1. 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、GameObject > Create Emptyを選択します。
  2. プレハブで作成したゲームオブジェクトをHierarchyパネルからProjectパネルにドラッグして変換します。
  3. 作成したプレハブを選択し、Inspectorパネルで、Open Prefabをクリックします。
  4. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ウィジェットの背景画像
    • 仮想通貨名
    • 仮想通貨の数量
    • 仮想通貨の画像

次の図は、ウィジェットの構造の一例です。

残高表示のためのウィジェットスクリプトを作成する

  1. MonoBehaviourのベースクラスを継承したVirtualCurrencyWidgetスクリプトを作成します。
  2. アイテムウィジェットのインターフェイス要素のための変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen
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;
	}
}

仮想通貨の一覧ページを作成する

  1. シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューでGameObject > Create Emptyを選択します。
  2. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ページの背景画像
    • ウィジェットの表示エリア

次の図は、ページ構成の一例です。

仮想通貨のリストを表示するページのコントローラを作成する

  1. MonoBehaviourのベースクラスを継承したVirtualCurrenciesPageスクリプトを作成します。
  2. 以下の変数を宣言します:
    • WidgetsContainer — ウィジェットのコンテナ
    • WidgetPrefab — 残高表示ウィジェットのプレハブ
  1. ページゲームオブジェクトにスクリプトをアタッチします:
    1. Hierarchyパネルでオブジェクトを選択します。
    2. Inspectorパネルで、Add ComponentをクリックしてVirtualCurrenciesPageスクリプトを選択します。
  1. Inspectorパネルで変数を設定します。
  2. Startメソッドの中でXsollaLogin.Instance.SignIn SDKメソッドを呼び出してパスすることでログインロジックを追加し、以下のことを渡します:
    • usernameパラメータでのユーザー名またはメールアドレス
    • passwordパラメータでのユーザーパスワード
お知らせ
ログインするスクリプトの例では、デモアカウントの資格情報を使用します(ユーザー名:xsolla、パスワード:xsolla)。
    • アカウントを記憶するためのrememberUserパラメータのフラグ
    • ユーザーログインを成功させるためのOnAuthenticationSuccessコールバックメソッド
    • エラーのOnErrorコールバックメソッド
  1. 仮想通貨のリストを取得するロジックを追加しました。そのためには、OnAuthenticationSuccessメソッドの中で:
    1. 認証トークンをXsollaStore.Instance.Token変数に渡します。
お知らせ
以下のトークンを利用することができます:
  • XsollaLogin.Instance.SignIn SDKメソッドを介したユーザー認証中に受信したJWT。
  • XsollaLogin.Instance.GetUserAccessToken SDKメソッドを介してユーザー認証中に受信した決済ステーションアクセストークン。実装済みの独自の認証システムがある場合は、このトークンを使用してください。
    1. XsollaStore.Instance.GetVirtualCurrencyBalance SDKメソッドを呼び出し、以下を渡します:
      • projectIdパラメータでのプロジェクトID
お知らせ
プロジェクトIDは、パブリッシャーアカウントのプロジェクト設定で確認できます。スクリプトの例では、SDK設定の値をパラメータに渡しています。
      • アイテムのリストを取得する操作を成功させるためのOnBalanceRequestSuccessメソッド
      • エラーのOnErrorコールバックメソッド
  1. OnBalanceRequestSuccessメソッドで、受信したすべての仮想通貨ウィジェットを作成するためのロジックを追加します:
    1. アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
    2. 受信したVirtualCurrencyWidgetコンポーネントをwidget変数にアタッチします。
  1. 以下のデータを残高ウィジェットに渡します。
    1. 仮想通貨名を持つ要素にbalanceItem.nameの変数値を渡します。
    2. 仮想通貨の数量を持つ要素にbalanceItem.amount.ToString()変数の値を渡します。
    3. アイテムの価格を表示するために、以下のロジックを実装します。仮想通貨の画像を表示するには、ImageLoader.Instance.GetImageAsyncユーティリティーメソッドを使用し、それを渡します:
      • イメージURL。
      • 無名のコールバック関数です。この関数では,受け取ったスプライトを仮想通貨の画像として設定します。

ページコントローラースクリプトの例:

Copy
Full screen
Small screen
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}");
		}
	}
}

次の写真は、スクリプトの作業の結果です。

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示

インベントリでアイテムの表示

このチュートリアルでは、SDKのメソッドを使ってユーザーのインベントリにアイテムを表示する方法を紹介します。

例題の論理とインターフェースは、お客様のアプリケーションでの使用よりも複雑ではありません。イベントリの実装方法は、デモプロジェクトで紹介されています。

アイテムウィジェットを作成する

  1. 空のゲームオブジェクトを作成します。これを行うには、メインメニューに移動し、GameObject > Create Emptyを選択します。
  2. プレハブで作成したゲームオブジェクトをHierarchyパネルからProjectパネルにドラッグして変換します。
  3. 作成したプレハブを選択し、Inspectorパネルで、Open Prefabをクリックします。
  4. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • アイテムの背景画像
    • アイテム名
    • アイテムの説明
    • アイテムの量
    • アイテムの画像

次の図は、ウィジェットの構造の一例です。

アイテムウィジェットスクリプトを作成する

  1. MonoBehaviourのベースクラスを継承したInventoryItemWidgetスクリプトを作成します。
  2. アイテムウィジェットのインターフェイス要素のための変数を宣言し、Inspectorパネルでその値を設定します。

ウィジェットスクリプトの例:

Copy
Full screen
Small screen
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;
	}
}

インベントリを表示するページを作成する

  1. シーン上で、空のゲームオブジェクトを作成します。これを行うには、メインメニューでGameObject > Create Emptyを選択します。
  2. 以下のUI要素をプレハブの子オブジェクトとして追加し、そのビジュアルを設定します:
    • ページの背景画像
    • アイテムウィジェットの表示エリア

次の図は、ページ構成の一例です。

ページコントローラーを作成する

  1. MonoBehaviourのベースクラスを継承したInventoryItemsPageスクリプトを作成します。
  2. 以下の変数を宣言します:
    • WidgetsContainer — アイテムウィジェットのコンテナ
    • WidgetPrefab — アイテムウィジェットのプレハブ
  1. ページゲームオブジェクトにスクリプトをアタッチします:
    1. Hierarchyパネルでオブジェクトを選択します。
    2. Inspectorパネルで、Add ComponentをクリックしてInventoryItemsPageスクリプトを選択します。
  1. Inspectorパネルで変数を設定します。
  2. Startメソッドの中でXsollaLogin.Instance.SignIn SDKメソッドを呼び出してパスすることでログインロジックを追加し、以下のことを渡します:
    • usernameパラメータでのユーザー名またはメールアドレス
    • passwordパラメータでのユーザーパスワード
お知らせ
ログインするスクリプトの例では、デモアカウントの資格情報を使用します(ユーザー名:xsolla、パスワード:xsolla)。
    • アカウントを記憶するためのrememberUserパラメータのフラグ
    • ユーザーログインを成功させるためのOnAuthenticationSuccessコールバックメソッド
    • エラーのOnErrorコールバックメソッド
  1. インベントリ内のアイテムのリストを取得するためのロジックを追加します。これを行うには、OnAuthenticationSuccessメソッドの中で:
    1. 認証トークンをXsollaStore.Instance.Token変数に渡します。
お知らせ
以下のトークンを利用することができます:
  • XsollaLogin.Instance.SignIn SDKメソッドを介したユーザー認証中に受信したJWT。
  • XsollaLogin.Instance.GetUserAccessToken SDKメソッドを介してユーザー認証中に受信した決済ステーションアクセストークン。実装済みの独自の認証システムがある場合は、このトークンを使用してください。
    1. XsollaStore.Instance.GetInventoryItems SDKメソッドを呼び出し、以下を渡します:
      • projectIdパラメータでのプロジェクトID
お知らせ
プロジェクトIDは、パブリッシャーアカウントのプロジェクト設定で確認できます。スクリプトの例では、SDK設定の値をパラメータに渡しています。
      • アイテムのリストを取得する操作を成功させるためのOnItemsRequestSuccess
      • エラーのOnErrorコールバックメソッド
  1. OnItemsRequestSuccessメソッドで受信したアイテムごとに、ウィジェットを作成するロジックを追加します:
    1. InventoryItem.IsVirtualCurrencyメソッドを使用して、受け取ったアイテムが仮想通貨でないことを確認するチェック機能を追加します。
お知らせ
この例では、インベントリ内の仮想アイテム、バンドル、およびサブスクリプションのみを示します。別のページに仮想通貨残高の表示を実装します。
    1. アイテムウィジェットのプレハブをコンテナの子オブジェクトとしてインスタンス化します。
    2. 受信したInventoryItemWidgetコンポーネントをwidget変数にアタッチします。
  1. 以下のデータをアイテムウィジェットに渡します:
    1. アイテム名を持つ要素にinventoryItem.nameの変数値を渡します。
    2. アイテムの説明を持つ要素にinventoryItem.descriptionの変数値を渡します。
    3. アイテムの数量を持つ要素にinventoryItem.amount.ToString()を渡します。
    4. アイテムの画像を表示するには、ImageLoader.Instance.GetImageAsyncユーティリティーメソッドを使用して、これを渡します:
      • イメージURL
      • コールバックとしての無名関数です。この関数では,受信したスプライトをアイテム画像として追加します。

ページコントローラースクリプトの例:

Copy
Full screen
Small screen
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}");
		}
	}
}

次の写真は、スクリプトの作業の結果です。

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
非表示
最終更新日: 2023年10月10日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!