For this recipe, we have prepared the font that you need in a folder named Fonts in the 1362_01_01 folder.

To display a Hello World text message, follow these steps:

You have added a new Text-hello GameObject to a scene. A parent Canvas and UI EventSystem will also have been automatically created.

You set the text content and presentation properties, and use the Rect Transform anchor presets to ensure that whatever way the screen is resized, the text will stay horizontally and vertically centered.

Here are some more details that you don't want to miss.

For this recipe, we have prepared the font that you need in a folder named Fonts in the 1362_01_01 folder.

To create a digital clock, follow these steps:

You added a Text GameObject to a scene. You have added an instance of the ClockDigital C# script class to that GameObject.

Notice that as well as the standard two C# packages (UnityEngine and System.Collections) that are written by default for every new script, you have added the using statements for two more C# script packages, UnityEngine.UI and System. The UI package is needed, since our code uses UI Text object; and the System package is needed, since it contains the DateTime class that we need to access the clock on the computer where our game is running.

There is one variable, textClock, which will be a reference to the Text component, whose text content we wish to update in each frame with the current time in hours, minutes, and seconds.

The Start() method (executed when the scene begins) sets the textClock variable to be a reference to the Text component in the GameObject, to which our scripted object has been added.

The Update()method is executed in every frame. The current time is stored in the time variable, and strings are created by adding leading zeros to the number values for the hours, minutes, and seconds properties of variable time.

This method finally updates the text property (that is, the letters and numbers that the user sees) to be a string, concatenating the hours, minutes, and seconds with colon separator characters.

The LeadingZero(…)method takes as input an integer and returns a string of this number with leading zeros added to the left, if the value was less than 10.

There are some details that you don't want to miss.

This recipe adapts the previous one. So, make a copy of the project for the previous recipe, and work on this copy.

For this recipe, we have prepared the script that you need in a folder named Scripts in the 1362_01_03 folder.

To create a digital countdown timer, follow these steps:

You added a Text GameObject to a scene. You have added an instance of the DigitalCountdown C# script class to that GameObject.

There is one variable, textClock, which will be a reference to the Text component, whose text content we wish to update in each frame with a time remaining message (or a timer complete message). Then, a call is made to the CountdownTimerReset(…) method, passing an initial value of 30 seconds.

The Start() method (executed when the scene begins) sets the textClock variable to find the Text component in the GameObject where our scripted object has been added.

The Update() method is executed in every frame. This method initially sets the timerMessage variable to a message, stating that the timer has finished (the default message to display). Then the seconds remaining are tested to be greater than zero. And if so, then the message variable has its contents changed to display the integer (whole) number of the seconds remaining in the countdown—retrieved from the CountdownTimerSecondsRemaining() method. This method finally updates the text property (that is, the letters and numbers that the user sees) to be a string with a message about the remaining seconds.

The CountdownTimerReset(…) method records the number of seconds provided, and the time the method was called.

The CountdownTimerSecondsRemaining() method returns an integer value of the number of seconds remaining.

This recipe adapts the first recipe in this chapter, so make a copy of that project to work on for this recipe.

For this recipe, we have prepared the script that you need in a folder named Scripts in the 1362_01_04 folder.

To display a text message that fades away, follow these steps:

An instance of the provided CountdownTimer script class was added as a component to the GameObject Text-hello.

You added to the GameObject Text-hello an instance of the scripted class, FadeAway. The Start()method caches references to the Text and CountdownTimer components in the countdownTimer and textUI variables. Then, it calls the StartFading(…)method, passing in the number 5, so that the message will have faded to invisible after 5 seconds.

The StartFading(…) method starts this timer scripted component to countdown to the given number of seconds. It also sets the fading Boolean flag variable to true.

The Update() method, in each frame, tests if the fading variable is true. If it is true, then the alpha (transparency) component of the color of the Text-hello object is set to a value between 0.0 and 1.0, based on the proportion of the time remaining in the CountdownTimer object. Finally, if the proportion of time remaining is less than a very small value (0.01), then the fading variable is set to false (to save the processing work since the text is now invisible).

For this recipe, we have prepared the fonts that you need in a folder named Fonts, and the text file that you need in a folder named Text, in the 1362_01_04 folder.

To display perspective 3D text, follow these steps:

You have simulated the opening screen of the movie Star Wars, with a flat UI Text object title at the top of the screen, and 3D Text Mesh with settings that appear to be disappearing into the horizon with 3D perspective 'squashing'.

There are some details that you don't want to miss.

using UnityEngine;
using System.Collections;

public class ScrollZ : MonoBehaviour {
  public float scrollSpeed = 20;

  void Update () {
    Vector3 pos = transform.position;
    Vector3 localVectorUp = transform.TransformDirection(0,1,0);
    pos += localVectorUp * scrollSpeed * Time.deltaTime;
    transform.position = pos;
  }
}

For this recipe, we have prepared the image that you need in a folder named Images in the 1362_01_06 folder.

To display a stretched image, follow these steps:

You have ensured that an image has Texture Type set to Texture. You added a UI RawImage control to the scene. The RawImage control has been made to display the unity5_learn image file.

The image has been positioned at the top of the Game panel, and using the anchor and pivot presets, it has made the image stretch to fill the whole width, which we set to 400 pixels via the Player settings.

There are some details that you don't want to miss:

Working with Sprites and UI Image components

If you simply wish to display non-animated images, then Texture images and UI RawImage controls are the way to go. However, if you want more options on how an image should be displayed (such as tiling, and animation), then the UI Sprite control should be used instead. This control needs image files to be imported as the Sprite (2D and UI) type.

Once an image file has been dragged into the UI Image control's Sprite property, additional properties will be available, such as Image Type, options to preserve aspect ratio, and so on.

An example of tiling a Sprite image can be found in the Revealing icons for multiple object pickups by changing the size of a tiled image recipe in Chapter 2, Inventory GUIs.

To create a button-navigable multi-scene game, follow these steps:

You have created two scenes, and added both of them to the game build. Each scene has a button, which when clicked (when the game is playing), makes Unity load the (named) other scene. This is made possible because when each button is clicked, it runs the MENU_ACTION_GotoPage(…)method from the scripted MenuActions component inside the Main Camera. This method inputs a text string of the name of the scene to be loaded, so that the button in the page1 scene gives the string name of page2 as the scene to be loaded, and vice versa.

When a UI Button is added to the Hierarchy panel, a child UI Text object is also automatically created, and the content of the Text property of this UI Text child is the text that the user sees on the button.

There are some details that you don't want to miss.

Visual animation for the button mouse-over

There are several ways in which we can visually inform the user that the button is interactive when they move their mouse cursor over it. The simplest is to add a color tint that will appear when the mouse is over the button—this is the default Transition. With the Button selected in the Hierarchy, choose a tint color (for example, red), for the Highlighted Color property of the Button (Script) component, in the Inspector tab, as shown here:

Another form of visual Transition to inform the user of an active button is Sprite Swap. In this case, properties for different images for Targeted/Highlighted/Pressed/Disabled are available in the Inspector tab. The default Targeted Graphic is the built-in Unity Button (image) – this is the grey rounded rectangle default when GameObjects buttons are created. Dragging in a very different-looking image for the Highlighted Sprite is an effective alternative to set a color hint. We have provided a rainbow.png image with the project for this recipe that can be used for the Button mouse over Highlighted Sprite. The following screenshot shows the button with this rainbow background image:

For this recipe, we have prepared the images that you need in a folder named Images in the 1362_01_08 folder.

To create the UI Panels whose layering can be changed by the user-clicking buttons, follow these steps:

You've created two UI Panels, each panel containing an image of a playing card and a button whose action will make its parent panel move to the front. The button's action illustrates how the OnClick function does not have to be the calling of a public method of a scripted component of an object, but it can be sending a message to one of the components of the targeted GameObject—in this instance we send the SetAsLastSibling message to the RectTransform of the Panel in which the Button is located.

There are some details that you don't want to miss.

To create a UI Slider and display its value on the screen, follow these steps:

You have added to the Text GameObject a scripted instance of the SliderValueToText class.

The Start() method, which is executed when the scene first runs, sets the variable to be a reference to the Text component inside the Slider item. Next, the ShowSliderValue() method is called, so that the display is correct when the scene begins (the initial slider value is displayed).

This contains the ShowSliderValue() method, which gets the value of the slider. It updates the text displayed to be a message in the form: Slider value = <n>.

You created a UI Slider GameObject, and set it to be whole numbers in the 0-20 range.

You added to the UI Slider GameObject's list of On Value Changed event listeners the ShowSliderValue() method of the SliderValueToText scripted component. So, each time the slider value changes, it sends a message to call the ShowSliderValue() method, and so the new value is updated on the screen.