Understanding Container Displays

The Container Display is a crucial component in the Ultimate Grid Inventory (UGI) system that:

• Renders your inventory grids in the UI
• Works with the Display Filler to provide visual framing and styling
• Connects inventory data to visual representation
• Allows different display styles for different inventory types

You'll typically need multiple Container Displays in your game:

• One for the player's main inventory
• One for environment containers (chests, lockers, etc.)
• Additional ones for specialized inventories (crafting, shop, etc.)

Setting Up Container Displays

In this guide, we'll create two Container Displays:

1. An environment container display for interacting with world objects
2. A player inventory display with a custom visual style

Creating the Environment Container Display

First, we'll set up a scrollable area for environment containers like chests and backpacks.

Step 1: Create a UGI Scroll Area

1. Follow the instructions in Creating a UGI Scroll Area to set up a scrollable container
2. Position this scroll area where you want environment containers to appear in your UI
3. Make sure the Content object inside the scroll area is properly configured

Step 2: Add the Container Display Component

1. Select the Content GameObject inside your scroll area
2. Add the ContainerDisplay component:
   • In the Inspector, click Add Component
   • Search for "Container Display"

Container Display Component on ContentLoading image

Step 3: Create a Display Anchor

The Display Anchor is a Scriptable Object that connects container objects in your game world to this UI display.

1. In your Project window, right-click in your desired folder
2. Navigate to Create > Inventory > UI > New Container Display Anchor

Creating a Display Anchor SOLoading image

3. Name it appropriately (e.g., "EnvironmentContainerDisplayAnchor")

Container Display Anchor CreatedLoading image

Step 4: Link the Display Anchor

1. Select your Content GameObject with the ContainerDisplay component
2. Assign your newly created Display Anchor to the "Display Anchor SO" field

Assigning the Display AnchorLoading image

Step 5: Configure Display Filler (Optional)

The Display Filler provides visual styling for your inventory grid. You can:

• Leave the "Prefab Display Filler" field empty to use the default style from your Inventory Settings
• Assign a custom prefab for a unique visual style for this specific container display

Understanding the Anchor System

The Container Display Anchor creates a connection between:

• Environment objects (chests, backpacks) with the EnvironmentContainerHolder component
• UI elements with the ContainerDisplay component

When a player interacts with a container in the game world:

1. The EnvironmentContainerHolder is activated
2. It finds the appropriate ContainerDisplay through the shared anchor
3. The container's inventory grid appears in your UI

Environment Container Holder ReferenceLoading image

This system allows you to have a single UI area that can display the contents of any container the player interacts with.

Creating the Player Inventory Display

Now let's set up the player's main inventory display with a custom visual style inspired by Resident Evil's inventory case.

Step 1: Create a Player Inventory Scroll Area

1. Create another UGI Scroll Area for the player's inventory
2. Position it in your desired location in the UI

Player Inventory Scroll AreaLoading image

Step 2: Add Container Display and Anchor

1. Add the ContainerDisplay component to the Content GameObject
2. Create a new Display Anchor (e.g., "PlayerInventoryDisplayAnchor")
3. Assign it to the Container Display

Player Inventory Container DisplayLoading image

Step 3: Link to Container Holder

If you've already set up a Container Holder for the player inventory (as described in Creating Holders):

1. Find your Container Holder GameObject
2. Assign the same Display Anchor to its "Container Display Anchor SO" field

Container Holder Anchor ReferenceLoading image

This creates a connection between the Container Holder (which manages container items) and the Container Display (which shows their contents).

Creating a Custom Display Filler

Let's create a stylized inventory background inspired by Resident Evil's attache case.

Step 1: Create the Display Filler

1. Navigate to Ultimate Grid Inventory > Resident Evil Display Filler in the menu
2. This creates a pre-configured GameObject with the necessary components

Resident Evil Display Filler MenuLoading image

Step 2: Save as Prefab

1. Drag the created GameObject into your Project window to create a prefab
2. You can customize the appearance by modifying the prefab's sprites and settings

Display Filler PrefabLoading image

Step 3: Assign to Player Container Display

1. Select your player inventory's Container Display
2. Assign your custom Display Filler prefab to the "Prefab Display Filler" field

Assigning Custom Display FillerLoading image

Testing Your Container Displays

After setting up both displays:

1. Enter Play mode to test your configuration
2. The player inventory should appear with your custom styling
3. When interacting with environment containers, their contents should appear in the environment container display

Next Steps

Now that you've set up your Container Displays, you can:

• Create and configure items to populate your inventories
• Set up container items like backpacks and chests
• Implement interactive containers in your game world
• Customize the visual appearance of your inventory displays

With properly configured Container Displays, your inventory system will provide players with a visually appealing and functional interface for managing their items.