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).
This recipe assumes that you are starting with the project Simple2Dgame_SpaceGirl
setup from the first recipe in this chapter.
To display multiple inventory icons for multiple pickups of same type of object, follow these steps:
Simple2Dgame_SpaceGirl
.Player
to GameObject player-SpaceGirl
in 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); } } }
star
in the Hierarchy panel and make three more copies of this GameObject (Windows CTRL + D / Mac CMD + D).PlayerInventoryDisplay
to the GameObject player-SpaceGirl
in 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; } } }
Image-star0
.Image-star0
in the Hierarchy panel.icon_star_grey_100
(folder Sprites
) into the Source Image field in the Inspector for the Image component.icon_star_grey_100
.Image-star0
in the Hierarchy panel, naming them Image-star1
, Image-star2
, and Image-star3
.Image-star1
to 100
, of Image-star2
to 200
, and of Image-star3
to 100
, as shown in the following screenshot:player-SpaceGirl
. Then, from the Inspector, access the Player Inventory Display (Script) component and set the Size property of public field Star Playholders to 4
.Image-star0/1/2/3
.icon_star_100
and icon_star_grey_100
, as shown in the following screenshot: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
.
18.191.97.85