Unity（PC、ウェブ）向けのSDK / アプリケーション側でSDKを統合する
  ドキュメントに戻る

Unity（PC、ウェブ）向けのSDK

最新バージョン v1 v0

アプリケーション側でSDKを統合する

一般情報

  1. ログインシステム、インゲームストアなど、アプリケーションのページのインターフェイスをデザインします。
  2. アプリケーションで、SDKメソッドを使用してユーザー認証、ストア表示、購入などのロジックを実装します。

お知らせ
Unityに関する説明に従って独自のソリューションを作成することもできますし、デモシーンをテンプレートとして使用することもできます。デモシーンのUIを自分のアプリケーションに合わせるには、UIビルダーを使います。

クイックスタート

以下は、ゲーム内の販売シナリオを最も簡単に実装するための手順です。

相互作用のフロー：

  1. ユーザーはゲームを起動します。
  2. このアプリケーションはエクソーラログインウェブウィジェットを起動します。
  3. ユーザーはゲームにログインし、アイテムカタログに移動します。
  4. アプリケーションは、エクソーラからアイテムカタログを要求します。
  5. アイテムデータの受信に成功すると、アプリケーションはアイテムカタログを表示します。
  6. ユーザーはアイテム購入ボタンをクリックします。
  7. アプリケーションは購入プロセスを開始し、ブラウザに決済UIを表示します。
  8. ユーザーが支払いを行います。
  9. アプリケーションは決済UIを閉じ、支払いデータをエクソーラに渡します。
  10. アプリケーションは、支払い処理の結果に関するメッセージをログに出力します。

アプリケーション（StoreControllerスクリプト）とSDKの相互作用のためのシーケンス図：

シナリオの制限：

お知らせ
ウィジェットカスタマイズは、エクソーラ製品ライセンス契約を締結した場合にのみ利用可能です。契約書にサインするには、アドミンページの契約と税金 > 契約セクションにアクセスしてください。
  • このシナリオでは、ショッピングカートを使用せずに、実際通貨のみのアイテムの販売を実装します。

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

VirtualItemWidgetという名前の新しいスクリプトを作成します：

  1. Unity Editorでプロジェクトを開きます。
  2. メインメニューでは、Assets > Create > C# Scriptに移動します。
  3. Assetsフォルダー内の新しいファイルの名前をVirtualItemWidgetとして指定します。
  4. 作成したファイルをエディタで開き、次のコードを追加します：
Copy
Full screen
Small screen
  • C#
using UnityEngine;
using UnityEngine.UI;

namespace Xsolla.Example
{
    public class VirtualItemWidget : MonoBehaviour
    {
       public Image IconImage;
       public Text NameText;
       public Text DescriptionText;
       public Text PriceText;
       public Button BuyButton;
    }
}
  1. 変更を保存します。

アイテムウィジェットプレハブを作成する

ストアにアイテムを表示するUIを作成します：

  1. UI要素を表示するCanvasオブジェクトを作成します。これを行うには、メインメニューでGameObject > UI > Canvasに移動します。これにより、シーンに以下のオブジェクトが作成されます：
    • Canvas、Canvas Scaler、およびGraphic Raycasterコンポーネントを持つCanvasオブジェクト。
    • そのようなオブジェクトがシーンにまだ存在しない場合は、EventSystemオブジェクト。
  2. VirtualItemWidget子オブジェクトを作成します：
    1. Hierarchyパネルで、Canvasオブジェクトを選択します。
    2. メインメニューで、GameObject > UI > Imageに移動します。このオブジェクトはCanvasオブジェクトの子になります。
    3. 作成したオブジェクトの名前をVirtualItemWidgetに変更します。
  3. アイテム情報を表示するためのUIオブジェクトを追加します：
    1. ウィジェットアイコンを表示するオブジェクトを作成します：
      1. Hierarchyパネルで、VirtualItemWidgetオブジェクトを選択します。
      2. メインメニューで、GameObject > UI > Imageに移動します。
      3. 作成したオブジェクトの名前をIconImageに変更します。
    1. アイテム名を表示するオブジェクトを作成します：
      1. Hierarchyパネルで、VirtualItemWidgetオブジェクトを選択します。
      2. メインメニューで、GameObject > UI > Legacy > Textに移動します。
      3. 作成したオブジェクトの名前をNameTextに変更します。
    1. アイテムの説明を表示するオブジェクトを作成します：
      1. Hierarchyパネルで、VirtualItemWidgetオブジェクトを選択します。
      2. メインメニューで、GameObject > UI > Legacy > Textに移動します。
      3. 作成したオブジェクトの名前をDescriptionTextに変更します。
    1. アイテム購入ボタンのオブジェクトを作成します：
      1. Hierarchyパネルで、VirtualItemWidgetオブジェクトを選択します。
      2. メインメニューで、GameObject > UI > Legacy > Buttonに移動します。これにより、Text子オブジェクトを使用してボタンオブジェクトが作成されます。
      3. 作成したオブジェクトの名前をBuyButtonに変更します。
      4. Textオブジェクトの名前をPriceTextに変更します。
  4. アイテムウィジェットスクリプトをコンポーネントとしてVirtualItemWidgetオブジェクトに追加します：
    1. Hierarchyパネルで、VirtualItemWidgetオブジェクトを選択します。
    2. Inspectorパネルで、Add Componentをクリックして、VirtualItemWidgetスクリプトを選択します。
  5. 必要なスクリプトスロットにUI要素を割り当てます：
    1. Hierarchyパネルで、VirtualItemWidgetオブジェクトを選択します。
    2. 子UIオブジェクトをHierarchyパネルから、Inspectorパネルの対応するVirtualItemWidgetコンポーネントスロットにドラッグアンドドロップします。
  6. 作成したVirtualItemWidgetオブジェクトをプレハブに変換します：
    1. Hierarchyパネルで、VirtualItemWidgetオブジェクトを選択します。
    2. オブジェクトをAssetsフォルダー内のProjectパネルにドラッグアンドドロップします。その結果、新しいオブジェクトがAssetsフォルダーに表示され、シーン上のオブジェクトの色が青に変わります。

アイテムウィジェットプレハブの例：

ストアスクリプトを作成する

StoreControllerという名前の新しいスクリプトを作成します：

  1. Unity Editorでプロジェクトを開きます。
  2. メインメニューでは、Assets > Create > C# Scriptに移動します。
  3. Assetsフォルダー内の新しいファイルの名前をStoreControllerとして指定します。
  4. 作成したファイルをエディタで開き、次のコードを追加します：
Copy
Full screen
Small screen
  • C#
using System.Linq;
using UnityEngine;
using Xsolla.Auth;
using Xsolla.Catalog;
using Xsolla.Core;
namespace Xsolla.Example
{
	public class StoreController : MonoBehaviour
	{
		[SerializeField] private VirtualItemWidget WidgetPrefab;
		[SerializeField] private Transform WidgetsContainer;
		private void Start()
		{
			StartAuthorization();
		}
		private void StartAuthorization()
		{
			Debug.Log("Start the authorization process with the Xsolla Login Widget");
			XsollaAuth.AuthWithXsollaWidget(OnAuthSuccess, OnError, null);
		}
		private void OnAuthSuccess()
		{
			Debug.Log("Authorization successful");
			Debug.Log("Get the catalog of virtual items");
			XsollaCatalog.GetItems(OnCatalogReceived, OnError);
		}
		private void OnCatalogReceived(StoreItems items)
		{
			Debug.Log("Catalog received successfully");
			BuildStoreUI(items.items);
		}
		private void BuildStoreUI(StoreItem[] items)
		{
			// Create a widget for each item in the catalog
			foreach (var item in items)
			{
				// Check if the item has a price for real money. If not, skip the item (e.g., it is a virtual currency)
				if (item.price == null)
					continue;
				// Instantiate a widget prefab
				var widget = Instantiate(WidgetPrefab, WidgetsContainer, false);
				// Fill the widget with data
				widget.NameText.text = item.name;
				widget.DescriptionText.text = item.description;
				widget.PriceText.text = $"{item.price.amount} {item.price.currency}";
				// Loading the item image and assigning it to the UI element
				ImageLoader.LoadSprite(item.image_url, sprite => widget.IconImage.sprite = sprite);
				// Add a click listener to the Buy button
				widget.BuyButton.onClick.AddListener(() => StartPurchase(item.sku));
			}
		}
		private void StartPurchase(string sku)
		{
			Debug.Log($"Start the purchase process for the item: {sku}");
			XsollaCatalog.Purchase(sku, OnPurchaseCompleted, OnError);
		}
		private void OnPurchaseCompleted(OrderStatus status)
		{
			Debug.Log("Purchase completed");
		}
		private void OnError(Error error)
		{
			Debug.LogError($"Error message: {error.errorMessage}");
		}
	}
}
  1. 変更を保存します。

ストアオブジェクトを作成する

ストア内のアイテムリストを表示するUIを作成します：

  1. グリッド内の個々のアイテムのウィジェットを配置し、ネストされたオブジェクトの場所とサイズを管理するコンポーネントを追加します。グリッド内の個々のアイテムのウィジェットを配置し、ネストされたオブジェクトの場所とサイズを管理するコンポーネントを追加します。これを行うには：
    1. Hierarchyパネルで、Canvasオブジェクトを選択します。
    2. Inspectorパネルで、Add Componentをクリックして、Grid Layout Group スクリプトを選択します。
    3. Inspectorパネルで、必要に応じてコンポーネントの設定を変更します：セルのサイズ、間隔などを設定します。
お知らせ
より良い視覚化とより簡単な設定のために、VirtualItemWidgetオブジェクトの複数のコピーを作成することをお勧めします。これにより、ストアの一般的なレイアウトをすぐに評価することができます。
  1. ストアスクリプトをコンポーネントとしてCanvasオブジェクトに追加します：
    1. Hierarchyパネルで、Canvasオブジェクトを選択します。
    2. Inspectorパネルで、Add Componentをクリックして、StoreControllerスクリプトを選択します。
  2. 要素をStoreControllerスクリプトの必要なスロットに割り当てます：
    1. Hierarchyパネルで、Canvasオブジェクトを選択します。
    2. CanvasオブジェクトをHierarchyパネルから、InspectorパネルのWidgetsContainerスロットにドラッグアンドドロップします。
    3. VirtualItemWidgetオブジェクトをHierarchyパネルから、InspectorパネルのWidgetPrefabスロットにドラッグアンドドロップします。

ストアオブジェクトの例：

ストアを起動してテストする

Unity Editorでストアを起動し、動作を確認します：

  1. Canvasオブジェクトの場合は、すべての子オブジェクトを削除します。
  2. Playをクリックします。その結果、アプリケーションが起動すると、エクソーラログインウィジェットを含むブラウザウィンドウが開きます。
  1. アプリケーションにログインします。ユーザー認証が成功すると、アプリケーションはエクソーラにアイテムカタログを要求します。アイテムのデータを正常に受信した後、アプリケーションは必要なウィジェットを作成します。その結果、ストアアイテムのリストが表示されます。
  1. 任意のアイテムウィジェットの購入ボタンをクリックします。アプリケーションは購入プロセスを開始し、ブラウザに決済UIを表示します。
  1. 購入プロセスを完了します。決済にはテストカードをご利用ください。購入が成功した後、Purchase completedメッセージがログに表示されます。
この記事は役に立ちましたか？
ありがとうございます！
改善できることはありますか？ メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。

お役立ちリンク

認証 カタログ サブスクリプション プロモーション
商品購入 プレイヤーインベントリ ユーザーアカウントと属性 トラブルシューティング
最終更新日: 2025年2月7日

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

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