How it works...

We took one of the panels that contained the Knob circle background, and children GameObjects of grey and colored star images, and used it to create a Prefab panel-inventory-slot. We then removed the star panel GameObjects from the scene since our script class PlayerInventoryDisplay will create as many of these as needed when the scene begins. This approach saves a lot of drag and dropping, saving Design-Time effort, and eliminating one possible source of sequence/object reference errors when the design of a scene is changed.

The C# script class PlayerInventoryDisplay has two properties:

• A constant integer (NUM_INVENTORY_SLOTS) defining the number of slots in our inventory, which for this game we set to 5.
• A (slots) array of references to PickupUI scripted components. Each of these will become a reference to the scripted component in each of the five Panel-inventory-slot GameObjects in our Panel-stars.

The Awake() method is used to create instances of the prefab in PlayerInventoryDispay so that we know this will be executed before the Start() method in PlayerInventory since no Start() method is executed in a scene until all Awake() methods for all GameObjects in the scene have been completed. The Awake() method first calculates the width of the Panel-stars (50 + (50 * number of inventory slots)). Next, the panel is resized to have that width, using the SetSizeWithCurrentAnchors() method. Then a loop runs for the number of slots in the inventory, each time creating a new star slot GameObject from the prefab, childing the new GameObject to Panel-stars, and adding a reference to the icon slot GameObject in array slots. When the OnChangeStarTotal(...) method is passed the number of stars we are carrying, it loops through each of the five slots. While the current slot is less than our star total, a yellow star is displayed by the calling of the DisplayYellow() method of the current slot (PickupUI scripted component). Once the loop counter is equal to or larger than our star total, then all remaining slots are made to display a grey star via the method DisplayGrey().

Our player character GameObject, player-girl1, has a very simple basic PlayerInventory script. This just detects collisions with objects tagged Star, and when this happens, it removes the star GameObject collided with and calls its AddStar() method of its playerInventoryModel scripted component. Each time the AddStar() method is called, it increments (adds 1) to the total umber of stars being carried, and then calls the OnChangeStarTotal(...) method of the scripted component playerInventoryDisplay. Also, when the scene starts, an initial call is made to the OnChangeStarTotal(...) method so that the UI display for the inventory is set up to show that we are initially carrying no stars.

The public array has been made private and no longer needs to be populated through manual drag-and-drop. When you run the game, it will play just the same as before, with the population of the array of images in our inventory grid panel now automated. The Awake() method creates new instances of the prefab (as many as defined by constant NUM_INVENTORY_SLOTS) and immediately childed them to Panel-slot-grid. Since we have a grid layout group component, their placement is automatically neat and tidy in our panel.