Adding the cherry UI components

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:

  1. Download the Cherries.png file from the publisher's website
  2. Drag that image into the Assets | Cherry folder in the Project panel
  3. Select the imported image and, in the Inspector panel, change the Texture Type to Sprite (2D and UI)

 

  1. In the Hierarchy panel, right-click the HUD_Canvas and select UI | Image
  2. In the Inspector panel, click the small circle to the right of the setting under Image (Script) | Source Image
  3. Select the Cherries.png image you added in step 2
  4. In the Inspector panel, rename this as Cherries
  5. Click  Rect Transform | Scale and change the scale of Cherries to 0.4 for x, y, and z
  6. 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:

  1. Right-click the HUD_Canvas GameObject in the Hierarchy panel and select UIText.
  2. Rename the text component as Cherries_Count.
  3. In the Inspector panel, change the Text value of the Text (Script) component to 0000. This will help us determine the layout.
  4. 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.
  5. 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.
  6. 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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset