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!