tutoriales.com

Creando un Sistema de Menús Interactivos y Navegación UI en Unity para tus Juegos 🎮

Este tutorial te guiará paso a paso en la creación de un sistema de menús completo y una navegación de interfaz de usuario (UI) responsiva en Unity. Cubrirás desde el diseño visual básico hasta la programación de la lógica de botones, la gestión de paneles y la navegación con teclado/gamepad.

Intermedio25 min de lectura9 views
Reportar error

¡Bienvenido a este tutorial sobre cómo construir sistemas de menús interactivos y una navegación de UI robusta en Unity! En el desarrollo de videojuegos, una interfaz de usuario bien diseñada y funcional es crucial para la experiencia del jugador. Desde el menú principal hasta los menús de pausa y opciones, cada interacción debe ser intuitiva y atractiva. Este tutorial te proporcionará las herramientas y conocimientos para lograrlo.

🎯 ¿Qué aprenderás en este tutorial?

Al finalizar este tutorial, serás capaz de:

  • Diseñar y organizar elementos UI usando el sistema Canvas de Unity.
  • Crear diferentes tipos de menús (principal, pausa, opciones).
  • Implementar la lógica de interacción de botones con eventos de Unity.
  • Gestionar la activación y desactivación de paneles de menú.
  • Establecer una navegación UI efectiva con teclado y gamepad.
  • Persistir ajustes de usuario entre sesiones de juego.

🛠️ Requisitos Previos

Antes de empezar, asegúrate de tener lo siguiente:

  • Unity Hub y Unity Editor: Cualquier versión reciente de Unity (2020.3 LTS o superior es recomendada).
  • Conocimientos Básicos de Unity: Familiaridad con la interfaz, GameObjects, Componentes y el Editor.
  • Conocimientos Básicos de C#: Entender cómo crear scripts, variables, funciones y eventos.

🚀 Configuración Inicial del Proyecto

Comenzaremos creando un nuevo proyecto y configurando el Canvas, que es la base de toda nuestra UI.

1. Crear un Nuevo Proyecto

  1. Abre Unity Hub.
  2. Haz clic en New Project.
  3. Selecciona la plantilla 3D Core (o URP/HDRP si lo prefieres, pero para este tutorial 3D Core es suficiente).
  4. Nombra tu proyecto, por ejemplo, "SistemaMenusUnity" y haz clic en Create Project.

2. Configurar el Canvas 캔버스 설정

El Canvas es un GameObject que contiene todos los elementos de la interfaz de usuario. Es esencial configurarlo correctamente para que la UI se escale adecuadamente en diferentes resoluciones de pantalla.

  1. En la ventana Hierarchy, haz clic derecho y selecciona UI > Canvas.
  2. Con el Canvas seleccionado, ve al componente Canvas Scaler en la ventana Inspector.
  3. Cambia el UI Scale Mode a Scale With Screen Size.
  4. Establece la Reference Resolution a 1920 x 1080 (o la resolución base que prefieras para tu juego).
  5. Cambia el Screen Match Mode a Match Width Or Height.
  6. Ajusta Match a 0.5 para un equilibrio entre ancho y alto, o 0 para priorizar el ancho, 1 para priorizar el alto. Para menús, un valor cercano a 0.5 suele funcionar bien.
💡 Consejo: Usa el Modo Game view en el editor para previsualizar cómo se verá tu UI en diferentes resoluciones. Puedes cambiar la resolución del Game view desde el desplegable de Aspect Ratio.

🎨 Creando el Menú Principal

El menú principal es la puerta de entrada a tu juego. Típicamente incluye opciones como "Jugar", "Opciones", "Créditos" y "Salir".

1. Estructura Básica del Menú Principal

Vamos a organizar nuestro menú principal dentro de un panel para mayor claridad.

  1. Dentro del Canvas, haz clic derecho y selecciona UI > Panel.
  2. Renombra el GameObject Panel a Panel_MainMenu.
  3. En el Inspector de Panel_MainMenu, puedes ajustar el color y la transparencia de la imagen de fondo. Para un menú limpio, puedes establecer el color a blanco y la transparencia (canal Alpha) a 0 para que sea completamente transparente, o a un valor bajo como 50 para un ligero sombreadado.
  4. Asegúrate de que el Rect Transform del panel esté anclado a Stretch en todas direcciones (Alt + clic en el ancla y selecciona la opción de estirar).

2. Añadiendo Botones

Ahora, agregaremos los botones principales.

  1. Dentro de Panel_MainMenu, haz clic derecho y selecciona UI > Button - TextMeshPro.
    • Si TextMeshPro no está importado, Unity te pedirá que lo importes. Haz clic en Import TMP Essentials.
  2. Renombra el botón a Button_Play.
  3. Selecciona Button_Play y en el Inspector, ajusta el Rect Transform:
    • Cambia los Anchors para que estén en el centro (Min X: 0.5, Max X: 0.5, Min Y: 0.5, Max Y: 0.5).
    • Ajusta Pos X y Pos Y para posicionarlo. Por ejemplo, Pos Y: 50 para el primer botón.
    • Establece Width y Height (ej. Width: 200, Height: 50).
  4. Expande Button_Play y selecciona el componente Text (TMP). Cambia el texto a "JUGAR".
  5. Duplica Button_Play (Ctrl + D o Cmd + D) dos veces y renómbralos a Button_Options y Button_Exit.
  6. Ajusta sus Pos Y para que estén uno debajo del otro. Por ejemplo: Button_Play (Pos Y: 50), Button_Options (Pos Y: -20), Button_Exit (Pos Y: -90).
  7. Cambia el texto de Button_Options a "OPCIONES" y Button_Exit a "SALIR".
Canvas Panel_MainMenu Button_Play Button_Options Button_Exit

3. Programando la Lógica de los Botones

Necesitaremos un script para manejar las acciones de los botones.

  1. En la carpeta Assets, crea una nueva carpeta llamada Scripts.
  2. Dentro de Scripts, haz clic derecho, Create > C# Script y nómbralo MainMenuManager.
  3. Crea un GameObject vacío en la Hierarchy llamado MenuManager.
  4. Arrastra el script MainMenuManager al GameObject MenuManager.
  5. Abre MainMenuManager.cs y añade el siguiente código:
using UnityEngine; 
using UnityEngine.SceneManagement; // Para cargar escenas

public class MainMenuManager : MonoBehaviour
{
    [SerializeField] private GameObject mainMenuPanel; // Referencia al panel del menú principal
    [SerializeField] private GameObject optionsMenuPanel; // Referencia al panel de opciones

    void Start()
    {
        // Asegurarse de que solo el menú principal esté activo al inicio
        if (mainMenuPanel != null) mainMenuPanel.SetActive(true);
        if (optionsMenuPanel != null) optionsMenuPanel.SetActive(false);
    }

    public void PlayGame()
    {   
        Debug.Log("Iniciando Juego...");
        // Aquí puedes cargar la siguiente escena o iniciar el juego
        // Por ejemplo, SceneManager.LoadScene("GameScene");
    }

    public void OpenOptions()
    {   
        Debug.Log("Abriendo Opciones...");
        if (mainMenuPanel != null) mainMenuPanel.SetActive(false);
        if (optionsMenuPanel != null) optionsMenuPanel.SetActive(true);
    }

    public void CloseOptions()
    {   
        Debug.Log("Cerrando Opciones...");
        if (optionsMenuPanel != null) optionsMenuPanel.SetActive(false);
        if (mainMenuPanel != null) mainMenuPanel.SetActive(true);
    }

    public void ExitGame()
    {   
        Debug.Log("Saliendo del Juego...");
#if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false; // Detiene el juego en el editor
#else
        Application.Quit(); // Cierra la aplicación cuando está compilada
#endif
    }
}

4. Conectando Botones a Funciones

Ahora, conectemos los botones a las funciones de nuestro script MainMenuManager.

  1. Selecciona el Button_Play en la Hierarchy.
  2. En el Inspector, desplázate hacia abajo hasta el componente Button.
  3. En la sección On Click (), haz clic en el botón + para añadir un nuevo evento.
  4. Arrastra el GameObject MenuManager (que tiene el script MainMenuManager) desde la Hierarchy al campo None (Object) del evento.
  5. En el desplegable No Function, selecciona MainMenuManager > PlayGame().
  6. Repite los pasos 1-5 para Button_Options, seleccionando MainMenuManager > OpenOptions().
  7. Repite los pasos 1-5 para Button_Exit, seleccionando MainMenuManager > ExitGame().

⚙️ Creando el Menú de Opciones

El menú de opciones permite a los jugadores ajustar configuraciones como el volumen, la calidad gráfica, etc.

1. Estructura del Menú de Opciones

  1. Dentro del Canvas, crea un nuevo UI > Panel y renómbralo a Panel_OptionsMenu.
  2. Ajusta su Rect Transform para que ocupe todo el Canvas (Stretch).
  3. Haz que el Panel_OptionsMenu sea hijo del Canvas (al mismo nivel que Panel_MainMenu).
  4. Desactiva el Panel_OptionsMenu en el Inspector desmarcando la casilla en la esquina superior izquierda del GameObject. Este panel solo se activará cuando se haga clic en "Opciones".

2. Añadiendo Elementos de Opciones (Ej. Deslizador de Volumen)

Vamos a añadir un deslizador (Slider) para controlar el volumen del juego.

  1. Dentro de Panel_OptionsMenu, haz clic derecho y selecciona UI > Slider.
  2. Renombra el deslizador a Slider_Volume.
  3. Ajusta su Rect Transform (ej. Pos Y: 50, Width: 300, Height: 20).
  4. Dentro de Panel_OptionsMenu, añade un UI > Text - TextMeshPro y renómbralo a Text_VolumeLabel.
  5. Posiciónalo encima de Slider_Volume (ej. Pos Y: 80). Cambia su texto a "Volumen Maestro:".
  6. Añade un botón para volver al menú principal. Dentro de Panel_OptionsMenu, crea un UI > Button - TextMeshPro y renómbralo a Button_Back.
  7. Posiciónalo en la parte inferior (ej. Pos Y: -100). Cambia su texto a "ATRÁS".
  8. Conecta Button_Back a la función MainMenuManager > CloseOptions() de la misma manera que hiciste con los botones del menú principal.

3. Implementando Lógica para el Deslizador de Volumen

Ahora, necesitamos una manera de que el Slider controle el volumen real del juego.

  1. Modifica el script MainMenuManager.cs para incluir una referencia al Slider y una función para manejar su valor:
using UnityEngine; 
using UnityEngine.SceneManagement;
using UnityEngine.UI; // Necesario para Slider
using TMPro; // Necesario para TextMeshPro

public class MainMenuManager : MonoBehaviour
{
    [SerializeField] private GameObject mainMenuPanel;
    [SerializeField] private GameObject optionsMenuPanel;
    [SerializeField] private Slider volumeSlider; // Referencia al deslizador de volumen

    void Start()
    {
        if (mainMenuPanel != null) mainMenuPanel.SetActive(true);
        if (optionsMenuPanel != null) optionsMenuPanel.SetActive(false);

        // Cargar el valor del volumen guardado (si existe)
        if (volumeSlider != null)
        {   
            volumeSlider.value = PlayerPrefs.GetFloat("MasterVolume", 0.75f); // 0.75 es el valor por defecto
            SetMasterVolume(volumeSlider.value); // Aplica el volumen al inicio
        }
    }

    // ... (otras funciones como PlayGame, OpenOptions, CloseOptions, ExitGame)

    public void SetMasterVolume(float volume)
    {   
        AudioListener.volume = volume; // Controla el volumen global del juego
        PlayerPrefs.SetFloat("MasterVolume", volume); // Guarda el valor del volumen
        PlayerPrefs.Save(); // Guarda los PlayerPrefs inmediatamente
        Debug.Log("Volumen maestro ajustado a: " + volume);
    }
}
  1. Vuelve al editor de Unity.
  2. Selecciona el GameObject MenuManager.
  3. En el Inspector, arrastra Panel_OptionsMenu al campo Options Menu Panel.
  4. Arrastra Slider_Volume (desde Panel_OptionsMenu) al campo Volume Slider.
  5. Selecciona Slider_Volume.
  6. En el componente Slider, ve a la sección On Value Changed (Single).
  7. Haz clic en +.
  8. Arrastra MenuManager al campo None (Object).
  9. En el desplegable No Function, selecciona MainMenuManager > SetMasterVolume(float).
🔥 Importante: Asegúrate de que tu escena tenga algún componente de audio (como un AudioSource en bucle con música de fondo) para poder probar el Slider de volumen.

⏸️ Creando un Menú de Pausa

Un menú de pausa es esencial para permitir a los jugadores detener el juego en cualquier momento.

1. Estructura del Menú de Pausa

  1. Dentro del Canvas, crea un nuevo UI > Panel y renómbralo a Panel_PauseMenu.
  2. Ajusta su Rect Transform para que ocupe todo el Canvas (Stretch).
  3. Desactiva el Panel_PauseMenu en el Inspector. Este panel solo se activará cuando el juego esté en pausa.
  4. Dentro de Panel_PauseMenu, añade un UI > Text - TextMeshPro y renómbralo a Text_PauseTitle. Posiciónalo en el centro superior (ej. Pos Y: 150). Cambia su texto a "JUEGO EN PAUSA".
  5. Añade botones similares a los del menú principal: Button_Resume, Button_OptionsInGame, Button_MainMenu, Button_ExitGameInPause.
    • Button_Resume (ej. Pos Y: 50, texto: "REANUDAR")
    • Button_OptionsInGame (ej. Pos Y: -20, texto: "OPCIONES")
    • Button_MainMenu (ej. Pos Y: -90, texto: "MENU PRINCIPAL")
    • Button_ExitGameInPause (ej. Pos Y: -160, texto: "SALIR DEL JUEGO")

2. Programando la Lógica del Menú de Pausa

Necesitamos un nuevo script o extender el MainMenuManager para manejar la pausa. Es mejor crear un script separado para la lógica del juego.

  1. Crea un nuevo C# script en la carpeta Scripts llamado GameManager.
  2. Crea un GameObject vacío en la Hierarchy llamado GameManager y arrastra el script GameManager a él.
  3. Abre GameManager.cs y añade el siguiente código:
using UnityEngine; 
using UnityEngine.SceneManagement;

public class GameManager : MonoBehaviour
{
    public static GameManager Instance { get; private set; }

    [SerializeField] private GameObject pauseMenuPanel;
    [SerializeField] private GameObject optionsMenuPanel; // Referencia al panel de opciones para abrirlo desde pausa
    
    private bool isGamePaused = false;

    void Awake()
    {
        if (Instance != null && Instance != this)
        {
            Destroy(gameObject);
        }
        else
        {
            Instance = this;
            DontDestroyOnLoad(gameObject); // Opcional: para persistir el GameManager entre escenas
        }
    }

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Escape) || Input.GetButtonDown("Cancel")) // Escape o botón de cancelar del gamepad
        {
            if (isGamePaused)
            {
                ResumeGame();
            }
            else
            {
                PauseGame();
            }
        }
    }

    public void PauseGame()
    {   
        isGamePaused = true;
        Time.timeScale = 0f; // Congela el tiempo en el juego
        if (pauseMenuPanel != null) pauseMenuPanel.SetActive(true);
        // Asegurarse de que el menú de opciones esté cerrado al pausar
        if (optionsMenuPanel != null) optionsMenuPanel.SetActive(false);
        Debug.Log("Juego Pausado");
    }

    public void ResumeGame()
    {   
        isGamePaused = false;
        Time.timeScale = 1f; // Reanuda el tiempo normal
        if (pauseMenuPanel != null) pauseMenuPanel.SetActive(false);
        Debug.Log("Juego Reanudado");
    }

    public void OpenOptionsFromPause()
    {   
        if (pauseMenuPanel != null) pauseMenuPanel.SetActive(false);
        if (optionsMenuPanel != null) optionsMenuPanel.SetActive(true);
        Debug.Log("Abriendo Opciones desde Pausa");
    }

    public void CloseOptionsFromPause()
    {   
        if (optionsMenuPanel != null) optionsMenuPanel.SetActive(false);
        if (pauseMenuPanel != null) pauseMenuPanel.SetActive(true);
        Debug.Log("Cerrando Opciones desde Pausa");
    }

    public void LoadMainMenu()
    {   
        ResumeGame(); // Asegurarse de que el tiempo se reanude antes de cargar una nueva escena
        SceneManager.LoadScene("MainMenuScene"); // Carga tu escena de menú principal
    }

    public void ExitGame()
    {   
        Debug.Log("Saliendo del Juego desde Pausa...");
#if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false;
#else
        Application.Quit();
#endif
    }
}
  1. En el editor de Unity, selecciona GameManager.
  2. Arrastra Panel_PauseMenu al campo Pause Menu Panel y Panel_OptionsMenu (el mismo panel de opciones que ya tenemos) al campo Options Menu Panel.
  3. Conecta los botones del Panel_PauseMenu a las funciones de GameManager:
    • Button_Resume -> GameManager > ResumeGame()
    • Button_OptionsInGame -> GameManager > OpenOptionsFromPause()
    • Button_MainMenu -> GameManager > LoadMainMenu()
    • Button_ExitGameInPause -> GameManager > ExitGame()

3. Modificando el Menú de Opciones para la Pausa

Cuando abrimos el menú de opciones desde el menú de pausa, el botón "Atrás" debe llevarnos de vuelta al menú de pausa. El MainMenuManager ya tiene un CloseOptions() que nos lleva al menú principal. Necesitamos una nueva función para volver al menú de pausa.

  1. Modifica MainMenuManager.cs para incluir una función que controle la vuelta al panel de opciones.

    ⚠️ Advertencia: Para evitar acoplamiento, sería mejor que el panel de opciones supiera *quién lo abrió* y volviera a ese panel. Por simplicidad en este tutorial, lo haremos a través del GameManager.

    En GameManager.cs: Modifica OpenOptionsFromPause() y CloseOptionsFromPause() para que gestionen la visibilidad del panel de opciones directamente. Asegúrate de que el Slider_Volume del Panel_OptionsMenu aún esté conectado a MainMenuManager.SetMasterVolume.

    Una mejor práctica sería tener un UIManager global o que el script del panel de opciones reciba una referencia al panel "padre" al abrirse.

    Por ahora, asegurémonos de que el Button_Back del Panel_OptionsMenu pueda cerrar las opciones y volver al menú principal O al menú de pausa. Podemos lograr esto con una pequeña modificación.

    Opción 1: Múltiples botones de 'Atrás' Para una solución más simple, puedes tener dos botones 'Atrás' en el Panel_OptionsMenu.

    • Uno llamado Button_BackToMain (inicialmente desactivado) que llame a MainMenuManager.CloseOptions().
    • Otro llamado Button_BackToPause (inicialmente desactivado) que llame a GameManager.CloseOptionsFromPause().
    • Luego, en MainMenuManager.OpenOptions() activas Button_BackToMain y desactivas Button_BackToPause.
    • Y en GameManager.OpenOptionsFromPause() activas Button_BackToPause y desactivas Button_BackToMain.

    Esta opción es fácil de implementar pero duplica GameObjects. Una solución más robusta implica un OptionsMenuManager con una función Open(GameObject panelToReturnTo).

    Opción 2 (Avanzada y Recomendada): Un script de "UIManager" Centralizar el control de paneles en un solo UIManager. Para mantener el tutorial enfocado, continuaremos con la solución de GameManager, pero ten en cuenta que un UIManager es escalable.

    Volviendo a GameManager.cs y MainMenuManager.cs: Asegúrate de que MainMenuManager solo maneje el menú principal y GameManager solo maneje el menú de pausa y sus transiciones. El OptionsMenuPanel debe ser referenciado por ambos scripts para que puedan abrirlo y cerrarlo según sea necesario.

    Para el Button_Back en Panel_OptionsMenu: Necesitamos que sepa si fue abierto desde el menú principal o desde el menú de pausa. Una forma sencilla es pasar un parámetro o usar una bandera.

    • En MainMenuManager.cs:
// ... (otras variables)
public static bool openedFromMainMenu = false;

public void OpenOptions()
{
Debug.Log("Abriendo Opciones desde Main Menu...");
if (mainMenuPanel != null) mainMenuPanel.SetActive(false);
if (optionsMenuPanel != null) optionsMenuPanel.SetActive(true);
openedFromMainMenu = true; // Establecer la bandera
}

public void CloseOptions()
{
Debug.Log("Cerrando Opciones a Main Menu...");
if (optionsMenuPanel != null) optionsMenuPanel.SetActive(false);
if (mainMenuPanel != null) mainMenuPanel.SetActive(true);
openedFromMainMenu = false; // Restablecer la bandera
}
*   **En `GameManager.cs`:**
// ... (otras variables)
public void OpenOptionsFromPause()
{
Debug.Log("Abriendo Opciones desde Pausa...");
if (pauseMenuPanel != null) pauseMenuPanel.SetActive(false);
if (optionsMenuPanel != null) optionsMenuPanel.SetActive(true);
MainMenuManager.openedFromMainMenu = false; // Asegurarse de que esta bandera sea falsa
}

public void CloseOptionsFromPause()
{
Debug.Log("Cerrando Opciones a Pausa...");
if (optionsMenuPanel != null) optionsMenuPanel.SetActive(false);
if (pauseMenuPanel != null) pauseMenuPanel.SetActive(true);
}
*   **Ahora, para el botón `Button_Back` en `Panel_OptionsMenu`:**
    Crea un nuevo script llamado `OptionsMenuLogic.cs` y adjúntalo al `Panel_OptionsMenu`.
using UnityEngine;

public class OptionsMenuLogic : MonoBehaviour
{
// No necesita referencias directas aquí si usamos los Managers existentes
public void BackButtonAction()
{
if (MainMenuManager.openedFromMainMenu)
{
MainMenuManager.Instance.CloseOptions(); // Necesitarás que MainMenuManager sea Singleton o tenga una referencia estática.
}
else
{
GameManager.Instance.CloseOptionsFromPause(); // GameManager ya es Singleton
}
}
}
    Para que `MainMenuManager.Instance` funcione, también conviértelo en un Singleton:
    **En `MainMenuManager.cs`:**
public static MainMenuManager Instance { get; private set; }

void Awake()
{
if (Instance != null && Instance != this)
{
Destroy(gameObject);
}
else
{
Instance = this;
}
}
    Ahora, en el `Button_Back` del `Panel_OptionsMenu`:
    1.  Añade un componente `OptionsMenuLogic` al `Panel_OptionsMenu`.
    2.  Conecta `Button_Back` a `Panel_OptionsMenu` (el GameObject que tiene el script `OptionsMenuLogic`).
    3.  Selecciona `OptionsMenuLogic > BackButtonAction()`.
📌 Nota: Los singletons son útiles para managers globales, pero úsalos con moderación para evitar acoplamiento excesivo. Para UIs más complejas, un patrón de 'Event Bus' o 'Dependency Injection' podría ser más robusto.

⌨️ Navegación de UI con Teclado y Gamepad

Unity's UI System tiene un sistema de navegación incorporado que facilita el uso de teclado y gamepad.

1. Navegación Automática

Por defecto, los botones, deslizadores y otros elementos interactivos de la UI de Unity intentan adivinar la navegación.

  1. Selecciona un Button (por ejemplo, Button_Play).
  2. En el Inspector, en el componente Button, busca la sección Navigation.
  3. Por defecto, estará configurado como Automatic. Esto permite que Unity intente encontrar el siguiente elemento navegable basándose en su posición relativa. Para diseños simples, esto funciona bien.

2. Navegación Manual (Explícita)

Para diseños más complejos o para asegurar un orden específico, puedes usar la navegación Explicit.

  1. Selecciona Button_Play.
  2. En la sección Navigation, cambia el Mode a Explicit.
  3. Ahora verás campos para Select On Up, Select On Down, Select On Left, Select On Right.
  4. Arrastra Button_Options al campo Select On Down de Button_Play.
  5. Selecciona Button_Options.
  6. Arrastra Button_Play al campo Select On Up de Button_Options.
  7. Arrastra Button_Exit al campo Select On Down de Button_Options.
  8. Repite esto para todos tus botones en cada menú, asegurando que cada botón sepa a dónde ir en cada dirección.
💡 Consejo: Usa el teclado (flechas o WASD) o un gamepad (D-pad o joystick) en el modo de juego para probar tu navegación. El botón actualmente seleccionado se resaltará.

✨ Pulido y Detalles Adicionales

Un buen menú no solo funciona, sino que también se ve y se siente bien.

1. Efectos Visuales al Interactuar

Los botones de Unity tienen propiedades de transición incorporadas:

  1. Selecciona un Button.
  2. En el componente Button, la sección Transition te permite elegir cómo el botón reacciona visualmente:
    • Color Tint: Cambia el color del botón.
    • Sprite Swap: Cambia la imagen del botón.
    • Animation: Reproduce una animación (creada con el sistema de animación de Unity).
  3. Experimenta con Color Tint, ajustando los colores Highlighted Color, Pressed Color y Selected Color para dar un feedback visual al jugador.
📌 Nota: Para `Sprite Swap`, necesitarás diferentes sprites para cada estado del botón. Para `Animation`, Unity puede crear animadores y clips automáticamente si haces clic en `Auto Generate Animation` en el componente Button.

2. Guardar y Cargar Ajustes (PlayerPrefs)

Ya implementamos PlayerPrefs para el volumen. Puedes extender esto para otras configuraciones.

Ejemplo: Toggle para pantalla completa

  1. En Panel_OptionsMenu, añade UI > Toggle - TextMeshPro y renómbralo a Toggle_Fullscreen.
  2. Posiciónalo (ej. Pos Y: -0, junto al Slider_Volume). Cambia su texto a "Pantalla Completa".
  3. Modifica MainMenuManager.cs:
// ... (otras variables)
    [SerializeField] private Toggle fullscreenToggle;

    void Start()
    {
        // ... (código existente)

        if (fullscreenToggle != null)
        {
            fullscreenToggle.isOn = PlayerPrefs.GetInt("Fullscreen", 1) == 1; // 1 para true, 0 para false
            SetFullscreen(fullscreenToggle.isOn); // Aplica la configuración al inicio
        }
    }

    // ... (otras funciones)

    public void SetFullscreen(bool isFullscreen)
    {   
        Screen.fullScreen = isFullscreen;
        PlayerPrefs.SetInt("Fullscreen", isFullscreen ? 1 : 0);
        PlayerPrefs.Save();
        Debug.Log("Modo pantalla completa: " + isFullscreen);
    }
  1. En el editor, selecciona MenuManager y arrastra Toggle_Fullscreen al campo Fullscreen Toggle.
  2. Selecciona Toggle_Fullscreen.
  3. En el componente Toggle, ve a la sección On Value Changed (Boolean).
  4. Haz clic en +.
  5. Arrastra MenuManager al campo None (Object).
  6. En el desplegable No Function, selecciona MainMenuManager > SetFullscreen(bool).
90% Completado

🚀 Siguientes Pasos y Mejores Prácticas

Has construido una base sólida para tu sistema de menús. Aquí hay algunas ideas para llevarlo al siguiente nivel:

  • Animaciones: Utiliza el sistema de animación de Unity para que los paneles aparezcan y desaparezcan suavemente, o para animar elementos individuales de la UI.
  • Localización: Implementa un sistema de localización para soportar múltiples idiomas en tu UI.
  • Input System (Nuevo): Considera usar el nuevo Input System Package de Unity para un control más robusto sobre la entrada del jugador, especialmente para gamepads y custom remapping.
  • Scriptable Objects: Usa Scriptable Objects para almacenar datos de menú (como textos, configuraciones por defecto) que se puedan compartir fácilmente o modificar sin tocar el código.
  • Event System: Para UIs complejas, el Event System de Unity es muy potente. También puedes implementar tu propio sistema de eventos para desacoplar mejor la lógica de la UI de la lógica del juego.
  • Visual Scripting (Bolt/Unity Visual Scripting): Si prefieres un enfoque visual, puedes usar Bolt para la lógica de tu UI, especialmente si trabajas con diseñadores sin conocimientos de programación.
¿Por qué usar TextMeshPro en lugar de Text (Legacy)? TextMeshPro ofrece renderizado de texto de mayor calidad, menor uso de memoria y CPU, y una mayor flexibilidad en cuanto a estilo (sombras, contornos, gradientes). Es el estándar moderno para el texto en la UI de Unity.
¿Cómo puedo hacer que mi UI sea responsiva para diferentes relaciones de aspecto? La configuración del `Canvas Scaler` en `Scale With Screen Size` con `Match Width Or Height` es el primer paso. Para un control más preciso, puedes usar `Layout Groups` (Horizontal Layout Group, Vertical Layout Group, Grid Layout Group) y `Content Size Fitter` en tus paneles. También puedes anclar elementos a diferentes esquinas o bordes del `Rect Transform`.
🔥 Importante: Siempre prueba tu UI en diferentes resoluciones y relaciones de aspecto para asegurar que se vea bien en todos los dispositivos de destino.

¡Felicidades! Has aprendido a construir un sistema de menús interactivo y funcional en Unity, incluyendo menús principales, de opciones y de pausa, junto con la gestión básica de la UI y la persistencia de datos. Este es un paso fundamental para crear experiencias de juego pulidas y profesionales.

Tutoriales relacionados

Comentarios (0)

Aún no hay comentarios. ¡Sé el primero!