Inventory. Part one - graphic interface. Log #13 (Unity, C#)
24.02.2018

    Now, when I have done player menu I can create inventory. It's going to be similar inventory to Skyrim, which means list of items with item details window, only without 3D object model. Item list is going to be separated by item types as weapons, armors, tools, potions, books, goods and favorites. Each type will have its own panel, that can be disabled and enabled by toggles in panel on top of inventory. These toggles will have its own favorite option, that will enable instant visibility for corresponding panel. Selected toggles then will enable only corresponding panel after opening inventory.

    Under UI canvas, where my PlayerMenu is I create new panel and rename it to Inventory. Under this panel will be all inventory elements. I won't describe creating of these panels here, as I did it in previous log, but I will concentrate on ordering and layouts of my panels. There are two main panels in my inventory window. One for toggles and second for item list. Item list contains panels for each type of items. These panels will contain main stacks, containers, with items. Adjacent to item list window is details window and close button is under details window.

    To make creating toggles panel easier, I will use Horizontal Layout Group component. This component can be added to any UI element. It deals with ordering child objects horizontally and its behaving. To added component I set Padding and Spacing to 20px, aligment to Middle Center and check Heigh for Child Force expand.

    For the ItemList panel I add Vertical Layout Group component. Its the same as Horizontal Layout, but in vertical direction (how unexpected). All panels in ItemList are also going to have Vartical Layout Group. Because it is list and it is going to change its size based on how many items there is, but inventory window can't change its size, I have to manage it somehow, fortunately exactly this behaving is solved in manual. Inventory works as follows; with every new item stack added, will panel, of its item type, get bigger, and when size of all added stacks will exceed inventory size, scrollbar will enable. It's important to change size of ItemList with increasing size of panels. And also change size of panels with stacks count. To do this, I have to set Vertical Layouts of these panels properly. Except setting padding, spacing and aligment I also have to check Heigh in Child Controls Size for both panels. Now ItemList will change its size based on number of stacks, but it would exceed my inventory window., so I will use scrollbar. I add to ItemList UI>Scrolbar and ScrollRect component. Then set size, color  and behaving of scrollbar and drag it into ScrollRect component into Vertical Scrollbar field. This is how inventory looks like.

 

Inventory

 

    Now I want my inventory to show on screen after pressing inventory button in my player menu. New created script InventoryGUIManager I drag on Inventory. Inside I create methods ShowInventory() and HideInventory(). In these methods I change local position of RectTransform.

 

public void ShowInventory()
{
    RectTransform rt = GetComponent<RectTransform>();
    rt.localPosition = new Vector3(rt.localPosition.x, screenHeight / 2 - transform.parent.GetComponent<RectTransform>().localPosition.y, rt.localPosition.z);
}

public void HideInventory()
{
    RectTransform rt = GetComponent<RectTransform>();
    rt.localPosition = new Vector3(rt.localPosition.x, -transform.parent.GetComponent<RectTransform>().localPosition.y * 2, rt.localPosition.z);
}

 

    To open inventory, in component Button in Inventory_button (in PayerMenu), in OnClick() panel I add new event then drag Inventory object on empty field and select InventoryGUIManager>ShowInventory(). The same I do for HideInventory() only on close button. To hide inventory after game starts I add method Awake() and will call HideInventory() in it. In next log I will work on toggles.