Modifying the game for a second inventory panel for keys

We have created a great display panel for the collection of star objects. Now we can reuse that work, to create a second panel to display the collection of key objects in the game.

To modify the game to make a second inventory panel for key collection, do the following:

1. Duplicate GameObject Panel-stars, naming the copy Panel-keys.
2. With Panel-keys selected in the Hierarchy, do the following:
   • Change the Text (Script) of child Text-title from Stars to Keys.
   • In the Rect Transform, choose top-right, set Pos X to -10 (to move away from the right edge) and Pos Y to -30 (to vertically align with Panel-keys).
   • For each Image-icon-grey GameObject that is a child of all three panel-inventory-slots, change the Image (Script) Source Image to: icon_key_grey_100.
   • For each Image-icon-color GameObject that is a child of all three panel-inventory-slots, change the Image (Script) Source Image to: icon_key_green_100.
   • For all of the Image-icon-grey GameObjects and the Image-icon-color GameObjects that are children of all three panel-inventory-slots, in the Rect Transform set the Scale to (0.75, 0.75, 1). This is to make the key images fit fully inside the background panel circle images.
3. Remove from GameObject player-SpaceGirl script components: PlayerInventory and PlayerInventoryDisplay.
4. Create the following C# Script PlayerInventoryKeys in the _Scripts folder:

using UnityEngine; 

public class PlayerInventoryKeys : MonoBehaviour { 
   private int starTotal = 0; 
   private int keyTotal = 0; 
   private PlayerInventoryDisplayKeys playerInventoryDisplay; 

   void Awake() { 
         playerInventoryDisplay = GetComponent<PlayerInventoryDisplayKeys>(); 
   } 

   void Start() { 
         playerInventoryDisplay.OnChangeStarTotal(starTotal); 
         playerInventoryDisplay.OnChangeKeyTotal(keyTotal); 
   } 

   void OnTriggerEnter2D(Collider2D hit) { 
         if(hit.CompareTag("Star")){ 
               AddStar(); 
               Destroy(hit.gameObject); 
         } 
 
         if(hit.CompareTag("Key")){ 
               AddKey(); 
               Destroy(hit.gameObject); 
         } 
   } 

   private void AddStar() { 
         starTotal++; 
         playerInventoryDisplay.OnChangeStarTotal(starTotal); 
   } 

   private void AddKey() { 
         keyTotal++; 
         playerInventoryDisplay.OnChangeKeyTotal(keyTotal); 
   } 
} 

5. Add the following C# script PlayerInventoryDisplayKeys to GameObject player-SpaceGirl in the Hierarchy:

using UnityEngine; 

[RequireComponent(typeof(PlayerInventoryKeys))] 
public class PlayerInventoryDisplayKeys : MonoBehaviour  { 
   public PickupUI[] slotsStars = new PickupUI[1]; 
   public PickupUI[] slotsKeys = new PickupUI[1]; 

   public void OnChangeStarTotal(int starTotal) { 
         int numInventorySlots = slotsStars.Length; 
         for(int i = 0; i < numInventorySlots; i++){ 
               PickupUI slot = slotsStars[i]; 
               if(i < starTotal) 
                     slot.DisplayColorIcon(); 
               else 
                     slot.DisplayGreyIcon(); 
         } 
   } 

   public void OnChangeKeyTotal(int keyTotal) { 
         int numInventorySlots = slotsKeys.Length; 
         for(int i = 0; i < numInventorySlots; i++){ 
               PickupUI slot = slotsKeys[i]; 
               if(i < keyTotal) 
                     slot.DisplayColorIcon(); 
               else 
                     slot.DisplayGreyIcon(); 
         } 
   } 
}

6. With the GameObject player-SpaceGirl selected in the Hierarchy, for its PlayerInventoryDisplayKeys scripted component, set both slotsKeys and slotsStars to 3 (making the size of each of these arrays 3). Then drag the corresponding inventory-slot GameObjects from the Hierarchy to populate these arrays.
7. Create a new GameObject key by dragging a copy of the sprite image icon-key-green-100 from the Project panel into the scene. Then add a Box Collider component (Physics 2D) and tick its Is Trigger setting. In its Sprite Renderer component, set the Sorting Layer to Foreground. Create a new Tag: Key, and add this tag to this GameObject.
8. Make two duplicates of GameObject key, moving them to different locations in the scene (so the player can see all three stars and all three keys).

As you can see, we have duplicated and adjusted the visual UI Panel and components of for star carrying inventory to give us a second one for key carrying inventory. Likewise, we have added code to detect collisions with objects tagged Key, and added to the inventory display script to update the UI Panel for keys when notified that a change has occurred in the number of keys being carried.