The UI We're Going to Set Up

To build the UI using the Ultimate Grid Inventory (UGI) asset, we'll create a new scene dedicated to the inventory UI. This separation helps maintain a clear distinction between inventory UI and gameplay functionalities. Here's a preview: these scenes will communicate with each other using Scriptable Objects!

UI we're going to buildLoading image

Creating the Scene

Let's start by creating a new scene where we'll develop all the UI components for your game's inventory.

Creating the sceneLoading image

Once the scene is created, open it to begin setting up the UGI managers and configurations.

(Optional) Delete any pre-generated GameObjects that come with the scene.

Deleting pre-generated GameObjectsLoading image

Setting up the Inventory Canvas

Next, we need to create and configure the Canvas for our Inventory UI. To create a Canvas:

1. Right-click in the scene hierarchy
2. Select UI > Canvas

After creating the Canvas, configure it with these settings:

1. In the Canvas Scaler component, change UI Scale Mode to Scale With Screen Size
2. Set the Reference Resolution to X: 2560 and Y: 1440

Your Canvas should now look like this:

Canvas example before initializationLoading image

Setting up the Inventory Manager

With the Canvas configured, we can now initialize the Inventory Manager. This prefab contains essential scripts that manage various inventory functions, including the Draggable System, Input System, and Highlight System.

To set up the Inventory Manager:

1. Navigate to the menu: Ultimate Grid Inventory > Initialize Inventory
2. This will open the initializer tool

Initializer Menu InventoryLoading image

3. Click the Initialize or Update button

If successful, you'll see this confirmation log (or a warning if properties are being updated):

Initializer log successLoading image

This process creates an Inventory Manager in the scene hierarchy and attaches the CanvasInitializer script to the Canvas we created.

Your scene should now look like this:

Scene final resultLoading image

With the Inventory Manager and Canvas properly set up, you can proceed to the next page to complete the setup. If you encounter any issues, refer to the Troubleshooting section below.

---

Troubleshooting

If you encounter the following error message, it means you need to create a Canvas before initializing the Inventory Manager:

Please create a canvas in the scene to complete the Ultimate Grid Inventory configurationLoading image

Why Does This Error Appear?

This error occurs because the Initializer process attempts to attach the CanvasInitializer script to a Canvas, but no Canvas was found in the scene. Make sure to create and configure the Canvas first, following the steps in the "Setting up the Inventory Canvas" section above.