Implement item inventory using UI Kit

try a more advanced tutorial!

UI Configuration

img_1.png

First, let me show you the scene as a whole.

The upper part of the screen shows the inventory capacity usage, the list of possessed items is in the center, and the buttons to obtain items are at the bottom.

Context

img_2.png

This section describes the placement of Context.

A is the inventory context for GS2-Inventory.

B is the item list context for GS2-Inventory.

C is the item context in GS2-Inventory.

D is the exchange rate context for obtaining a Potion for free on GS2-Exchange.

E is the exchange rate context for obtaining Ether for free on a GS2-Exchange.

Implementation Description

Display inventory consumption capacity

img_3.png img_4.png

The InventoryWindow node has a context specifying the GS2-Inventory inventory and a Fetcher that retrieves the inventory information.

img_5.png img_6.png

Text is set to Gs2InventoryInventoryLabel, which reflects the string Current Consumed Capacity / Maximum Capacity in the value of the text component.

Get a list of items.

img_7.png img_8.png

Gs2InventoryItemSetFetcher to get a list of items in the inventory.

Gs2InventoryItemSetList duplicates the 100 Item nodes, and then The context information of the items in the Gs2InventoryItemSetContext of each Item node is set as the context information.

Displaying Items

img_9.png img_10.png

The Item node has a Gs2InventoryItemSetContext, but no ScriptableObject is set here. The Item node has a Gs2InventoryItemSetContext, but no ScriptableObject is set here because the value is set by the Gs2InventoryItemSetList.

Fetcher retrieves the item model and possession information, respectively.

img_11.png img_12.png

In Name, Gs2InventoryItemModelLabel is used to reflect the retrieved item name in the text component.

img_13.png img_14.png

Count uses Gs2InventoryItemSetLabel to reflect the quantity of the acquired item in the text component.

img_17.png

img_15.png img_16.png

The Gs2InventoryItemSetConsumeAction prefab is placed under the Use node, with a consumption quantity of 1.

The type of item to be consumed is determined by the context, and the item specified in the Item node that exists in the parent hierarchy is consumed.

It is then set to deactivate itself if the consumption process is successful.

img_18.png img_19.png

A button is placed in the Use node, which is set to activate the Gs2InventoryItemSetConsumeAction prefab when clicked.

This causes the behavior to consume one item when the button is clicked.

Obtaining items

Since the API for obtaining items cannot be called from within the game, this time GS2-Exchange is set up to provide an exchange rate for obtaining each item for free, and the item can be obtained by executing the exchange.

img_22.png

img_23.png img_24.png

Under the Acquire Potion node, a Gs2ExchangeExchangeAction prefab is placed, with the exchange quantity specified as 1.

It is then configured to deactivate itself if the exchange process is successful.

img_20.png img_21.png

The Acquire Potion node has an exchange rate context set, which specifies the rate at which the exchange will be performed.

A button component is also in place, and clicking the button activates the Gs2ExchangeExchangeAction prefab.

The Acquire Ether node is similarly configured, with the exchange rate set to the exchange rate at which Ether is obtained instead of Potion.

Confirmation of operation

img_25.png

Upon activation, you will initially see an empty list as you do not have any items and an inventory consumption of 0/10.

Click on Acquire Potion.

![img_26.png]

Since the exchange rate is to obtain 10 potions in one exchange, 10 Potion are now displayed in the list of items.

Next, let’s click Acquire Ether.

img_27.png

A second line has been added and the Ether has increased.

Let’s try exchanging Potion 10 more times.

img_28.png

Since Potion is configured to have 99 stacks, it is now divided into 99 stacks and 11 stacks.

Let’s try consuming the Potion by clicking the Use button on the stack of 99.

img_29.png

The number of Potion is now 98.

Next, let’s try consuming Potion by clicking the Use button on a stack of 11.

img_30.png

The number of Potion is now 10.

Finally

It must have been a bit of a surprise to see how far we could go with no code at all, wasn’t it? We will continue to explain more about the UI Kit. Please check out the rest of the article.