[Tutorial] Create a grid inventory with UI Toolkit

TUTORIAL | GITHUB REPO

Create a grid inventory with UI Toolkit​

Inventory systems are a great way to help facilitate how you want the player to engage in your game. Perhaps one of the most important components to consider are the constraints you want the system to help enforce. For example, many games gate what a player can carry based on the total weight of all the items. A slightly less common way is based on the item size. This has been done by games such as Resident Evil 4 and Dues Ex. In addition to controlling how much a player can carry, it also creates a mini game out of the inventory by requiring them to strategically organize to maximize what they can carry.

This is a two part series that covers creating a grid inventory from start to finish:

• [Part 1] Design a grid style inventory window with UI Toolkit
• [Part 2] Code the grid based inventory system

Learning Outcomes

Part 1:

• A practical workflow for building up a complex UI with different zones.
• The basics of using UI Toolkit & UI Builder.
• How to create and work with a stylesheet.
• How to add the UI to a scene

Part 2:

• Define and create scriptable object assets to represent items in an inventory
• Create a Visual Element and set various properties via C#
• Hook up mouse/pointer click and move events to implement drag/drop behavior
• Check for overlapping Visual Elements
• Set a Visual Elements position at runtime based on the mouse

 

Thank you very much

 

The first quality guide for UI Toolkit that I could find. Each step well described. Thx mate!