---
description: v4.0
---

# Panel

{% hint style="success" %}
For an example, find the "Inventory Panel" in the world scene of the Party Based RPG demo game. This is the panel that is used when the player inventories are displayed.
{% endhint %}

The `Panel` class drives much of the user interaction with items in the inventory. View the demo scene panels to better understand how they are used in practice. While there are a few panel prefabs set up, you are able to create your own with specific values that may be different for various use cases and situations.

{% hint style="info" %}
Unity defaults UI Grids to start in the top left. We generally speak of the grid or spots in Y, then X, rather than X then Y.
{% endhint %}

<figure><img src="https://2431624982-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MY3N_li2jPq7az6mYfq%2Fuploads%2FkxirvkKEGNEfbV6kVkz1%2FScreenshot%202023-06-29%20at%206.05.01%20PM.png?alt=media&#x26;token=8963b763-8327-405b-a3de-170e3360e812" alt=""><figcaption><p>"Inventory Panel" in the world scene of the Party Based RPG demo game</p></figcaption></figure>

## Required fields

### **UICamera**

_<mark style="color:red;">Generally this is set by PanelManager</mark>_

This is the UI Camera which draws the UI and UI Inventory objects. If a `Panel` starts in the scene, this should be populated. If it is instantiated via the `PanelManager`, then this value will be populated at that point.

### **Inventory Area**

This is where the UI buttons will be instantiated. Note that it has a `Grid Layout Group` component, and the `cell size` values should match the `GridButtonSize` on the `PrefabManager` in your scene. This value  defaults to 100. The `width` and `height` of the `Inventory Area` should be the `GridButtonSize` multiplied by the number of grid spots `X` and `Y`.&#x20;

As an example, the demo prefab `Small Box Inventory Panel` has `Rows` = 6 and `Columns` = 8 in the `Spots` object in the `Panel`. The `Inventory Area` `Rect Transform` is 800 wide and 600 high.

### **Button Prefab**

This is the prefab for the UI buttons used with this `Panel`. Note that some inventory panels in your project may make use of different buttons, which may have different sprites attached to them.

{% hint style="success" %}
You can create your own custom button prefabs!
{% endhint %}

### **Inventory Objects Parent Rect Transform**

This is a child of this object, and is where the inventory items will be stored.

### **Z Position**

This is used when instantiating items. It helps handle the stacking of items, so that items held on screen show up in front of items in an inventory.

## Options / Other

### **Button Colors**

These are the color tints that will be used at run time. Optionally, set all to `alpha = 0` to not have any visual changes.

### **Show Color On Hover**

If `true`, when a user is hovering over a grid button with a held object, all grid buttons underneath the object will turn to their `avialableColor` or `unavailableColor` depending on if they are filled or not.

### **Compute Can Place On Hover Group**

If `true`, when a user is hovering over a grid button with a held object, instead of displaying whether the buttons in the group being covered by the object are individually filled or not, the `availableColor` will be used if the held item can be placed, and the `unavailableColor` used if the held item can not be placed.

This is useful to give the user visual feedback whether an item can be placed or not. Note, if an item in the covered group will be picked up if the user places the held item, the grid buttons will show up in the `availableColor`.

### **Grid Button Pixel Size**

Defaults to 100. This is the pixel size of each button. Larger size = fewer grid buttons can fit on the screen. If you have a very large area, make this smaller. The objects will also be scaled to fit.

## Other Methods, Properties, Variables

### **`OnEnable()` and `SetupAreaAndButtons()`**

_<mark style="color:red;">Generally you do not need to worry about this</mark>_

When the panel is enabled if the value of `iHaveInventoryGameId` is populated, the panel area and buttons will setup. Otherwise, that setup is handled in `SetupAreaAndButtons()`.

### Grid Details

```csharp
public int GridColumnsCount // Number of columns
public int GridRowsCount // Number of rows
public float GridSpotPixelPercent // gridButtonPixelSize / 100 (100 = default size)
public string iHaveInventoryGameId; // GameId of the object which owns the displayed inventory
```
