En esta lección repasamos las herramientas UI (User Interface) de Unity para crear un menú principal y un menú de pausa y aprovecharemos el Game Manager visto en la lección anterior para conectar los estados de juegos con dichos menús.
Lo que vamos es a crear una nueva escena llamada MainMenu que es donde colocaremos nuestros elementos para que aparezca el menú principal y el menú de pausa. Vamos a reutilizar elementos que ya hemos creado con anterioridad.
Así que nos venimos a la carpeta Scenes y duplicamos la escena Town
Lo renombramos como MainMenu
Ahora deberemos irnos a la carpeta de los ScriptableObjects y dentro de la carpeta Scenes tenemos que crear un nuevo objeto programable de la escena y lo llamaremos MainMenu
Y dentro del MainMenu desde el inspector le asignamos el mismo nombre al apartado de Scene Information
Abrimos de nuevo la carpeta de escenas y arrastramos la escena MainMenu a la ventana de BuildSettings que se abre desde el menu File>BuildSettings
Abrimos el MainMenu desde la carpeta de escenas y como es duplicada es identica a la anterior y empezamos a borrar los siguientes elementos
Ahora modificaremos el objeto LevelInitializer
Clic derecho elegimos la opción de Prefab>Unpack Completely
Y renombramos este objeto como MenuIniatilizer
Nos volvemos a Jerarquía y este objeto lo arrastramos a la carpeta de prefabs para convertirlo en uno
Con esto ya tendríamos un nuevo prefab para usarlo cuando queramos. Luego desde el inspector borraremos el apartado de las dependencias ya que no lo necesitamos. Pulsando en – lo quitamos.
Y ahora le decimos que aplique este cambio al prefab también. Pulsando en la opción de Overrides>MenuInitatilizer>ApplyAll
Nos volvemos a la ventana de la Jerarquía y abrimos el objeto Grid de aquí deberemos cargarnos el tilemaps de las Collisions ya que no lo vamos a necesitar en nuestro MainMenu
Y por último vamos a editar el prefab de nuestra cámara porque no vamos ni a necesitar en Confiner, la camara virtual o el cinemachine. Para ello pulsamos en botón derecho encima del objeto GameCameras >Pre- fab>Unpack Completely
Ahora que lo hemos convertido a un objeto unico, sacamos el objeto MainCamera del grupo y eliminamos el objeto GameCameras
Y al MainCamera vamos a quitarle el componente CinemachineBrain desde el inspector.
El siguiente paso es añadirle un script, que se encuentra dentro de la carpeta Utils de la carpeta raíz Scripts, llamado CameraRandomPan
Este script lo que hará es que moverá la camara aleatoriamente por nuestra pantalla en los ejes de la horizontal y la vertical poniendole nosotros unos mínimos y máximos de movimiento en esos ejes
Pondremos los siguientes valores que harán que nuestra camara se mueva desde el extremo izquierdo al derecho de nuestro mapa
Crear una interfaz gráfica (GUI) en Unity implica utilizar el sistema de interfaz de usuario (UI) proporcionado por el motor:
1. Canvas:
1.1. Añadir Canvas:
- En la jerarquía, haz clic derecho, selecciona «UI» y elige «Canvas».
- Este será el contenedor principal para tu interfaz gráfica.
1.2. Configurar Render Mode:
- Selecciona el Canvas y ajusta el «Render Mode» según tus necesidades (por ejemplo, Overlay para una superposición en pantalla).
2. UI Elements:
2.1. Añadir Texto:
- Añade un elemento de texto al canvas para mostrar información como la puntuación, la salud, etc.
- Selecciona el Canvas, haz clic derecho, selecciona «UI» y elige «Text».
2.2. Añadir Imágenes:
- Añade imágenes para botones, iconos, fondos, etc.
- Selecciona el Canvas, haz clic derecho, selecciona «UI» y elige «Image».
2.3. Añadir Botones:
- Añade botones para acciones del jugador.
- Selecciona el Canvas, haz clic derecho, selecciona «UI» y elige «Button».
3. Diseño y Posicionamiento:
3.1. Posicionamiento:
- Ajusta la posición y escala de los elementos UI según tus necesidades.
- Puedes utilizar el modo de diseño del Canvas para organizar los elementos.
3.2. Alineación y Distribución:
- Utiliza los componentes de diseño para alinear y distribuir elementos.
4. Estilo Visual:
4.1. Añadir Estilo:
- Utiliza imágenes y colores para dar estilo a tu interfaz gráfica.
- Puedes añadir sombras, resaltar elementos al pasar el ratón, etc.
5. Scripting y Funcionalidad:
5.1. Asociar Scripts:
- Crea scripts de C# para controlar la funcionalidad de la interfaz.
- Asocia estos scripts a los elementos de UI que los necesiten.
using UnityEngine; using UnityEngine.UI; public class UIManager : MonoBehaviour { publicText scoreText; void Start() { UpdateScore(0); } public void UpdateScore(int score) { scoreText.text = "Score: " + score; } }6. Asignar Referencias:
6.1. Asignar Texto:
- Arrastra el objeto de texto al campo público «scoreText» en el inspector del script.
7. Interactividad:
7.1. Añadir Interactividad:
- Utiliza eventos de botón, desencadenadores de colisión, etc., para activar acciones en respuesta a la interacción del jugador.
8. Animaciones:
8.1. Añadir Animaciones:
- Utiliza el sistema de animación de Unity para añadir transiciones y animaciones a los elementos UI.