- Unity 2018 Cookbook(Third Edition)
- Matt Smith
- 470字
- 2025-02-23 18:56:38
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 Simple2Dgame_SpaceGirl mini-game.
- Create C# Script class PlayerInventory in the _Scripts folder:
using UnityEngine; public class PlayerInventory : MonoBehaviour { private PlayerInventoryDisplay playerInventoryDisplay; private int totalStars = 0; void Awake() { playerInventoryDisplay = GetComponent<PlayerInventoryDisplay>(); } void Start() { playerInventoryDisplay.OnChangeStarTotal(totalStars); } void OnTriggerEnter2D(Collider2D hit) { if (hit.CompareTag("Star")) { totalStars++; playerInventoryDisplay.OnChangeCarryingStar(totalStars); Destroy(hit.gameObject); } } }
- Select the GameObject star in the Hierarchy panel and make three more copies of this GameObject. There are now four star GameObjects in the scene. Move these new star GameObjects to different parts of the screen.
- Add the following C# Script 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; } } }
- Select the Canvas in the Hierarchy panel and add a new UI Image object (Create | UI | Image). Rename it Image-star0.
- Select Image-star0 in the Hierarchy panel.
- From the Project panel, drag the sprite icon_star_grey_100 (in the Sprites folder) into the Source Image field in the Inspector for the Image (Script) component.
- Click on the Set Native Size button for this for the Image (Script) 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-left of the Game panel. Edit the UI Image's Rect Transform component, and while holding down Shift + 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-star0 in the Hierarchy panel, naming them Image-star1, Image-star2, and Image-star3.
- In the Inspector panel, change the Pos X position (in the Rect Transform component) of Image-star1 to 100, of Image-star2 to 200, and of Image-star3 to 300:

- In the Hierarchy, select the GameObject player-SpaceGirl. Then, from the Inspector, access the Player Inventory Display (Script) component and set the Size property of the public field Star Placeholders to 4.
- Next, populate the Element 0/1/2/3 array values of public field Star Placeholders 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_100 and icon_star_grey_100, as shown in the screenshot:

- Now, when you play the scene, you should see the sequence of four gray placeholder star icons initially, and each time you collide with a star, the next icon at the top should turn yellow.