#5 Create the user interface with Canvas.

1 Comment / Content in English, Making a simple first person game in Unity / By

Updated information about this project

This arti­cle belongs to a series that con­sist on mak­ing a first per­son game about find­ing objects inside a maze. It's one of my very first series from the chan­nel. Now I reworked this project and you can down­load it to import in your own Uni­ty project. Some day I will make a new series about this project, sub­scribe to my chan­nel to see all the fresh con­tent about Blender, Uni­ty and pro­gram­ming.

Follow me on itch.io and download the source code of this project

YOU CAN TRY THIS GAME HERE, IT MAY TAKE A LITTLE WHILE TO LOAD
🔻

MOVEMENT: WASD CAMERA LOOK: MOUSE

Introduction of the old article

In this arti­cle we are going to ana­lyze in detail the video 5 of the labyrinth series, in this video we cre­ate a sim­ple inter­face with the min­i­mum func­tion­al­i­ty so that the user can inter­act with the game.

This arti­cle cov­ers the design of the graph­i­cal inter­face, the pro­gram­ming of the oper­a­tion is done in the fol­low­ing article.

Go to the project's Main Page

Video related to this article

User interface

The user inter­face of our game will allow the play­er to con­fig­ure para­me­ters such as res­o­lu­tion, vol­ume, load and save games, start play­ing, see your score and so on.

In our case we will focus on mak­ing a graph­i­cal inter­face with the min­i­mum func­tion­al­i­ty we need for the project, which is first a "Main Menu" where the game starts and from there we can start the game.

The sec­ond thing we need is a graph­i­cal inter­face that is shown while we are play­ing, for the moment we want to visu­al­ize the countdown.

User interface functionality

What we're going to do is cre­ate a Can­vas type GameOb­ject that is a basic ele­ment in the GUI and then two emp­ty GameOb­jects that will con­tain all the ele­ments of the main menu and the game.

When the game starts the graph­i­cal inter­face of the main menu will be active, which will only show us a but­ton to start the game.

Press­ing the but­ton will turn off the graph­i­cal inter­face of the main menu and turn on the game which shows the remain­ing time to com­plete the mission.

When the game is over, we'll turn off the game's graph­i­cal inter­face and turn on the main menu inter­face again.

This way we don't need a sec­ond sep­a­rate scene for the game and we can solve every­thing in the same scene.

Procedure

Before we start mak­ing the graph­i­cal inter­face we will cre­ate a pre­fab­ri­cat­ed object of the door to be able to repli­cate eas­i­ly. We took the scene as it was at the end of the pre­vi­ous video (fig­ure 1) and elim­i­nat­ed three doors and three points of appearance.

escena de unity 3d con 4 portales y un suelo de cesped, a la derecha la jerarquia de unity 3d
Fig. 1: Esta­do de la esce­na al final del video ante­ri­or. Se bor­ran tres puertas.

We take the point of appear­ance we have left and make it the son of the door.

escena de unity 3d con 1 portal y un suelo de cesped, a la derecha la jerarquia de unity 3d
Fig. 2: The spawn points are also elim­i­nat­ed by leav­ing one.
jerarquia de unity 3d con algunos objetos
Fig. 3: Take the spawn point and make it the child of the door.

Then we take the GameOb­ject Gate from the hier­ar­chy and drag it to the Pre­fabs fold­er of our project, with this we cre­ate a pre­fab that we can place as many times as nec­es­sary in our game.

Ventana Project de Unity 3D en la que se ven algunas carpetas, un skybox y un prefab de una puerta
Fig. 4: Tak­ing the GameOb­ject from the hier­ar­chy we cre­ate a Prefab.
escena de unity 3d con 2 portales y un suelo de cesped, a la derecha la jerarquia de unity 3d
Fig. 5: This allows you to repli­cate the GameOb­ject as many times as you like.

We are going to cre­ate a cam­era that will be ini­tial­ly active for when we show the graph­i­cal inter­face of the main menu.

This cam­era will be turned off when the game starts so that it doesn't con­flict with the cam­era includ­ed in the character's prefab.

jerarquia de unity 3d con algunos objetos, crear camara en unity 3d
Fig. 6: In the hier­ar­chy we cre­ate a cam­era that will be active in the main menu.

User interface design

Now we begin to cre­ate the nec­es­sary ele­ments for the graph­i­cal inter­face. First a Can­vas where the ele­ments will be placed.

crear canvas en unity para hacer una interfaz grafica. jerarquia de unity 3d con algunos objetos, crear objeto vacio en unity 3d
Fig. 7: In the hier­ar­chy we cre­at­ed a GameOb­ject type Can­vas for the user interface.

Como se dijo en la intro­duc­ción, creamos dos Emp­ty GameOb­jects para que con­tengan los ele­men­tos de cada pantalla.

crear empty object en unity para hacer una interfaz grafica. jerarquia de unity 3d con algunos objetos, crear objeto vacio en unity 3d
Fig. 8: In the hier­ar­chy we cre­ate two Emp­ty GameObjects.

Vamos a nom­brar a estos obje­tos "Main­Menu" y "Game" para iden­ti­fi­car­los fácil­mente, como se obser­va en la figu­ra 9.

jerarquia de unity 3d con algunos objetos
Fig. 9: One emp­ty object is called Main Menu and the oth­er Game.

Right-click on the GameOb­ject "Main Menu" to cre­ate a button.

crear botón en unity para hacer una interfaz grafica. jerarquia de unity 3d con algunos objetos, crear objeto vacio en unity 3d
Fig. 10: For the main menu we cre­ate a but­ton to start the game.

To see our graph­i­cal inter­face, in the tab "Game" we will select an aspect ratio 16:9.

selección de la relación de aspecto de la ventana juego en unity 3d para visualizar la interfaz gráfica.
Fig. 11: We adjust the game view to have a 16:9 aspect ratio.

Inside the but­ton we have like son a GameOb­ject type text, we are going to select it to mod­i­fy it in the inspector.

texto de un boton en unity 3d, crear una interfaz grafica. jerarquia de unity 3d con algunos objetos
Fig. 12: Select the GameOb­ject text that is the child of the button.

Type "Start Game" in the text field shown in fig­ure 13 on the right.

inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 13: In the inspec­tor we can con­fig­ure the text of the button.

Using the basic tools we can posi­tion the but­ton on the screen.

ventana partida de unity 3d en una ventana se ve la escena y en la otra el juego, con esto se visualiza la interfaz gráfica.
Fig. 14: Posi­tion the but­ton on the screen.

When enter­ing the game mode we see that the but­ton has an ani­ma­tion when you press it, but of course it still does not per­form any action.

interfaz gráfica simple del juego en unity 3d. botón start Game. escena de juego con un atardecer, suelo de cesped
Fig. 15: When test­ing the game, the but­ton has an ani­ma­tion for the pressed one, but does noth­ing yet.

Let's give the but­ton the name "Start­But­ton" to eas­i­ly iden­ti­fy it in the hierarchy.

jerarquia de unity 3d con algunos objetos
Fig. 16: Rename the but­ton to make it eas­i­er to identify.

The next thing we do is cre­ate a text type GameOb­ject, this time as a child of the "Game" object.

crear texto en unity para hacer una interfaz grafica. jerarquia de unity 3d con algunos objetos, crear objeto vacio en unity 3d
Fig. 17: We cre­at­ed a text type GameOb­ject for the game interface.

In the inspec­tor we write any val­ue with the time for­mat, only to visu­al­ize it on screen. Lat­er we will mod­i­fy the text using C# code.

inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 18: We write a time val­ue in the text. Then we will pro­gram the operation.

In addi­tion to writ­ing the text we can do oth­er actions such as cen­ter, change the size of the font, font type, col­or and so on.

inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 19: Cen­ter the text using the options in the inspector.

We choose a font size that fits the but­ton well. 

inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 20: We mod­i­fy the size.

With the GameOb­ject "Game" select­ed, at the top of the inspec­tor we have a but­ton that allows you to enable and dis­able it (fig­ure 21), this makes it show or not in the graph­i­cal interface.

We will use this prop­er­ty from the C# script to pro­gram the behav­ior of the GUI.

inspector de unity 3d con un empty gameobject seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 21: Using the but­ton at the top of the inspec­tor it is pos­si­ble to dis­able the GameObject.

Adaptation to different screen resolutions

How to make our game look good in any screen res­o­lu­tion is not a minor problem. 

There are sev­er­al ways to approach this issue, for exam­ple we could cre­ate a dif­fer­ent user inter­face for each res­o­lu­tion, then using a c# script we could detect what type of res­o­lu­tion the device has and show the appro­pri­ate graph­i­cal interface.

In this video we use a com­po­nent that is assigned to the Can­vas and is called "Can­vas Scaler", can­vas climber.

This com­po­nent will make the graph­i­cal inter­face big­ger or small­er depend­ing on the screen res­o­lu­tion. For the moment this will help us.

inspector de unity 3d con un gameobject tipo canvas seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 22: Select the GameOb­ject Can­vas in the hier­ar­chy and observe its para­me­ters in the inspector.

Dis­play the "UI Scale Mode" menu which by default is in "Con­stant Pix­el Size" and select the "Scale With Screen Size" option.

inspector de unity 3d con un gameobject tipo canvas seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 23: The UI Scale Mode option selects Scale With Screen Size.

Then we set a ref­er­ence res­o­lu­tion, in my case I'm going to use 1920x1080, as shown in fig­ure 24.

inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 24: Let's set the ref­er­ence res­o­lu­tion to 1920x1080.

We must now adjust all the ele­ments so that they look good for that ref­er­ence resolution.

inspector de unity 3d con un gameobject tipo boton seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 25: It is observed that we must cor­rect the size of the elements.
inspector de unity 3d con un gameobject tipo boton seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 26: Using the Rect Trans­form com­po­nent we adjust the size of the element.

Adjust­ing the can­vas scaler is some­thing that would have been bet­ter to do from the begin­ning, but in this labyrinth series we're show­ing all the ele­ments we count on to make a game in Uni­ty, it didn't make sense to show the can­vas scaler before show­ing the can­vas and its ele­ments first.

inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 27: We adjust the font size to taste.

Once we have adjust­ed the ele­ments to the new ref­er­ence res­o­lu­tion, we can observe the behav­ior of the Can­vas Scaler, select­ing Free Aspect for the aspect ratio, using the drop-down menu we use in fig­ure 1.

Then mak­ing the win­dow wider or nar­row­er we observe in fig­ures 28 and 29 that the but­ton becomes pro­por­tion­al­ly larg­er or smaller.

inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 28: Let's look at the Free Aspect option for the aspect ratio. As in fig­ure 11.
inspector de unity 3d con un gameobject tipo texto seleccionado. Escena de juego con un atardecer, suelo de cesped y un boton que dice start game.
Fig. 29: Chang­ing the width of the win­dow shows that the but­ton changes its size proportionally.

The last thing we do is cre­ate a new res­o­lu­tion for the game win­dow. Full­HD 1920x1080.

This res­o­lu­tion is only for view­ing in the edi­tor, it has noth­ing to do with the res­o­lu­tion that the exe­cutable game will have.

definir una resolucion para la ventana juego de unity 3d para visualizar la interfaz grafica creada para nuestro juego
Fig. 30: We add a res­o­lu­tion of 1920x1080 to have ref­er­ence in the game window.

Conclusion

In this arti­cle we have reviewed the key points to cre­ate a sim­ple graph­i­cal user inter­face, i.e. the min­i­mum nec­es­sary ele­ments that the play­er needs to see to use the game.

The basic ele­ment of the graph­i­cal inter­face in Uni­ty is the Can­vas, inside the oth­er ele­ments will be placed.

The "Can­vas Scaler" pro­vides us with a sim­ple solu­tion for adapt­ing the graph­i­cal inter­face to dif­fer­ent resolutions.

As the project has not yet advanced much, the game still does not have more func­tion­al­i­ty than plac­ing the char­ac­ter on the stage. Lat­er on we'll have to include more ele­ments in the inter­face and prob­a­bly cre­ate more screens.

Related Posts

Programming Paradigms

Basic Programming, Content in English

Introduction In this arti­cle we will look at what a pro­gram­ming par­a­digm is for infor­ma­tion pur­pos­es and give some examples. The first gen­er­a­tions of com­put­ers were pro­grammed using machine lan­guage,…

1 thought on “#5 Create the user interface with Canvas.”

  1. Pingback: { ⊛ #7 Making a simple COUNTDOWN TIMER in C# Unity ⊛ }

Comments are closed.

Scroll to Top
Secured By miniOrange