Another approach that could be taken to show increasing numbers of images is to make use of tiled images. The same visual effect as in the previous recipe can also be achieved by making use of a tiled grey star image of width 400 (showing four copies of the grey star icon), behind a tiled yellow star image, whose width is 100 times the number of stars collected. We'll adapt the previous recipe to illustrate this technique.
To display grey and yellow star icons for multiple object pickups using tiled images, follow these steps:
- Make a copy of your work for the previous recipe.
- In the Hierarchy panel, remove the four Image-star0/1/2/3 UI Images in the Canvas.
- Select the Canvas in the Hierarchy panel and add a new UI Image object (Create | UI | Image). Rename it
Image-stars-grey. - Select
Image-stars-greyin the Hierarchy panel. - From the Project panel, drag sprite
icon_star_grey_100(folderSprites) into the Source Image field in the Inspector (in the Image (Script) 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 star_empty_icon.
- 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.
- In the Inspector panel, change the Width (in the Rect Transform component) of
Image-stars-greyto 400. Also, set the Image Type (in the Image (Script) component) to Tiled, as shown in the following screenshot:
- Make a copy of
Image-stars-greyin the Hierarchy panel, naming the copyImage-stars-yellow. - With
Image-stars-yellowselected in Hierarchy panel, from the Project panel, drag the spriteicon_star_100(folderSprites) into the Source Image field in the Inspector (in the Image (Script) component). - Set the width of
Image-stars-yellowto 0 (in the Rect Transform component). So, now we have the yellow stars tiled image above the grey tiled image, but since its width is zero, we don't see any of the yellow stars yet. - Replace the existing C# Script
PlayerInventoryDisplaywith the following code:using UnityEngine; using System.Collections; using UnityEngine.UI; public class PlayerInventoryDisplay : MonoBehaviour { public Image iconStarsYellow; public void OnChangeStarTotal(int starTotal){ float newWidth = 100 * starTotal; iconStarsYellow.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, newWidth); } } - From the Hierarchy view, select the GameObject
player-SpaceGirl. Then, from the Inspector, access the Player Inventory Display (Script) component and populate the Icons Stars Yellow public field with UI Image objectImage-stars-yellow.
UI Image Image-stars-grey is a tiled image, wide enough (400px) for grey sprite icon_star_grey_100 to be shown four times. UI Image Image-stars-yellow is a tiled image, above the grey one, initially with width set to zero, so no yellow stars can be seen.
Each time a star is picked up, a call is made to the OnChangeStarTotal(…)method of the script class PlayerInventoryDisplay , passing the new integer number of stars collected. By multiplying this by the width of the yellow sprite image (100px), we get the correct width to set for UI Image Image-stars-yellow so that the corresponding number of yellow stars will now be seen by the user. Any stars that remain to be collected will still be seen as the grey stars that are not yet covered up.
The actual task of changing the width of UI Image Image-stars-yellow is completed by calling the SetSizeWithCurrentAnchors(…) method. The first parameter is the axis, so we pass constant RectTransform.Axis.Horizontal so that it will be the width that is changed. The second parameter is the new size for that axis—so we pass a value that is 100 times the number of stars collected so far (variable newWidth).