Redirect to the Docs main page.Docs

Configuration

Configuring Options Configuration

Learn how to configure the Options component, including the Options Controller and Option Button, for your inventory UI in Ultimate Grid Inventory.

Understanding the Options Component

The Options component appears when you right-click on an item, displaying a menu with options on the right side.

Showing the Options ComponentLoading image

In this tutorial, we will configure the Options UI for the new Inventory UI:

Options MenuLoading image

Follow these steps to achieve this setup:

Configuring the Options Controller

The Options Controller handles all options and buttons, so you only need to configure the UI. The UGI system manages the functionality.

Create the Options Controller using the UGI Menu:

Right Click on Hierarchy > Ultimate Grid Inventory > Options Controller

The UGI Menu for Options ControllerLoading image

Configure the Background Image: Import the background images you exported from Figma and configure them in the Sprite Editor.

Options Controller Background:

Configuring the Options Controller BackgroundLoading image

Button Background:

Configuring Option Button backgroundLoading image

Reference the Image in Options Controller:

Once you've configured the Options Controller background image, reference it in the component you created.

Referencing the Options Controller backgroundLoading image

Optionally, adjust the Vertical Layout Group to add some padding.

Configuring the padding on Options ControllerLoading image

Create the Options Controller Prefab:

Drag the GameObject to the Project tab to create a Prefab.

Creating Display Filler as PrefabLoading image

Reference this Prefab in the Inventory Settings SO.

Referencing the Options Controller on Inventory Settings SOLoading image

You can now delete the GameObject from the Scene Hierarchy.

Configuring the Option Button

Create the Option Button using the UGI Menu:

Right Click on Hierarchy > Ultimate Grid Inventory > Option Button

Creating the Option ButtonLoading image

Configure the Button Background:

Reference the background image you imported earlier in the Image component.

Referencing the Option Button backgroundLoading image

Adjust the text, font, and color. The Figma color is #C49528.

After configuration, your button should look like this:

Option Button after configurationLoading image

Create the Option Button Prefab:

Drag the GameObject to the Project tab to create a Prefab.

Referencing the Option Button on the Inventory Settings SOLoading image


Now you have configured the Options component. You’re ready to move to the next documentation page!

You are almost done with the configuration!

On this page