#5 Create the user interface with Canvas.

IMPORTANT UPDATE

I WILL PUBLISH THE FILES OF THIS PROJECT WHEN THE CHANNEL REACHES 1000 SUBSCRIBERS

…

I LEAVE AN UPDATED BUILD FOR YOU TO TRY, IT MAY TAKE A LITTLE WHILE TO LOAD
ūüĒĽ

MOVEMENT: WASD CAMERA LOOK: MOUSE

FROM HERE THE ORIGINAL ARTICLE CONTINUES

Introduction

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

Before we begin, I invite you to watch the video.

CHECK OUT THIS CRAZY EXPERIMENT

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.

1 Comment
Inline Feedbacks
View all comments
YouTube
Scroll to Top
Secured By miniOrange