GUI is a very important component of a game. Unity provides two functionalites called GUIText and GUITexture for 2D text and textures respectively, which are used to dis-play the texts or textures on the screen when the run button is clicked. For example, Fugu Maze on the iPhone has a GUITexture representing a move-forward button on the lower-left portion of the screen. [11, 130.]
To design UnityGUI text, the concept of cascading style sheets (CSS) must be under-standed, because it is patterned. The designer can define colours and fonts for a par-ticular style by setting GUISkin. In GUISkin property, every GUI element must inherit its properties. This makes for a consistent look and feel throughout. Also the GUI ele-ments refer to 3D objects can be treated differently.
The default font in the operating system is used firstly in Unity. Fortunately the designer can use any other font which he or she provides. It makes the file size smaller by using the default font. However there would be a small risk that the text could appear varia-tion on different systems. For this game, the font Arial is set which is shown in Figure 24.
The Arial font in the Inspector Figure 24.
When using a font in most 3D engines for 2D text, a bitmap of the full alphabet and characters is generated for each font and size specified. When the designers specify Dynamic in Unity, the bitmap generated by the operating system is used, saving down-load time and texture memory during runtime. The downside is that if the designers
specify a font that is not present on the operating system, a fallback font will be used in its place. Even when using generic fonts such as Arial, there may be slight differences among systems. I will investigate this further when we experiment with different fonts later on in the project. Dynamic fonts are currently supported only on desktop platforms (i.e., Mac and Windows). [6, 459.]
In the game, the 2D GUI was made. The assets contain one background picture, one background picture with help information, a few textures with guide text and back-ground music. A new scene must be created firstly. And then the Main Camera object and Music object were created. The position of Main Camera did not need to adjust, because the imagery just is required. In the script, few variables must be defined and initialized to be called in late. These values of these variables were normally initialized with textures in “Inspector” window. The initialized variables are shown in Figure 25.
The initialized variables in Script_Menu Figure 25.
There were three background pictures to be used in the GUI, and an audio source was added to the GUI. The variable which initialized with GUISkin must be defined with
“public GUISkin” in the script. In Unity, there are two types of GUI elements. Of the objects that can be created through the GameObject menu, the designers have already used the GUI Texture. The GameObject varieties of text and texture objects are han-dled individually and exist in the game hierarchy. They are not affected by the GUI Skin specifications. The second type of GUI elements, Unity GUI, must be scripted to exist.
If the designers are a bit more comfortable with scripting, they will be using the Unity GUI to create and handle text and to eventually convert the cursor. The Unity GUI con-sists of a GUI Skin and GUI Styles.
Firstly, a new GUISkin asset must be created according to clicking the “Create” button in the “Project” window, and then pick it, the information is shown in the “Inspector”
window. The “Custom Styles” option has to be found, which is very important to help the designers to set their own GUI. The designer must know how many GUI buttons he
or she wants to make clearly. Finally the designer has to enter the number for the size parameter and set his or her own GUI buttons. Figure 26 shows the result.
The Custom Styles of GUISkin in the game Figure 26.
There are seven GUI buttons in the game. Every button obtains its own background picture which was designed for it specially. The names must be made reasonably, be-cause they will be called in the script. It is should note that before the designers exper-iment with different textures in the GUISkin, they should know that if the texture does not show up in the asset browser, they would not be able to get it back without creating a new GUISkin.
For showing GUI on the screen, the function OnGUI must be used in the script. The OnGUI function is similar to the Update function in that it is called at least every frame and that is where the code is must be to create the GUI controls. There were four func-tional buttons required to be implemented. They were Start, Option, Help and Exit. The Start button can start the game when the player clicks it. The Option button obtains two functions: music on and music off. The player can choose if the background music is on or off. The Help button indicates the information of operating ways and the author.
The Exit button is used to exit the game. Thus the four functions must be made in the script, and they must be called in the OnGUI function. Listing 9 shows how the func-tions were called.
Listing 9. The code of the OnGUI function in Script_Menu
The player can activate the function which he or she wants to click. We can see the function “RenderMainMenu” in Listing 9. This function is made to rendering the main menu of the game start. The whole outline of the GUI is designed and made in this function. If the designers are not planning on limiting the screen resolution, the user will be able to choose a resolution at run-time. If they remember that GUI elements retain their pixel size regardless of screen resolution, it becomes clear that they need access to the screen size in order to centre the text messages. Fortunately, they can use Screen.width, Screen.height, and a bit of math inside the command to get what they want. Listing 10 shows the code how the main menu is rendered.
Listing 10. The code of RenderMainMenu function in Script_Menu
In the previous section, the function “new Rect” was used to set the position, height and width of the texture. The function “GUI.Button” is similar to the function
“GUI.DrawTexture”. However the last parameter of the function “GUI.DrawTexture” is using the texture immediately, and here the Custom Styles which were set in “GUISkin”
are using in the “GUI.Button” function. Another special function is Application.loadLevel.
This function is used to load another game scene. It is the secret that when the player clicks the Start button, then the game is running.
In the previous paragraphs, almost all functions which were used in the script were listed and explained. The key points are the calls of the textures and outline of the GUI.
The next the effect is shown in Figure 27.
The GUI of the game start in the game Figure 27.
The process which is to design the GUI requires more patience. The textures and pic-tures require collecting and designing to be necessary. However it offers the sense of achievement to the designers.
In this section, the Unity GUI was introduced as a means of adding 2D text on screen to display mouseover and message text. I discovered the GUISkin, which provides a way of creating GUI elements with a consistent look and feel, and later, the GUIStyle, which is a means of overriding the skin in particular places. I experimented with the parameters for the GUI controls, and found that they could make label controls look like box controls while still acting like labels. After I learned that the GUI elements exist only through scripting, I found that “Rect” parameters define the position and region a con-trol will occupy. I would find more fun designing a game or a brilliant GUI.