In this section, we will add an image of cherries and a text object for displaying the number of cherries the Cucumber Man has.
We will start by adding the cherry image:
- Download the Cherries.png file from the publisher's website
- Drag that image into the Assets | Cherry folder in the Project panel
- Select the imported image and, in the Inspector panel, change the Texture Type to Sprite (2D and UI)
- In the Hierarchy panel, right-click the HUD_Canvas and select UI | Image
- In the Inspector panel, click the small circle to the right of the setting under Image (Script) | Source Image
- Select the Cherries.png image you added in step 2
- In the Inspector panel, rename this as Cherries
- Click Rect Transform | Scale and change the scale of Cherries to 0.4 for x, y, and z
- In the Scene view, reposition the Cherries image directly below the start of the Score_Value text object
Next, we will add the text object to hold the cherry count:
- Right-click the HUD_Canvas GameObject in the Hierarchy panel and select UI | Text.
- Rename the text component as Cherries_Count.
- In the Inspector panel, change the Text value of the Text (Script) component to 0000. This will help us determine the layout.
- In the Text (Script) component, change the Font Style to Bold, the Font Size to 16, and the Color to Red, or select other settings to your liking.
- Either in the Inspector panel or in the Scene view, resize the rectangle encasing your Cherries_Count UI text component so that there is no excessive blank space above, below, or to the right of the text.
- In the Scene view, reposition the Cherry_Count text object to the right of the Cherries image object.
Your finished work should look similar to the following screenshot from the game view:
Make any necessary adjustments before moving on to the next section.