> For the complete documentation index, see [llms.txt](/llms.txt)

# UI Kit を使ってアイテムインベントリを実装

もう少し高度なチュートリアルにも挑戦してみましょう



## UI 構成

![img_1.png](img_1.png)

まずシーンの全体像をお見せします。

画面上部にインベントリの容量の使用状況を表示し、中央に所持アイテムの一覧、下部にアイテムを入手するボタンを用意しています。

## コンテキスト

![img_2.png](img_2.png)

Context の配置について解説します。

A は GS2-Inventory のインベントリコンテキストです。

B は GS2-Inventory のアイテムリストコンテキストです。

C は GS2-Inventory のアイテムコンテキストです。

D は GS2-Exchange で 無償で Potion を入手する交換レートコンテキストです。

E は GS2-Exchange で 無償で Ether を入手する交換レートコンテキストです。

## 実装解説

### インベントリの消費容量を表示

![img_3.png](img_3.png) ![img_4.png](img_4.png)

InventoryWindow ノードには GS2-Inventory のインベントリを指定したコンテキストと、Inventory の情報を取得する Fetcher が指定されています。

![img_5.png](img_5.png) ![img_6.png](img_6.png)

Text には Gs2InventoryInventoryLabel が設定されており、`現在の消費容量 / 最大容量` という文字列をテキストコンポーネントの値に反映しています。

### アイテムの一覧を取得

![img_7.png](img_7.png) ![img_8.png](img_8.png)

Gs2InventoryOwnItemSetFetcher でインベントリに含まれるアイテムの一覧を取得しています。

Gs2InventoryOwnItemSetList で 100個 の Item ノードを複製し、
それぞれの Item ノードが持つ Gs2InventoryOwnItemSetContext に所持しているアイテムの情報をコンテキスト情報として設定しています。

### アイテムの表示

![img_9.png](img_9.png) ![img_10.png](img_10.png)

Item ノードは Gs2InventoryOwnItemSetContext を持ちますが、ここに ScriptableObject は設定していません。
なぜなら、Gs2InventoryItemSetList によって値が設定されるためです。

Fetcher でアイテムモデルと、所持情報をそれぞれ取得しています。

![img_11.png](img_11.png) ![img_12.png](img_12.png)

Name では、Gs2InventoryItemModelLabel を使用して、取得したアイテム名をテキストコンポーネントに反映しています。

![img_13.png](img_13.png) ![img_14.png](img_14.png)

Count では、Gs2InventoryOwnItemSetLabel を使用して、取得したアイテムの所持数量をテキストコンポーネントに反映しています。

![img_17.png](img_17.png)

![img_15.png](img_15.png) ![img_16.png](img_16.png)

Use ノードの配下には Gs2InventoryItemSetConsumeAction プレハブが配置されており、消費数量を1で指定してあります。

消費されるアイテムの種類はコンテキストによって決定されており、親階層に存在する Item ノードで指定されているアイテムが消費されます。

そして、消費処理が成功した場合、自分自身を無効化するように設定されています。

![img_18.png](img_18.png) ![img_19.png](img_19.png)

Use ノードにはボタンが配置されており、クリック時に Gs2InventoryItemSetConsumeAction プレハブ を有効化するように設定されています。

これによって、ボタンをクリックするとアイテムが1つ消費される動作となります。

### アイテムの入手

アイテムを入手するAPIはゲーム内から呼び出せないため、今回は GS2-Exchange に無償で各アイテムを入手できる交換レートを用意し、交換を実行することでアイテムを入手できるように設定しています。

![img_22.png](img_22.png)

![img_23.png](img_23.png) ![img_24.png](img_24.png)

Acquire Potion ノードの配下には Gs2ExchangeExchangeExchangeAction プレハブが配置されており、 交換数量を1で指定してあります。

そして、交換処理が成功した場合、自分自身を無効化するように設定されています。

![img_20.png](img_20.png) ![img_21.png](img_21.png)

Acquire Potion ノードには交換レートコンテキストが設定されており、交換を実行するレートを指定しています。

ボタンコンポーネントも配置されており、ボタンをクリックすることで Gs2ExchangeExchangeExchangeAction プレハブを有効化しています。

Acquire Ether ノードも類似の設定が行われており、設定されている交換レートが Potion ではなく Ether が手に入る交換レートが設定されています。

## 動作確認

![img_25.png](img_25.png)

起動すると、最初は何もアイテムを所持していないため空のリストと、インベントリの消費容量が 0/10 という表示がされます。

Acquire Potion をクリックしてみます。

![img_26.png](img_26.png)

1度の交換でポーションを10個入手できる交換レートですので、アイテムの一覧に Potion が 10 個表示されました。

次は、Acquire Ether をクリックしてみます。

![img_27.png](img_27.png)

2行目が追加され、Ether が増えました。

Potion をさらに10回交換してみます。

![img_28.png](img_28.png)

Potion は 99個 スタックできる設定になっているため、99個のスタックと 11個のスタックに分かれました。

99個 のスタックの Use ボタンをクリックして Potion を消費してみます。

![img_29.png](img_29.png)

98個 になります。

次は、11個 のスタックの Use ボタンをクリックして Potion を消費してみます。

![img_30.png](img_30.png)

10個 になりました。

## 最後に

ノーコードでここまで出来るのは少し驚きだったのではないでしょうか？
まだまだ UI Kit の解説は続きます。ぜひ続きもご覧ください。