Displaying multiple pickups of the same object with multiple status icons
If there is a small, fixed total number of an item to be collected rather than text totals, an alternative effective UI approach is to display placeholder icons (empty or greyed out pictures) to show the user how many of the item remain to be collected, and each time an item is picked up, a placeholder icon is replaced by a full color collected icon.
In this recipe, we use grey-filled star icons as the placeholders and yellow-filled star icons to indicate each collected star, as shown in the following screenshot.
Since our UI code is getting a little more complicated, this recipe will implement the MVC design pattern to separate the view code from the core player logic (as introduced at the end of recipe Displaying single object pickups with carrying and not-carrying text).
Getting ready
This recipe assumes that you are starting with the project Simple2Dgame_SpaceGirl setup from the first recipe in this chapter.
How to do it...
To display multiple inventory icons for multiple pickups of same type of object, follow these steps:
- Start with a new copy of the mini-game
Simple2Dgame_SpaceGirl. - Add the following C# Script
Playerto GameObjectplayer-SpaceGirlin the Hierarchy:using UnityEngine; using System.Collections; using UnityEngine.UI; public class Player : MonoBehaviour { private PlayerInventoryDisplay playerInventoryDisplay; private int totalStars = 0; void Start(){ playerInventoryDisplay = GetComponent<PlayerInventoryDisplay>(); } void OnTriggerEnter2D(Collider2D hit){ if(hit.CompareTag("Star")){ totalStars++; playerInventoryDisplay.OnChangeStarTotal(totalStars); Destroy(hit.gameObject); } } } - Select GameObject
starin the Hierarchy panel and make three more copies of this GameObject (Windows CTRL + D / Mac CMD + D). - Move these new GameObject to different parts of the screen.
- Add the following C# Script
PlayerInventoryDisplayto the GameObjectplayer-SpaceGirlin the Hierarchy:using UnityEngine; using System.Collections; using UnityEngine.UI; public class PlayerInventoryDisplay : MonoBehaviour { public Image[] starPlaceholders; public Sprite iconStarYellow; public Sprite iconStarGrey; public void OnChangeStarTotal(int starTotal){ for (int i = 0;i < starPlaceholders.Length; ++i){ if (i < starTotal) starPlaceholders[i].sprite = iconStarYellow; else starPlaceholders[i].sprite = iconStarGrey; } } } - Select the Canvas in the Hierarchy panel and add a new UI Image object (Create | UI | Image). Rename it
Image-star0. - Select
Image-star0in the Hierarchy panel. - From the Project panel, drag the sprite
icon_star_grey_100(folderSprites) into the Source Image field in the Inspector for the Image component. - Click on the Set Native Size button for this for the Image component. This will resize the UI Image to fit the physical pixel width and height of sprite file
icon_star_grey_100. - Now we will position our icon at the top and left of the Game panel. Edit the UI Image's Rect Transform component, and while holding down SHIFT and ALT (to set pivot and position), choose the top-left box. The UI Image should now be positioned at the top left of the Game panel.
- Make three more copies of
Image-star0in the Hierarchy panel, naming themImage-star1,Image-star2, andImage-star3. - In the Inspector panel, change the Pos X position (in the Rect Transform component) of
Image-star1to100, ofImage-star2to200, and ofImage-star3to100, as shown in the following screenshot:
- From the Hierarchy view, select the GameObject
player-SpaceGirl. Then, from the Inspector, access the Player Inventory Display (Script) component and set the Size property of public field Star Playholders to4. - Next, populate the Element 0/1/2/3 array values of public field Star Playholders with UI Image objects
Image-star0/1/2/3. - Now, populate the Icon Star Yellow and Icon Star Grey public fields from the Project panel with sprite
icon_star_100andicon_star_grey_100, as shown in the following screenshot:
- Now, when you play the scene, you should see the sequence of four grey placeholder star icons initially, and each time you collide with a star, the next icon at the top should turn yellow.
How it works...
Four UI Image objects Image-star0/1/2/3 have been created at the top of the screen, initialized with the grey placeholder icon. The grey and yellow icon sprite files have been resized to be 100 x 100 pixels, making their arrangement horizontal positioning at design time easier, since their positions are (0,0), (100, 0), (200, 0), and (300,0). In a more complicated game screen, or one where real estate is precious, the actual size of the icons would probably be smaller and whatever the game graphic designer decides.
The int variable totalStars represents how many stars have been collected so far; it is initialized to zero. The PlayerInventoryDisplay variable playerInventory is a reference to the scripted component that manages our inventory display—this variable is set when the scene begins to run in the Start() method.
In the OnTriggerEnter2D()method, the totalStars counter is incremented by 1 each time the player's character hits an object tagged Star. As well as destroying the hit GameObject, the OnChangeStarTotal(…) method of the PlayerInventoryDisplay component is called, passing the new star total integer.
The OnChangeStarTotal(…)method of script class PlayerInventoryDisplay has references to the four UI Images, and loops through each item in the array of Image references, setting the given number of Images to yellow, and the remaining to grey. This method is public, allowing it to be called from an instance of script class Player.
As can be seen, the code in script class Player is still quite straightforward since we have moved all of the inventory UI logic to its own class, PlayerInventory.