As well as scenes where the player plays the game, most games will have menu screens, which display to the user messages about instructions, high scores, the level they have reached so far, and so on. Unity provides the UI Buttons to make it easy to offer users a simple way to indicate their choice of action on such screens.
In this recipe, we'll create a very simple game consisting of two screens, each with a button to load the other one, similar to the following screenshot:
To create a button-navigable multi-scene game, follow these steps:
Main Menu / (page 1)
in a large font size.goto page 2
, as shown here:MenuActions,
containing the following code, and add an instance as a scripted component to the Main Camera:using UnityEngine; using System.Collections; public class MenuActions : MonoBehaviour { public void MENU_ACTION_GotoPage(string sceneName){ Application.LoadLevel(sceneName); } }
page2
(the name of the scene we want to be loaded when this button is clicked) in the text box, below the method's drop-down menu. This page2 string will be passed to the method when the button receives an OnClick event message, as shown here:MenuActions
script class to the Main Camera.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.
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:
Finally, animations can be created for dynamically highlighting a button to the user, for example, a button might get larger when the mouse is over it, and then it might shrink back to its original size when the mouse pointer is moved away. These effects are achieved by choosing the Animation option for the Transition property, and by creating an animation controller with triggers for the Normal, Highlighted, Pressed and Disabled states. To animate a button for enlargement when the mouse is over it (the highlighted state), do the following:
1.2
, 1.2
).The following web pages offer video and web-based tutorials on UI animations:
http://unity3d.com/learn/tutorials/modules/beginner/ui/ui-transitions
http://www.raywenderlich.com/79031/unity-new-gui-tutorial-part-2
18.218.78.102