#5 Crear una interfaz gráfica para el usuario. [Laberinto en Primera Persona]

ACTUALIZACIÓN IMPORTANTE

PUBLICARÉ LOS ARCHIVOS DE ESTE PROYECTO CUANDO EL CANAL LLEGUE A 1000 SUSCRIPTORES

DEJO UNA COMPILACIÓN ACTUALIZADA PARA QUE PUEDAS PROBAR, PUEDE QUE TARDE UN POQUITO EN CARGAR
🔻

MOVIMIENTO: WASD CÁMARA: MOUSE

A PARTIR DE AQUÍ CONTINÚA EL ARTÍCULO ORIGINAL

Introducción

En este artícu­lo creamos una inter­faz grá­fi­ca sim­ple con la fun­cional­i­dad mín­i­ma para que el usuario pue­da con­tro­lar el comien­zo del juego. Aquí sola­mente ver­e­mos el arma­do de la inter­faz grá­fi­ca, la pro­gra­mación del fun­cionamien­to se hace en el sigu­iente artícu­lo de la serie.

MIRA ESTE DESCABELLADO EXPERIMENTO

Página principal del proyecto

Este artícu­lo está basa­do en el sigu­iente video en el que se hace el dis­eño de la inter­faz gráfica.

Descripción del objetivo

La inter­faz grá­fi­ca de nue­stro juego le per­mi­tirá al jugador con­fig­u­rar parámet­ros como res­olu­ción, vol­u­men, car­gar y guardar par­tidas, comen­zar a jugar, ver su pun­tuación y demás.

En nue­stro caso nos vamos a enfo­car en hac­er una inter­faz grá­fi­ca con la fun­cional­i­dad mín­i­ma que nece­si­ta­mos para el proyec­to, que es en primer lugar un "Menú prin­ci­pal" en el que ini­cie el juego y des­de ahí podamos comen­zar la partida.

Lo segun­do que nece­si­ta­mos es una inter­faz grá­fi­ca que se muestre mien­tras esta­mos jugan­do, por el momen­to quer­e­mos visu­alizar la cuen­ta regresiva.

Funcionalidad de la interfaz gráfica

Lo que vamos a hac­er es crear un GameOb­ject tipo Can­vas que es un ele­men­to bási­co en la inter­faz grá­fi­ca y luego dos emp­ty GameOb­jects que con­tendrán todos los ele­men­tos de del menú prin­ci­pal y del juego.

Cuan­do el juego comience estará acti­va la inter­faz grá­fi­ca del menú prin­ci­pal, que solo nos mostrará un botón para comen­zar el juego.

Al pul­sar el botón hare­mos que se apague la inter­faz grá­fi­ca del menú prin­ci­pal y se encien­da la del juego la cual mues­tra el tiem­po restante para com­ple­tar la misión.

Cuan­do el juego final­ice, apa­gare­mos la inter­faz grá­fi­ca del juego y volver­e­mos a encen­der la del menú principal.

De esta for­ma no nece­si­ta­mos una segun­da esce­na sep­a­ra­da para el juego y podemos resolver todo en una mis­ma escena.

Procedimiento

Antes de empezar a hac­er la inter­faz grá­fi­ca vamos a crear un obje­to pre­fab­ri­ca­do de la puer­ta para poder replicar fácil­mente. Tomamos la esce­na como quedó al final del video ante­ri­or (figu­ra 1) y elim­i­namos tres puer­tas y tres pun­tos de aparición.

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.

Tomamos el pun­to de apari­ción que nos quedó y lo hace­mos hijo de la puerta.

escena de unity 3d con 1 portal y un suelo de cesped, a la derecha la jerarquia de unity 3d
Fig. 2: Tam­bi­en se elim­i­nan los pun­tos de apari­ción dejan­do uno.
jerarquia de unity 3d con algunos objetos
Fig. 3: Se toma el pun­to de apari­ción y se lo hace hijo de la puerta.

Luego tomamos el GameOb­ject Gate de la jer­ar­quía y lo arras­tramos hacia la car­pe­ta Pre­fabs de nue­stro proyec­to, con esto creamos un pre­fab que podemos colo­car cuan­tas veces sea nece­sario en nue­stro juego.

Ventana Project de Unity 3D en la que se ven algunas carpetas, un skybox y un prefab de una puerta
Fig. 4: Toman­do el GameOb­ject de la jer­ar­quía creamos un Prefab.
escena de unity 3d con 2 portales y un suelo de cesped, a la derecha la jerarquia de unity 3d
Fig. 5: Esto per­mite replicar el GameOb­ject tan­tas veces como se quiera.

Vamos a crear una cámara que estará ini­cial­mente acti­va para cuan­do mostremos la inter­faz grá­fi­ca del menú principal.

Esta cámara la apa­gare­mos en el momen­to de ini­ciar el juego para que no entre en con­flic­to con la cámara que viene inclu­i­da en el pre­fab del personaje.

jerarquia de unity 3d con algunos objetos, crear camara en unity 3d
Fig. 6: En la jer­ar­quía creamos una cama­ra que estará acti­va en el menú principal.

Diseño de la interfaz gráfica

Aho­ra comen­zamos a crear los ele­men­tos nece­sar­ios para la inter­faz grá­fi­ca. En primer lugar un Can­vas o "Lien­zo" donde se colo­carán los elementos.

crear canvas en unity para hacer una interfaz grafica. jerarquia de unity 3d con algunos objetos, crear objeto vacio en unity 3d
Fig. 7: En la jer­ar­quía creamos un GameOb­ject tipo Can­vas para la inter­faz de usuario.

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: En la jer­ar­quía creamos dos 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: Un emp­ty object se lla­ma Main Menu y el otro Game.

Hacien­do clic dere­cho en el GameOb­ject "MenuPrin­ci­pal" creamos un botón.

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: Para el menú prin­ci­pal creamos un botón para comen­zar el juego.

Para obser­var nues­tra inter­faz grá­fi­ca, en la pes­taña "Game" vamos a selec­cionar una relación de aspec­to 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: Ajus­ta­mos la vista del juego para que ten­ga una relación de aspec­to de 16:9.

Den­tro del botón ten­emos como hijo un GameOb­ject tipo tex­to, vamos a selec­cionarlo para mod­i­fi­car­lo en el inspector.

texto de un boton en unity 3d, crear una interfaz grafica. jerarquia de unity 3d con algunos objetos
Fig. 12: Selec­cionamos el GameOb­ject text que es hijo del botón.

Escribi­mos "Start Game" en el cam­po text que se obser­va en la figu­ra 13 a la derecha.

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: En el inspec­tor podemos con­fig­u­rar el tex­to del botón.

Uti­lizan­do las her­ramien­tas bási­cas podemos posi­cionar el botón en la pantalla.

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­cionamos el botón en la pantalla.

Al entrar en el modo juego vemos que el botón tiene una ani­mación al pul­sar­lo, pero por supuesto aún no real­iza ningu­na acción.

interfaz gráfica simple del juego en unity 3d. botón start Game. escena de juego con un atardecer, suelo de cesped
Fig. 15: Al pro­bar el juego el botón tiene una ani­mación para el pul­sa­do pero aún no hace nada.

Vamos a dar­le al botón el nom­bre "Start­But­ton" para iden­ti­fi­car­lo fácil­mente en la jerarquía.

jerarquia de unity 3d con algunos objetos
Fig. 16: Renom­bramos el botón para que sea más fácil de identificar.

Lo sigu­iente que hace­mos es crear un GameOb­ject tipo tex­to, esta vez como hijo del obje­to "Game".

crear texto en unity para hacer una interfaz grafica. jerarquia de unity 3d con algunos objetos, crear objeto vacio en unity 3d
Fig. 17: Creamos un GameOb­ject tipo tex­to para la inter­faz del juego.

En el inspec­tor escribi­mos cualquier val­or con el for­ma­to de tiem­po, solo para visu­alizar­lo en pan­talla. Pos­te­ri­or­mente mod­i­fi­care­mos el tex­to uti­lizan­do códi­go de C#.

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: Escribi­mos un val­or de tiem­po en el tex­to. Pos­te­ri­or­mente pro­gra­mare­mos el funcionamiento.

Ade­mas de escribir el tex­to podemos hac­er otras acciones como cen­trar, mod­i­ficar el tamaño de la letra, el tipo de fuente, col­or y demás.

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­tramos el tex­to uti­lizan­do las opciones en el inspector.

Elegi­mos un tamaño de fuente que se ajuste bien al botón. 

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: Mod­i­fi­camos el tamaño.

Con el GameOb­ject "Game" selec­ciona­do, en la parte supe­ri­or del inspec­tor ten­emos un botón que per­mite habil­i­tar­lo y desha­bil­i­tar­lo (figu­ra 21), esto hace que se muestre o no en la inter­faz gráfica.

Usare­mos esta propiedad des­de el script de C# para pro­gra­mar el com­por­tamien­to de la inter­faz gráfica.

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: Uti­lizan­do el botón de la parte supe­ri­or del inspec­tor es posi­ble desha­bil­i­tar el GameObject.

Adaptación a distintas resoluciones de pantalla

Cómo lograr que nue­stro juego se vea bien en cualquier res­olu­ción de pan­talla no es un prob­le­ma menor. 

Hay varias for­mas de encar­ar este tema, por ejem­p­lo podríamos crear una inter­faz de usuario dis­tin­ta para cada res­olu­ción, luego uti­lizan­do un script de c# podríamos detec­tar qué tipo de res­olu­ción tiene el dis­pos­i­ti­vo y mostrar la inter­faz grá­fi­ca apropiada.

En este video usamos un com­po­nente que trae asig­na­do el Can­vas y que se lla­ma "Can­vas Scaler", escal­ador de lienzo.

Este com­po­nente hará más grande o más chi­ca la inter­faz grá­fi­ca en fun­ción de la res­olu­ción de pan­talla. Por el momen­to esto nos servirá.

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: Selec­cionamos el GameOb­ject Can­vas en la jer­ar­quía y obser­va­mos sus parámet­ros en el inspector.

Despleg­amos el menú "UI Scale Mode" que por defec­to está en "Con­stant Pix­el Size" y selec­cionamos la opción "Scale With Screen Size".

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: En la opción UI Scale Mode se selec­ciona Scale With Screen Size.

Luego colo­camos una res­olu­ción de ref­er­en­cia, en mi caso voy a usar 1920x1080, como se obser­va en la figu­ra 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: Seteamos la res­olu­ción de ref­er­en­cia en 1920x1080.

Aho­ra debe­mos ajus­tar todos los ele­men­tos para que se vean bien para esa res­olu­ción de referencia.

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: Se obser­va que debe­mos cor­re­gir el tamaño de los elementos.
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: Uti­lizan­do la com­po­nente Rect Trans­form cor­regi­mos el tamaño del elemento.

Ajus­tar el escal­ador de can­vas es algo que hubiese sido mejor hac­er des­de el prin­ci­pio, pero en esta serie del laber­in­to esta­mos mostran­do todos los ele­men­tos que con­ta­mos para hac­er un juego en Uni­ty, no tenía sen­ti­do mostrar el escal­ador de can­vas antes de mostrar el can­vas y sus ele­men­tos primero.

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: Ajus­ta­mos el tamaño de la fuente a gusto.

Una vez que hemos ajus­ta­do los ele­men­tos a la nue­va res­olu­ción de ref­er­en­cia, podemos obser­var el com­por­tamien­to del Can­vas Scaler, selec­cio­nan­do Free Aspect para la relación de aspec­to, usan­do el menú desple­gable que usamos en la figu­ra 1.

Luego hacien­do la ven­tana más ancha o más angos­ta obser­va­mos en las fig­uras 28 y 29 que el botón se hace pro­por­cional­mente más grande o chica.

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: Seteamos la opción Free Aspect para la relación de aspec­to. Como se hizo en la figu­ra 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: Al cam­biar el ancho de la ven­tana se obser­va que el botón cam­bia su tamaño proporcionalmente.

Lo últi­mo que hace­mos es crear una nue­va res­olu­ción para la ven­tana juego. Full­HD 1920x1080.

Esta res­olu­ción es sólo para la visu­al­ización en el edi­tor, no tiene que ver con la res­olu­ción que ten­drá el juego ejecutable.

definir una resolucion para la ventana juego de unity 3d para visualizar la interfaz grafica creada para nuestro juego
Fig. 30: Agreg­amos una res­olu­ción de 1920x1080 para ten­er de ref­er­en­cia en la ven­tana juego.

Conclusión

En este artícu­lo hemos repasa­do los pun­tos clave para crear una inter­faz grá­fi­ca sim­ple para el usuario, es decir los ele­men­tos mín­i­mos nece­sar­ios que el jugador nece­si­ta ver para uti­lizar el juego.

El ele­men­to bási­co de la inter­faz grá­fi­ca en Uni­ty es el Can­vas, den­tro se colo­carán los demás elementos.

El "Can­vas Scaler" nos provee una solu­ción sim­ple para la adaptación de la inter­faz grá­fi­ca a dis­tin­tas resoluciones.

Como el proyec­to aún no ha avan­za­do mucho, el juego aún no cuen­ta con más fun­cional­i­dad que colo­car al per­son­aje en el esce­nario. Más ade­lante deber­e­mos incluir más ele­men­tos en la inter­faz y prob­a­ble­mente crear más pantallas.

guest
0 Comments
Inline Feedbacks
View all comments
YouTube
Scroll al inicio
Secured By miniOrange