Como crear un menú con Unity.

Crear un menú para UNITY es SENCILLO! Vamos a crear un menú que será el responsable de cargar las diferentes escenas de nuestro proyecto Unity.

¿Que tenemos en la Hierarchy de la scene del menú ?

Para crear el menú lo primero que tenemos que hacer es crear una escena. Esta escena seria la principal de nuestro juego y se cargaría al principio. Esta escena tendrá que conteneR:

  • Una cámara. (Se crea por defecto con la escena).
  • La Directional Light. (Se crea por defecto con la escena).
  • EventSystem. Para capturar eventos del usuario y nos permite situar un botón preseleccionado por defecto.
  • Objeto vacío que contendrá el menú.
  • Objeto vacío que contendrá el script que se encargará de cargar las escenas. 

Creamos el script de carga de Escenas.

Creamos un objeto vacío en nuestra Hierarcy, yo lo he llamado MenuManager y le incorporamos un script, que tambien he llamado MenuManager, que tan solo contendrá una función.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class MenuManager : MonoBehaviour {

    public void loadScene(string scene)
	{
		SceneManager.LoadScene(scene);
	}
}

Incorporamos SceneManagement y usamos la función LoadScene para cargar la función que le indiquemos, el parámetro. El parametro lo informaremos en cada uno de los botones que formarán el menú.

Creando el menú.

  • Creamos un objeto vacío en hierarchy, yo lo he llamado MainMenu. Lo situamos en la posición 0,0,0, solo tenemos que seleccionar la ruedecita de la parte superior derecha del Inspector del elemento vacío y pulsar en Reset.
    • Le añadimos un Canvas.
    • Canvas Scaler. Nos permite adaptar el tamaño a diferentes tipos de pantallas con diferentes resoluciones.
    • Graphic Raycaster. Captura las entradas del usuario. 
      El objeto MainMenu con sus componentes. 
  • Creamos, dependiendo de MainMenu,  un objeto vacío que contendrá los botones. Le he llamado MenuPanel
    • Le incorporamos un Canvas Group y un Grid Layout Group. Los dos elementos vienen con Unity. El Grid Layout nos permite indicar como queremos que se organicen los botones y el tamaño que le asignamos a cada uno de ellos. Hay muchas opciones  a escoger, entre columnas fijas, dinámicas y el orden en el que queremos que se ordenen los botones.El MenuPanel con la configuración que he usado. Probad diferentes opciones. 
  • Dentro del MainMenu Creamos el primer botón. Para crear el botón pulsamos con el botón derecho sobre MenuPanel y Seleccionamos: UI->Button. El botón ya se creará con todos los componentes necesarios. Tan solo tenemos que configurarlos a nuestro gusto.
    • En Source Image, del elemento Image,  yo suelo escoger InputFieldBackground, me gusta el formato de botones cuadrados y planos,  pero  podéis usar una imagen a medida.
    • En el script Button, podemos escoger los colores que tendrá el botón en sus diferentes estados: normal, seleccionado y presionado.
    • En On Click, indicaremos la función a llamar. Arrastramos el objeto MenuManager a la casilla que esta debajo del Runtime Only . En el desplegables nos dejará escoger la función a llamar y cuando la escojamos nos mostrará un cuadro para que informemos el parámetro que espera la función. Lo llenamos con el nombre de la escena a cargar y voila! ya lo tenemos.
  • Duplicamos el botón creado tantas veces como necesitemos y cambiamos el nombre de la escena a cargar.

Menú creado:

Un menú muy simple, resulton y limpio, de diseño sencillo y que podemos adaptar muy fácilmente al look&feel de nuestro juego!

Si queréis ver un menú creado con esta técnica os podéis descargar el juego Giscard in the dark de la Google PlayStore, o pasaros por kongregate o GameJolt. No hace falta decir que es totalmente multiplataforma, no ha necesitado de ninguna adaptación para funcionar perfectamente en las diferentes plataformas.

 

Comentarios.