Configuring Display Filler
Learn how to configure and customize the Display Filler component for your inventory UI in Ultimate Grid Inventory.
Understanding the Display Filler
The Display Filler component wraps around the Container Grids, adding UI elements to your inventory. It is typically used for UI elements that appear in the inventory screen but not within a ContainerWindow, which shows the raw inventory grid.
Example of Display Filler
Here is an example of a Display Filler in the inventory from v1.0.0:
Example of Display FillerLoading image
In the Unity Editor:
Example of Display Filler on EditorLoading image
For our new UI tutorial, this is the Display Filler we will build:
Example of Display Filler on New UILoading image
Creating Display Filler
To create a Display Filler, use the Ultimate Grid Inventory GameObject Menu:
Right Click on Hierarchy > Ultimate Grid Inventory > Display Filler
Showing display filler GameObject menuLoading image
After creating the Display Filler, configure it to match the UI design from Figma by importing the necessary files (backgrounds, fonts, etc.).
Image of Importation AssetsLoading image
Configuring the Background
Set the Texture Type of the sprite to Sprite (2D and UI). Use the Sprite Editor to add margins for proper resizing.
Your Sprite Editor should look like this:
Sprite Editor DisplayFillerLoading image
Add higher values to Left, Right, Top, and Bottom if your image has gradients.
Configuring the Font
If you're using a font from Google Fonts, convert it to a TextMeshPro font asset:
Right Click on Font > Create > TextMeshPro > Font Asset
This creates a TextMeshPro Font Asset:
Created TMP Font AssetLoading image
Configuring the UI from Display Filler
Change the Background Image: Click on the Display Filler, go to the Image component, and swap the references.
Swap ReferencesLoading image
Header Configuration: Create a Header inside the Display Filler and place it above the GridParent GameObject.
Add a Vertical Layout Group component (Child Alignment: "Upper Left", Child Force Expand: Width and Height both true).
Add a TextMeshPro component inside the Header, and also add the TMPTextReflectionFiller component to replace text with an item property.
Configuring the font on the Display FillerLoading image
GridParent Configuration
Add some top padding to the Horizontal Layout Group to distance the text from above.
Final Steps
Create a Prefab: Drag the GameObject to the Project tab to create a Prefab.
Creating Display Filler as PrefabLoading image
You can now delete the GameObject from the Scene Hierarchy, as it will be used only at runtime.
Set the Prefab Reference: Set the Display Filler Prefab reference in the Inventory Settings SO.
Setting the reference of Display Filler on Inventory Settings SoLoading image
Congratulations! You have configured the Display Filler. This was one of the more complex configurations. The remaining steps are simpler.
Go to the next page to continue your configuration. You're almost done!