アプリケーション側でSDKを統合する
一般情報
- ログインシステム、インゲームストアなど、アプリケーションのページのインターフェイスをデザインします。
- アプリケーションで、SDKメソッドを使用してユーザー認証、ストア表示、購入などのロジックを実装します。
お知らせ
Unityに関する説明に従って独自のソリューションを作成することもできますし、デモシーンをテンプレートとして使用することもできます。デモシーンのUIを自分のアプリケーションに合わせるには、UIビルダーを使います。
クイックスタート
以下は、ゲーム内の販売シナリオを最も簡単に実装するための手順です。
相互作用のフロー:
- ユーザーはゲームを起動します。
- このアプリケーションはエクソーラログインウェブウィジェットを起動します。
- ユーザーはゲームにログインし、アイテムカタログに移動します。
- アプリケーションは、エクソーラからアイテムカタログを要求します。
- アイテムデータの受信に成功すると、アプリケーションはアイテムカタログを表示します。
- ユーザーはアイテム購入ボタンをクリックします。
- アプリケーションは購入プロセスを開始し、ブラウザに決済UIを表示します。
- ユーザーが支払いを行います。
- アプリケーションは決済UIを閉じ、支払いデータをエクソーラに渡します。
- アプリケーションは、支払い処理の結果に関するメッセージをログに出力します。
アプリケーション(StoreController
スクリプト)とSDKの相互作用のためのシーケンス図:
シナリオの制限:
- 既製のエクソーラログインウェブウィジェットは、ユーザー認証に使用されます。エクソーラは標準的なウィジェットテンプレートを提供します。その外観とコンテンツは、プロジェクトに選択したログイン方法とアドミンページからのウィジェットのカスタマイズ設定によって決定されます。
お知らせ
ウィジェットカスタマイズは、エクソーラ製品ライセンス契約を締結した場合にのみ利用可能です。契約書にサインするには、アドミンページの契約と税金 > 契約セクションにアクセスしてください。
- このシナリオでは、ショッピングカートを使用せずに、実際通貨のみのアイテムの販売を実装します。
アイテムウィジェットスクリプトを作成する
VirtualItemWidget
という名前の新しいスクリプトを作成します:
- Unity Editorでプロジェクトを開きます。
- メインメニューでは、
Assets > Create > C# Script に移動します。 Assets フォルダー内の新しいファイルの名前をVirtualItemWidget
として指定します。- 作成したファイルをエディタで開き、次のコードを追加します:
Copy
- 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;
}
}
- 変更を保存します。
アイテムウィジェットプレハブを作成する
ストアにアイテムを表示するUIを作成します:
- UI要素を表示する
Canvas
オブジェクトを作成します。これを行うには、メインメニューでGameObject > UI > Canvas に移動します。これにより、シーンに以下のオブジェクトが作成されます:Canvas
、Canvas Scaler
、およびGraphic Raycaster
コンポーネントを持つCanvas
オブジェクト。- そのようなオブジェクトがシーンにまだ存在しない場合は、
EventSystem
オブジェクト。
VirtualItemWidget
子オブジェクトを作成します:Hierarchy パネルで、Canvas
オブジェクトを選択します。- メインメニューで、
GameObject > UI > Image に移動します。このオブジェクトはCanvas
オブジェクトの子になります。 - 作成したオブジェクトの名前を
VirtualItemWidget
に変更します。
- アイテム情報を表示するためのUIオブジェクトを追加します:
- ウィジェットアイコンを表示するオブジェクトを作成します:
Hierarchy パネルで、VirtualItemWidget
オブジェクトを選択します。- メインメニューで、
GameObject > UI > Image に移動します。 - 作成したオブジェクトの名前を
IconImage
に変更します。
- アイテム名を表示するオブジェクトを作成します:
Hierarchy パネルで、VirtualItemWidget
オブジェクトを選択します。- メインメニューで、
GameObject > UI > Legacy > Text に移動します。 - 作成したオブジェクトの名前を
NameText
に変更します。
- アイテムの説明を表示するオブジェクトを作成します:
Hierarchy パネルで、VirtualItemWidget
オブジェクトを選択します。- メインメニューで、
GameObject > UI > Legacy > Text に移動します。 - 作成したオブジェクトの名前を
DescriptionText
に変更します。
- アイテム購入ボタンのオブジェクトを作成します:
Hierarchy パネルで、VirtualItemWidget
オブジェクトを選択します。- メインメニューで、
GameObject > UI > Legacy > Button に移動します。これにより、Text
子オブジェクトを使用してボタンオブジェクトが作成されます。 - 作成したオブジェクトの名前を
BuyButton
に変更します。 Text
オブジェクトの名前をPriceText
に変更します。
- ウィジェットアイコンを表示するオブジェクトを作成します:
- アイテムウィジェットスクリプトをコンポーネントとして
VirtualItemWidget
オブジェクトに追加します:Hierarchy パネルで、VirtualItemWidget
オブジェクトを選択します。Inspector パネルで、Add Component をクリックして、VirtualItemWidget
スクリプトを選択します。
- 必要なスクリプトスロットにUI要素を割り当てます:
Hierarchy パネルで、VirtualItemWidget
オブジェクトを選択します。- 子UIオブジェクトを
Hierarchy パネルから、Inspector パネルの対応するVirtualItemWidget
コンポーネントスロットにドラッグアンドドロップします。
- 作成した
VirtualItemWidget
オブジェクトをプレハブに変換します:Hierarchy パネルで、VirtualItemWidget
オブジェクトを選択します。- オブジェクトを
Assets フォルダー内のProject パネルにドラッグアンドドロップします。その結果、新しいオブジェクトがAssets フォルダーに表示され、シーン上のオブジェクトの色が青に変わります。
アイテムウィジェットプレハブの例:
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/item-widget.png)
ストアスクリプトを作成する
StoreController
という名前の新しいスクリプトを作成します:
- Unity Editorでプロジェクトを開きます。
- メインメニューでは、
Assets > Create > C# Script に移動します。 Assets フォルダー内の新しいファイルの名前をStoreController
として指定します。- 作成したファイルをエディタで開き、次のコードを追加します:
Copy
- 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}");
}
}
}
- 変更を保存します。
ストアオブジェクトを作成する
ストア内のアイテムリストを表示するUIを作成します:
- グリッド内の個々のアイテムのウィジェットを配置し、ネストされたオブジェクトの場所とサイズを管理するコンポーネントを追加します。グリッド内の個々のアイテムのウィジェットを配置し、ネストされたオブジェクトの場所とサイズを管理するコンポーネントを追加します。これを行うには:
Hierarchy パネルで、Canvas
オブジェクトを選択します。Inspector パネルで、Add Component をクリックして、Grid Layout Group
スクリプトを選択します。Inspector パネルで、必要に応じてコンポーネントの設定を変更します:セルのサイズ、間隔などを設定します。
お知らせ
より良い視覚化とより簡単な設定のために、
VirtualItemWidget
オブジェクトの複数のコピーを作成することをお勧めします。これにより、ストアの一般的なレイアウトをすぐに評価することができます。- ストアスクリプトをコンポーネントとして
Canvas
オブジェクトに追加します:Hierarchy パネルで、Canvas
オブジェクトを選択します。Inspector パネルで、Add Component をクリックして、StoreController
スクリプトを選択します。
- 要素を
StoreController
スクリプトの必要なスロットに割り当てます:Hierarchy パネルで、Canvas
オブジェクトを選択します。Canvas
オブジェクトをHierarchy パネルから、Inspector パネルのWidgetsContainer スロットにドラッグアンドドロップします。VirtualItemWidget
オブジェクトをHierarchy パネルから、Inspector パネルのWidgetPrefab スロットにドラッグアンドドロップします。
ストアオブジェクトの例:
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/store-layout.png)
ストアを起動してテストする
Unity Editorでストアを起動し、動作を確認します:
Canvas
オブジェクトの場合は、すべての子オブジェクトを削除します。Play をクリックします。その結果、アプリケーションが起動すると、エクソーラログインウィジェットを含むブラウザウィンドウが開きます。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-log-in.png)
- アプリケーションにログインします。ユーザー認証が成功すると、アプリケーションはエクソーラにアイテムカタログを要求します。アイテムのデータを正常に受信した後、アプリケーションは必要なウィジェットを作成します。その結果、ストアアイテムのリストが表示されます。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-catalog.png)
- 任意のアイテムウィジェットの購入ボタンをクリックします。アプリケーションは購入プロセスを開始し、ブラウザに決済UIを表示します。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-payment-ui.png)
- 購入プロセスを完了します。決済にはテストカードをご利用ください。購入が成功した後、
Purchase completed
メッセージがログに表示されます。
![](https://cdn.xsolla.net/developers/v-20250218-04/images/sdk/unity/integration/testing-purchase-complete.png)
この記事は役に立ちましたか?
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。お役立ちリンク
最終更新日: 2025年2月7日誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。