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
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-limpiar-escena-unity3d.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-seleccionar-punto-aparicion.webp)
![jerarquia de unity 3d con algunos objetos](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-hacer-punto-aparicion-hijo-de-puerta.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-crear-prefab-puerta-mas-punto-aparicion.webp)
![escena de unity 3d con 2 portales y un suelo de cesped, a la derecha la jerarquia de unity 3d](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-el-prefab-se-puede-duplicar.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-crear-nueva-camara-unity3d.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-crear-ui-canvas.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-crear-empty-objects.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-nombrar-empty-objects-mainmenu-y-game.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-crear-ui-boton.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-seleccionar-relacion-aspecto-16-9.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-modificar-texto-del-boton.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-escribir-start-game-para-el-boton.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-acomodar-boton-en-pantalla.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-el-boton-tiene-animacion.webp)
Vamos a darle al botón el nombre “StartButton” para identificarlo fácilmente en la jerarquía.
![jerarquia de unity 3d con algunos objetos](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-renombrar-el-boton-como-start-button.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-crear-ui-texto.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-escribir-valor-de-minutos-y-segundos.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-centrar-texto-cambiar-fuente.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-centrar-texto-cambiar-font-size.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-boton-activar-y-desactivar-gameobject.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-canvas-scaler-en-inspector.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-setear-scale-with-screen-size.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-ingresar-resolucion-1920-1080.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-modificar-escala-de-elementos.webp)
![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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-modificar-escala-de-elementos-2.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-modificar-font-size.webp)
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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-elementos-de-la-ui-ajustan-su-escala.webp)
![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.](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-elementos-de-la-ui-ajustan-su-escala-2.webp)
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](https://gamedevtraum.com/wp-content/uploads/post/desarrolloJuegos/mpjeu/video5/mi-primer-juego-en-unity-video-5-definir-nueva-resolucion-1920-1080.webp)
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.