Panel

v4.0

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.

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.

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.

"Inventory Panel" in the world scene of the Party Based RPG demo game

Required fields

UICamera

Generally this is set by PanelManager

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.

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.

You can create your own custom button prefabs!

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()

Generally you do not need to worry about this

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

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