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

Información actualizada sobre esta entrada

Este artículo pertenece a una serie que consiste en hacer un juego simple en primera persona acerca de encontrar objetos dentro de un laberinto. Es una de mis primeras series de cuando empecé el canal, ahora he mejorado mucho este proyecto y puedes descargar el código fuente para importarlo en tu propio proyecto de Unity.

Descarga el código fuente en Itch.IO

A continuación puedes descargar el paquete de Unity para importar en tu proyecto.



PUEDES TESTEAR ESTE JUEGO AQUÍ. TAL VEZ TARDE UN POCO EN CARGAR
🔻

MOVEMENT: WASD CAMERA LOOK: MOUSE

Introducción al artículo original

En este artículo creamos una interfaz gráfica simple con la funcionalidad mínima para que el usuario pueda controlar el comienzo del juego. Aquí solamente veremos el armado de la interfaz gráfica, la programación del funcionamiento se hace en el siguiente artículo de la serie.

Página principal del proyecto

Vídeo relacionado a este artículo

SUSCRÍBETE AL CANAL

Descripción del objetivo

La interfaz gráfica de nuestro juego le permitirá al jugador configurar parámetros como resolución, volumen, cargar y guardar partidas, comenzar a jugar, ver su puntuación y demás.

En nuestro caso nos vamos a enfocar en hacer una interfaz gráfica con la funcionalidad mínima que necesitamos para el proyecto, que es en primer lugar un «Menú principal» en el que inicie el juego y desde ahí podamos comenzar la partida.

Lo segundo que necesitamos es una interfaz gráfica que se muestre mientras estamos jugando, por el momento queremos visualizar la cuenta regresiva.

Funcionalidad de la interfaz gráfica

Lo que vamos a hacer es crear un GameObject tipo Canvas que es un elemento básico en la interfaz gráfica y luego dos empty GameObjects que contendrán todos los elementos de del menú principal y del juego.

Cuando el juego comience estará activa la interfaz gráfica del menú principal, que solo nos mostrará un botón para comenzar el juego.

Al pulsar el botón haremos que se apague la interfaz gráfica del menú principal y se encienda la del juego la cual muestra el tiempo restante para completar la misión.

Cuando el juego finalice, apagaremos la interfaz gráfica del juego y volveremos a encender la del menú principal.

De esta forma no necesitamos una segunda escena separada para el juego y podemos resolver todo en una misma escena.

Procedimiento

Antes de empezar a hacer la interfaz gráfica vamos a crear un objeto prefabricado de la puerta para poder replicar fácilmente. Tomamos la escena como quedó al final del video anterior (figura 1) y eliminamos tres puertas y tres puntos 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: Estado de la escena al final del video anterior. Se borran tres puertas.

Tomamos el punto de aparición que nos quedó y lo hacemos 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: Tambien se eliminan los puntos de aparición dejando uno.
jerarquia de unity 3d con algunos objetos
Fig. 3: Se toma el punto de aparición y se lo hace hijo de la puerta.

Luego tomamos el GameObject Gate de la jerarquía y lo arrastramos hacia la carpeta Prefabs de nuestro proyecto, con esto creamos un prefab que podemos colocar cuantas veces sea necesario en nuestro juego.

Ventana Project de Unity 3D en la que se ven algunas carpetas, un skybox y un prefab de una puerta
Fig. 4: Tomando el GameObject de la jerarquí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 permite replicar el GameObject tantas veces como se quiera.

Vamos a crear una cámara que estará inicialmente activa para cuando mostremos la interfaz gráfica del menú principal.

Esta cámara la apagaremos en el momento de iniciar el juego para que no entre en conflicto con la cámara que viene incluida en el prefab del personaje.

jerarquia de unity 3d con algunos objetos, crear camara en unity 3d
Fig. 6: En la jerarquía creamos una camara que estará activa en el menú principal.

Diseño de la interfaz gráfica

Ahora comenzamos a crear los elementos necesarios para la interfaz gráfica. En primer lugar un Canvas o «Lienzo» donde se colocará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 jerarquía creamos un GameObject tipo Canvas para la interfaz de usuario.

Como se dijo en la introducción, creamos dos Empty GameObjects para que contengan los elementos 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 jerarquía creamos dos Empty GameObjects.

Vamos a nombrar a estos objetos «MainMenu» y «Game» para identificarlos fácilmente, como se observa en la figura 9.

jerarquia de unity 3d con algunos objetos
Fig. 9: Un empty object se llama Main Menu y el otro Game.

Haciendo clic derecho en el GameObject «MenuPrincipal» 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ú principal creamos un botón para comenzar el juego.

Para observar nuestra interfaz gráfica, en la pestaña «Game» vamos a seleccionar una relación de aspecto 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: Ajustamos la vista del juego para que tenga una relación de aspecto de 16:9.

Dentro del botón tenemos como hijo un GameObject tipo texto, vamos a seleccionarlo para modificarlo en el inspector.

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

Escribimos «Start Game» en el campo text que se observa en la figura 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 inspector podemos configurar el texto del botón.

Utilizando las herramientas básicas podemos posicionar 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: Posicionamos el botón en la pantalla.

Al entrar en el modo juego vemos que el botón tiene una animación al pulsarlo, pero por supuesto aún no realiza ninguna 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 probar el juego el botón tiene una animación para el pulsado pero aún no hace nada.

Vamos a darle al botón el nombre «StartButton» para identificarlo fácilmente en la jerarquía.

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

Lo siguiente que hacemos es crear un GameObject tipo texto, esta vez como hijo del objeto «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 GameObject tipo texto para la interfaz del juego.

En el inspector escribimos cualquier valor con el formato de tiempo, solo para visualizarlo en pantalla. Posteriormente modificaremos el texto utilizando código 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: Escribimos un valor de tiempo en el texto. Posteriormente programaremos el funcionamiento.

Ademas de escribir el texto podemos hacer otras acciones como centrar, modificar el tamaño de la letra, el tipo de fuente, color 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: Centramos el texto utilizando las opciones en el inspector.

Elegimos 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: Modificamos el tamaño.

Con el GameObject «Game» seleccionado, en la parte superior del inspector tenemos un botón que permite habilitarlo y deshabilitarlo (figura 21), esto hace que se muestre o no en la interfaz gráfica.

Usaremos esta propiedad desde el script de C# para programar el comportamiento de la interfaz 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: Utilizando el botón de la parte superior del inspector es posible deshabilitar el GameObject.

Adaptación a distintas resoluciones de pantalla

Cómo lograr que nuestro juego se vea bien en cualquier resolución de pantalla no es un problema menor.

Hay varias formas de encarar este tema, por ejemplo podríamos crear una interfaz de usuario distinta para cada resolución, luego utilizando un script de c# podríamos detectar qué tipo de resolución tiene el dispositivo y mostrar la interfaz gráfica apropiada.

En este video usamos un componente que trae asignado el Canvas y que se llama «Canvas Scaler», escalador de lienzo.

Este componente hará más grande o más chica la interfaz gráfica en función de la resolución de pantalla. Por el momento 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: Seleccionamos el GameObject Canvas en la jerarquía y observamos sus parámetros en el inspector.

Desplegamos el menú «UI Scale Mode» que por defecto está en «Constant Pixel Size» y seleccionamos 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 selecciona Scale With Screen Size.

Luego colocamos una resolución de referencia, en mi caso voy a usar 1920×1080, como se observa en la figura 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 resolución de referencia en 1920×1080.

Ahora debemos ajustar todos los elementos para que se vean bien para esa resolució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 observa que debemos corregir 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: Utilizando la componente Rect Transform corregimos el tamaño del elemento.

Ajustar el escalador de canvas es algo que hubiese sido mejor hacer desde el principio, pero en esta serie del laberinto estamos mostrando todos los elementos que contamos para hacer un juego en Unity, no tenía sentido mostrar el escalador de canvas antes de mostrar el canvas y sus elementos 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: Ajustamos el tamaño de la fuente a gusto.

Una vez que hemos ajustado los elementos a la nueva resolución de referencia, podemos observar el comportamiento del Canvas Scaler, seleccionando Free Aspect para la relación de aspecto, usando el menú desplegable que usamos en la figura 1.

Luego haciendo la ventana más ancha o más angosta observamos en las figuras 28 y 29 que el botón se hace proporcionalmente 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 aspecto. Como se hizo en la figura 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 cambiar el ancho de la ventana se observa que el botón cambia su tamaño proporcionalmente.

Lo último que hacemos es crear una nueva resolución para la ventana juego. FullHD 1920×1080.

Esta resolución es sólo para la visualización en el editor, no tiene que ver con la resolución que tendrá el juego ejecutable.

definir una resolucion para la ventana juego de unity 3d para visualizar la interfaz grafica creada para nuestro juego
Fig. 30: Agregamos una resolución de 1920×1080 para tener de referencia en la ventana juego.

Conclusión

En este artículo hemos repasado los puntos clave para crear una interfaz gráfica simple para el usuario, es decir los elementos mínimos necesarios que el jugador necesita ver para utilizar el juego.

El elemento básico de la interfaz gráfica en Unity es el Canvas, dentro se colocarán los demás elementos.

El «Canvas Scaler» nos provee una solución simple para la adaptación de la interfaz gráfica a distintas resoluciones.

Como el proyecto aún no ha avanzado mucho, el juego aún no cuenta con más funcionalidad que colocar al personaje en el escenario. Más adelante deberemos incluir más elementos en la interfaz y probablemente crear más pantallas.

Entradas relacionadas

Scroll al inicio
Secured By miniOrange