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

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

ソースコード

GitHubでこれらの例のソースコードを参照してください。

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

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

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

カタログページ用のウィジェットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。
2. コンテキストメニューで、User Interface > Widget Blueprintに移動します。
3. ウィジェットブループリントで、以下のUI要素を追加します：

1. • アイテムの表示と仮想通貨パッケージを切り替えるためのボタン
   • アイテムのグループの表示エリア
   • アイテムリストの表示エリア
   • 仮想通貨パッケージのリストの表示エリア

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

4. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
5. レベル起動時のウィジェット表示を実装します。そのためには、以下のようにノードを追加します。CreateWidgetノードで、作成したウィジェットを指定します。

カタログページのウィジェットイベント処理を追加する

1. Hierarchyパネルで、アイテムのリストに切り替えるためのボタンを選択します。
2. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

3. Hierarchyパネルで、仮想通貨パッケージのリストに切り替えるためのボタンを選択します。
4. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

5. Graphビューを開きます。
6. リストを切り替えるためのロジックを実装します。これを行うには、以下の図のようにノードを追加します。

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

アイテムグループのクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_ItemGroupDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでGroupDataを指定します。
   2. Variable TypeフィールドでXsollaItemGroupを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

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

1. Content Browserに移動してUIディレクトリを作成して、コンテキストメニューでUser Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントで、アイテムグループ名の要素を追加します。

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

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムのグループを作成するロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. グループに関するデータを含むオブジェクトの値を、グループの名前を持つ要素に渡します。これを行うには、次の図のようにノードを追加します。

1. 3. Allのカテゴリーを持つすべてのアイテムを表示するロジックを実装します。これを行うには、以下の図のようにブループリントを編集します。

8. リストで選択されているアイテムのグループを強調表示するためのロジックを実装します。これを行うには、次の図に示すようにノードを追加します。

カタログページにアイテムグループのリストを追加する

1. カタログページのウィジェットのブループリントを開きます。
2. アイテムグループの表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、アイテムグループ用に以前に作成したクラスを選択します。
4. グループにアイテムを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. XsollaLoginSubsystemオブジェクトに接続されたUpdateItemGroups SDKメソッド呼び出しをEventConstructノードにリンクし、ユーザーが入力したデータの受け渡しを追加します。
   3. グループにアイテムを追加するためのロジックを実装します。このアクションは、仮想アイテムグループのローカルキャッシュの正常な更新を処理しているときに実行する必要があります。これを行うには、次の図に示すようにノードを追加します。

5. Allのカテゴリーを持つすべてのアイテムを表示するロジックを実装します。これを行うには、以下の図のようにブループリントを編集します。

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

アイテムのクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_CatalogItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでCatalogItemを指定します。
   2. Variable TypeフィールドでStoreItemを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

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

1. Content Browserに移動して、UIディレクトリを作成します。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • アイテム名
   • アイテム価格

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

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムのグループを作成するロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. アイテムに関するデータを含むオブジェクトから、アイテムの名前と価格を持つ要素に値を渡します。これを行うには、次の図のようにノードを追加します。

カタログページにアイテムのリストを追加する

1. カタログページのウィジェットのブループリントを開きます。
2. アイテムリストの表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、アイテム用に以前に作成したクラスを選択します。
4. グループにアイテムを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. XsollaLoginSubsystemオブジェクトに接続されたUpdateVirtualItems SDKメソッド呼び出しをEventConstructノードにリンクし、ユーザーが入力したデータの受け渡しを追加します。
   3. グループにアイテムを追加するためのロジックを実装します。このアクションは、仮想アイテムグループのローカルキャッシュの正常な更新を処理しているときに実行する必要があります。これを行うには、次の図に示すようにノードを追加します。

5. グループにアイテムを追加するためのロジックを実装します。これを行うには、次の図に示すようにノードを追加します。

バーチャルアイテムのグループ別表示を実装する

1. カタログページのウィジェットのブループリントを開きます。
2. Hierarchyパネルで、アイテムグループのリストを選択します。
3. Detailsパネルで、On Item Clickedイベントの側にある+アイコンをクリックします。

4. Graphビューを開きます。
5. グループによるアイテムのフィルタリングのロジックを実装します。これを行うには、以下の図のようにノードを追加します。

バンドルの表示の実装

この命令では、バンドルと仮想アイテムが1つのリストに表示されます。さらに、同じウィジェットを使って、1つのバンドルやアイテムを表示しています。

カタログページにバンドルのリストを追加する

1. カタログページのブループリントを開きます。
2. Graphビューを開きます。
3. バンドルをリストに追加するためのロジックを完成させました。次の図のように、UpdateBundles SDKメソッドのコールバックをUpdateVirtualItemsメソッドのコールバックと一緒に追加します。

アイテムウィジェットの完成

1. アイテムウェジットのブループリントを開きます。
2. アイテム名の近くにバンドルコンテンツを表示するためのボタンを追加します。

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

3. Graphビューを開きます。
4. バンドルコンテンツ閲覧ボタンの表示条件を追加してアイテムを作成するロジックを完成させます。その例が以下の画像です。

バンドルコンテンツを表示するロジックを追加する

1. アイテムウィジェットのブループリントで、Designerビューを開きます。
2. Hierarchyパネルで、バンドルコンテンツを表示するためのボタンを選択します。
3. Detailsパネルで、On Clickedイベントの近くにある+アイコンをクリックします。

4. Graphビューを開きます。
5. バンドルコンテンツ（バンドル内のアイテムのリストと、バンドル内の各アイテムの数量）を表示するためのロジックを実装します。これを行うには、次の図のようにノードを追加します。

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

仮想通貨パッケージ用のクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_VcPackItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでPackItemを指定します。
   2. Variable TypeフィールドでVirtualCurrencyPackageを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

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

1. Content Browserに移動して、UIディレクトリを作成します。コンテクストメニューで、User Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • パッケージ名
   • パッケージ価格

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

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムのグループを作成するロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. パッケージに関するデータを含むオブジェクトから、パッケージの名前と価格を持つ要素に値を渡します。これを行うには、次の図のようにノードを追加します。

カタログページに仮想通貨パッケージのリストを追加する

1. カタログページのウィジェットのブループリントを開きます。
2. List View要素を仮想通貨パッケージのリストの表示エリアに追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、仮想通貨パッケージ用に以前に作成したクラスを選択します。
4. リストにパッケージを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. XsollaStoreSubsystemオブジェクトに接続されたUpdateVirtualCurrencyPackageメソッドコールをEventConstructノードにリンクし、ユーザーが入力したデータの受け渡しを追加しました。
   3. パッケージをリストに追加するためのロジックを実装します。このアクションは、仮想通貨パッケージのローカルキャッシュの更新が成功したときの処理中に行う必要があります。これを行うには、次の図のようにノードを追加します。

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

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

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

ソースコード

GitHubでこれらの例のソースコードを参照してください。

カタログページウィジェットを完成する

1. カタログページのウィジェットを開きます。
2. Graphビューを開きます。
3. ブラウザで決済ページを開くには：
   1. 決済トークンの受信を実装します：
      1. InitiatePurchaseノードを追加して、そしてXsollaStoreSubsystemオブジェクトにリンクされたFetchPaymenTokenSDKメソッドコールを、追加されたノードに接続します。
      2. FetchPaymenTokenメソッドには、購入した商品のSKUとユーザー認証トークンを渡します。

1. 2. XsollaStoreSubsystemオブジェクトにリンクされたLaunchPaymentConsole SDKメソッドを呼び出し、決済トークンを渡します。

決済ページ開設の実施例：

4. ブラウザのウィンドウを閉じた後に購入状況を確認する機能を実装します：
   1. ブラウザの終了イベントを追跡するには、BrowserClosedイベントを購読します。
   2. 購入状況を確認するには、CheckOrder SDKメソッドを呼び出し、認証トークンと注文番号を渡します。

購入状況確認の実装例：

アイテムデータクラスを強化する

1. BP_CatalogItemDataブループリントを開きます。
2. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
3. Detailsパネルで：

1. 1. Variable NameフィルドでのCatalogWidgetを指定します。
   2. Variable Typeフィルドで、W_StoreCatalogを選択します。
   3. Instance EditableとExpose on Spawn ボックスにチェックを入れます。

その結果、リストの各要素には親ウィジェットへのリンクが含まれ、そのメソッドを呼び出すことができるようになります。

カタログページへのアイテムリストの追加を完成する

1. カタログページのウィジェットのブループリントを開きます。
2. Graphビューを開きます。
3. 次の図のように、アイテムのリストを埋めるロジックを編集します。

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

1. アイテムのウィジェットのブループリントを開きます。
2. アイテムを購入するためのボタンを追加します。

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

3. Hierarchyパネルで、アイテムを購入するためのボタンを選択します。
4. Detailsパネルで、On Clickedイベントの側にある+アイコンをクリックします。

5. Graphビューを開きます。
6. アイテムを購入するためのボタンをクリックするためのロジックを実装します。そのためには、以下の図のようにノードを追加します。

その結果、商品購入ボタンをクリックすると、カタログページウィジェットに実装されているロジックに従って、ブラウザ上に決済ページが表示されます。

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

始める前に、カタログに仮想アイテムを表示する機能を実装します。

お知らせ

以下の例では、仮想アイテムの購入を実装する方法を説明します。他のアイテムタイプの設定も同様です。

ソースコード

GitHubでこれらの例のソースコードを参照してください。

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

仮想通貨での仮想アイテムの販売を実装するには：

1. カタログページのウィジェットにアイテムを購入するためのロジックを追加します。
2. アイテムを購入するためのロジックを起動する仕組みをアイテムクラスに追加します。
3. カタログページへのアイテムのリストの追加を調整します。
4. アイテムのウィジェットに購入ボタンを追加します。
5. アイテムのウィジェットに、仮想通貨で購入するロジックを追加します：
   1. あるアイテムのウィジェットのブループリントを開きます。
   2. Graphビューに移動します。
   3. 下記のようにノードを追加します。

これにより、アイテムに指定された仮想通貨の価格がウィジェットに表示され、アイテムの購入に使用されます。複数の仮想通貨で価格が設定されている場合は、最初に表示された仮想通貨が表示または購入に使用されます。

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

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

ソースコード

GitHubでこれらの例のソースコードを参照してください。

イベントリページ用のウィジェットを作成する

1. Content Browserに移動して、UIディレクトリを作成します。
2. コンテキストメニューで、User Interface > Widget Blueprintに移動します。
3. ウィジェットブループリントで、アイテムリストの表示エリアを追加します。

次の図は、イベントリの構造の一例です。

4. レベルの設計図を開きます：
   1. Content Browserのレベルを選択します。
   2. メインメニューで、Blueprints > Open Level Blueprintに移動します。
5. レベル起動時のウィジェット表示を実装します。そのためには、以下のようにノードを追加します。CreateWidgetノードで、作成したウィジェットを指定します。

アイテムのクラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_UserInventoryItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでUserInventoryItemを指定します。
   2. Variable TypeフィールドでInventoryItemを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

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

1. Content Browserに移動して、UIディレクトリを作成し、コンテクストメニューからUser Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • アイテム名
   • アイテムの機能：
     • サブスクリプションの場合 — サブスクリプションの状態（有効または期限切れ）
     • 消耗品の場合 — アイテムの数量
     • 消費されないアイテムの場合、機能は表示されません

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

3. Graphビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して通常の動作を実装できるようにする、UEの標準的なインターフェースです。
7. アイテムを作成するロジックを実装します：

1. 1. OnListItemObjectSetノードを追加して、リストの要素を作成し、ウィジェットを初期化します。
   2. アイテムに関するデータを含むオブジェクトの値を、アイテムの名前を持つ要素に渡します。これを行うには、次の図のようにノードを追加します。

1. 3. アイテムの特徴を持つ要素に、そのタイプに応じたアイテムに関するデータを渡すことで、アイテムのタイプを定義するロジックを実装します。そのためには、次の図のようにノードを追加します。

1. 4. サブスクリプションの有効期限を定義するためのロジックを追加します。これを行うには、次の図のようにノードを追加します。

イベントリページにアイテムのリストを追加する

1. イベントリページのウィジェットのブループリントを開きます。
2. アイテムリストの表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、アイテムグループ用に以前に作成したクラスを選択します。
4. グループにアイテムを追加するためのロジックを実装します：

1. 1. Graphビューを開きます。
   2. 次の図のように、XsollaInventorySubsystemオブジェクトで接続されたUpdateInventoryとUpdateSubscriptionsの連続したSDKメソッドコールをEventConstructノードにリンクします：

1. 3. アイテムのリストに記入するためのロジックを実装します。そのために、以下の図のようにノードを追加します。

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

この例では、ユーザーインベントリに仮想通貨とその残高を表示しています。そのため、事前にユーザーインベントリ内のアイテムの表示を実装しておく必要があります。

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

ソースコード

GitHubでこれらの例のソースコードを参照してください。

残高表示用クラスを作成する

1. Content Browserに移動します。そこで、コンテキストメニューで、Blueprint Classをクリックします。
2. All classesセクションで、Objectを選択してSelectをクリックします。
3. BP_VcBalanceItemDataをクラス名として使用します。
4. 作成したクラスのブループリントを開きます。
5. My Blueprintパネルで、Add NewをクリックしてVariableを選択します。
6. Detailsパネルで：

1. 1. Variable NameフィールドでVcBalanceItemを指定します。
   2. Variable TypeフィールドでVirtualCurrencyBalanceを選択します。
   3. Instance EditableとExpose on Spawnボックスをチェックを入れます。

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

1. Content Browserに移動し、UIディレクトリを作成し、コンテキストメニューでUser Interface > Widget Blueprintに移動します。
2. ウィジェットのブループリントに、以下のUI要素を追加します：
   • 仮想通貨名
   • 仮想通貨の数量

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

3. Graphのビューを開きます。
4. Class settingsをクリックします。
5. Detailsパネルで、Interfaces > Implemented interfacesに移動します。
6. AddをクリックしてUserObjectListEntryを選択します。これは、UIプリミティブがリストの要素に対して正常な動作を実装するための、標準的なUEインターフェースです。
7. 仮想通貨をリストに追加するためのロジックを実装します：

1. 1. EventOnListItemObjectSetノードを追加して、リスト要素を作成し、ウィジェットを初期化します。
   2. 仮想通貨に関するデータを含むオブジェクトから、仮想通貨名と数量を持つ要素に値を渡します。これをするには、次の図のようにノードを追加します。

インベントリー表示用のウィジェットを完成する

1. イベントリページのウィジェットのブループリントを開きます。
2. 仮想通貨のリスト表示エリアにList View要素を追加します。
3. Detailsパネルで、Entry Widget Classフィールドで、残高表示用に以前作成したクラスを選択します。
4. 仮想通貨のリストを記入するためのロジックを実装します。

1. 1. Graphビューを開きます。
   2. XsollaInventorySubsystemオブジェクトと接続されたUpdateVirtualCurrencyBalanceメソッドコールをEventConstructノードにリンクします。
   3. 仮想通貨のリストを埋めるためのロジックを実装します。このアクションは、仮想通貨残高のローカルキャッシュの更新が成功したときに処理される必要があります。これをするには、以下の図のようにノードを追加します。