Game design: UI design

UI design

This UI is was designed in week 4 of the module, as this UI is not linking with the game, I can't show the connection of our finial work, but all buttons are fully functioning.





Before I start making the UI main page, I had design a terrain for my background environment. To start making a UI, we need to create a Canvas from the UI package. Although Canvas is outside the terrain, but when we start the game, all the things in the canvas square will show in the main camera. This tool is very useful to help user to design their UI background.



Beside Canvas, I had also use two tools in the UI package to help me to design: they are Button and Text.

  
(Left: List of text, Right: List of button)

Text is used for inputting words in the UI, for example in my UI: Behind and other words in button.

Button can create Button into Canvas, as it create, it available to press it (although nothing happen).



For my UI, I had create two Canvas, They are MainCanvas and SupportCanvas. If I want I can create another Canvas call HowtoplayCanvas for the tutorial guide. But our has not discuss what to do in that page in that process, so we ignore it. To let Buttons working, we need coding to create their functions.



This is the coding script for my UI. As it show, I have use the function call Awake(), this function has the higher working order, so when the code start work, the SupportCanvas in the screen will be disappear.

In the script, I had design three buttons functions, they are SupportOn, RetunOn and LoadOn. These functions can help us the build connection between each canvas or game with buttons.

SupportOn and ReturnOn is use for controlling the on/off of the MainCanvas and SupportCanvas, false mean off and true mean on.

In LoadOn, I had use a function call Application.Loadlevel(1). As my design, I have order the main menu in level 0 and the game in level 1, so when we press the Play button, it will teleport from the menu to the game.

Because I forgot to add the function of quit button function, I will input the coding under here:

public vaid QuitON()
{
        Application.Quit()
}

Application.Quit() is a function for ending the game.



This is the setting list for the play buttons. To let buttons work, first we need to pull the script to the main camera and connect 2 Canvas. After that choose what function I want to use with each button. For example in the play button list, I have select the function of loadOn, so it can connect the menu scene and the game scene when we press the button.

The photos below are the main menu and the support menu of the finial work.







File of the work:

https://drive.google.com/open?id=0BzSNMm0FgMOLMEc3NEJkNkx6V28

留言