Vamos a crear un menú inicial para el juego con el objetivo de mostrar una pantalla anterior a la escena de la acción en sí.
Desde esta pantalla pasaremos a la escena de la acción a través de la pulsación de un botón. Además veremos como introducir nuevas fuentes tipográficas y a programar el cambio de una escena a otra.
Lo primero de todo es organizar los elementos que van aparecer en nuestro canvas en este caso habrá un titulo en la parte superior central y un botón para empezar nuestro juego:
Para añadir el texto y el botón en nuestro canvas pulsamos la opción GameObject>Ui>Text y Button:
Dentro de Titulo variamos su fuente la cual tenéis en vuestra carpeta de material. Simplemente tenemos que añadir directamente el archivo otf a nuestra carpeta de proyecto o Assets.
Y a partir de ahí desde la rueda que hay al lado de la opción font elegimos la nueva fuente
Colocamos el texto titulo a la distancia que aparece en la pestaña del inspector y el botón Empezar en lo que sería el centro de nuestro canvas. Movemos la cruz blanca dejando la parte inferior en el centro mientras que la superior en el top.Yaestudio
Vamos a cambiar los bordes de nuestro botón desde la opción Source Image> Select Sprite
Una vez configurado la estetica de nuestro botón vamos a programarle para decirle que cuando le pulsemos nos inicie nuestro nivel de juego en el que debemos empezar.
Creamos un nuevo script para el menú y lo llamamos InterfazUser.
En este script escribimos la función que teníamos añadiendo el siguiente código para que al pulsar el botón cargue la siguiente escena:
SceneManager.LoadScene(1);
Para que te deje usar esto, deberás añadir otra librería.
using UnityEngine.SceneManagement;
Guardamos la escena y accedemos a File/Build Settings.
Allí tendrás que asignar la escena actual como primera escena de la lista.
Ahora desde la carpeta de assets arrastramos la escena de enemigos, que habíamos hecho anteriormente, y la colocamos justo después de la escena de menú:
Este será nuestro primer nivel como la escena de los enemigos, luego repetiremos el mismo proceso para la escena de la Mazmorra que pasará a ser el nivel 2 del juego.
Una vez que tenemos nuestro menú acabado ya solo nos queda hacer la interfaz de las escenas jugables. Para ello nos dirigimos a nuestra primera escena la de enemigos y vamos a configurar el menú para nuestro jugador dentro de la escena.
GameObject>Ui>Canvas
Quitamos la visual de los objetos que estйn en medio de nuestro canvas y lo dejamos en 2D para poder organizar los elementos que queremos que aparezca en la interfaz
A continuación añadimos los siguientes elementos:
Una vez hecho el esquema de nuestra interfaz vamos a dejarla lo más próxima a nuestro player para que no se superponga otros objetos o el mismo terreno:
Para poder seguir editando la interfaz vamos a seleccionar todas las layers y luego solo visualizamos la UI:
Vamos a mostrar de manera más gráfica lo que es cada cosa. Para ello de nuestra carpeta de material cogemos estas tres imagenes y las convertimos en sprites pulsando en Apply:
En el recuadro de vida vamos a hacer que este suba o baje según disminuya la vida de nuestro player, para ello asignamos el sprite cuadrado rojo en las propiedades de type image y luego cambiamos su modo a Debug y dentro de la opción Sprite cambiamos el Type a Filled y el Fill Method a Horizontal
Ahora añadimos las imágenes para identificar cada elemento de nuestro canvas.
Por lo que nos vamos a la opción GameObject>Ui>Image
Desde las opciones de Imagen que aparecen en el inspector añadimos el icono de corazón para la vida, el recuadro rojo y para el texto en amarillo la imagen del cuadrado amarillo. Estos elementos los reescalamos.
Por lo que la barra de vida quedará con el corazón en su lado izquierdo para que el jugador identifique esta información y hacemos lo mismo con el elemento New Text que pasamos a llamarlo Monedas.
Vamos a crear un script nuevo llamado Player y se lo colocamos al jugador. En este script vamos a manejar todo lo referente a la interfaz que va a haber durante el juego y la vida del jugador
Declaramos una variable pública de tipo float. La llamamos “vida” y la inicializamos en un total de 100.
También se declara una variable de tipo Image y llámale “barradevida”.
Para poder hacer esto, necesitas decirle a Unity que haga uso de la librería de interfaz de usuario.
Escribe en la parte de arriba del código lo siguiente:
using UnityEngine.UI
Ahora, en el Update, añade lo siguiente para que pueda actualizarse la imagen de la barra en función de la variable “vida”. Donde cada vez que recibamos un golp de los enemigos y del enemigo protector nos vaya bajando la vida.
barradevida.fillAmount = vida/100;
De esta manera, al recibir un golpe de los enemigos la vida que está en la función start inicializada a 1 irá visualizandose como 99/100 a medida que vaya siendo afectada por los golpes que hemos programado de los enemigos
Creamos otra variable publica en la que mostraremos las monedas que hemos ido recogiendo del escenario.
Debajo de la barra de vida, coloca un objeto de tipo Text.
En el código de “Player”, será necesario tener una variable del mismo tipo que haga referencia a este objeto.
Y además tienes que declarar una variable de tipo int, para llevar la cuenta de las monedas que hayas recogido. Este contador empezará con el valor 0:
public void MonedaConseguido()
{
moneda ++;
textoItems.text = items.ToString() + “ de “ + Moneda.ToString() ;
}
Por otro lado, en la función de OnTriggerEnter de “Movimiento”, dentro de la condición que detecta la colisión con el ítem, habrá que añadir varias instrucciones:
Destruir el objeto del ítem con el que hemos chocado.
Llamar a la función MonedaConseguido de “Player”
Para ello escribe:
FindObjectOfType<Player>().MonedaConseguido();
Actualizar el Text que muestra el número de monedas en la interfaz.
Después, añade un botón en otro lado del canvas, y asígnale una función para volver al menú.
Y por último, vamos a añadir una funcionalidad que no tiene que ver con la interfaz pero es el momento de desarrollarla.
Crea una condición para detectar que se han cogido todos los ítems de la escena, y en ese caso, carga la siguiente escena.
Para ello añade en la función de MonedaConseguido:
if (Moneda == maxMonedas)
SceneManager.LoadScene(2);
Y así ya tendríamos nuestro juego acabado. Guardamos el proyecto como Menú final.