🎮 Cómo Mostrar y Ocultar un Panel de Créditos en Unity

• Tomas Gonzalez
• 08 Feb 2025

🎮 Cómo Mostrar y Ocultar un Panel de Créditos en Unity

En este tutorial, aprenderás a crear un botón en Unity que permita mostrar y ocultar un panel de créditos al hacer clic.

✅ Funciona con UI y Canvas en Unity.
✅ Sin necesidad de cambiar de escena.
✅ Fácil de implementar en cualquier menú.

---

🔹 1. Crear el Panel de Créditos

📌 Paso 1: Agregar un Canvas si no tienes uno

1. Ve a GameObject > UI > Canvas.
2. Renómbralo CanvasMenu (si aún no tienes un Canvas).
3. Asegúrate de que el CanvasScaler está en:
   • UI Scale Mode: Scale With Screen Size
   • Reference Resolution: 1920×1080

---

📌 Paso 2: Crear el PanelCreditos

1. Dentro del Canvas, clic derecho > UI > Panel.
2. Renómbralo PanelCreditos.
3. Ajusta su tamaño y color según prefieras.

---

📌 Paso 3: Agregar Texto y un Botón de Cerrar

1. Dentro del PanelCreditos, agrega:
   • UI > Text (TextMeshPro) → Escribe los créditos del juego.
   • UI > Button - TextMeshPro → Renómbralo BotonCerrarCreditos.
2. Edita el BotonCerrarCreditos:
   • Cambia el texto a "Cerrar".
   • Ajusta su tamaño y posición dentro del PanelCreditos.
3. Desactiva PanelCreditos en el Inspector para que no aparezca al inicio.

---

🔹 2. Crear el Script para Mostrar y Ocultar el Panel

📌 Paso 4: Crear el Script CreditosManager.cs

1. Ve a la carpeta Scripts (Assets/Scripts).
2. Clic derecho > Create > C# Script.
3. Nómbralo CreditosManager.cs y ábrelo.
4. Copia este código:

using UnityEngine;

public class CreditosManager : MonoBehaviour
{
    public GameObject panelCreditos; // Referencia al panel de créditos

    void Start()
    {
        // Asegurar que el panel esté oculto al iniciar el juego
        if (panelCreditos != null)
        {
            panelCreditos.SetActive(false);
        }
        else
        {
            Debug.LogWarning("⚠️ Panel de créditos no asignado en el Inspector.");
        }
    }

    // Método para mostrar el panel
    public void MostrarCreditos()
    {
        if (panelCreditos != null)
        {
            panelCreditos.SetActive(true);
        }
    }

    // Método para ocultar el panel
    public void OcultarCreditos()
    {
        if (panelCreditos != null)
        {
            panelCreditos.SetActive(false);
        }
    }
}

---

🔹 3. Asignar Funcionalidad a los Botones

📌 Paso 5: Asignar el Script a un Objeto

1. Crea un GameObject vacío en la jerarquía (GameObject > Create Empty).
2. Renómbralo GestorCreditos.
3. Arrástrale el script CreditosManager.cs (Add Component > CreditosManager).

---

📌 Paso 6: Conectar los Botones con el Script

1. Selecciona el BotonCreditos en la Jerarquía.
2. En el Inspector, busca la sección Button > OnClick().
3. Haz clic en + para agregar una nueva acción.
4. Arrastra el GestorCreditos al campo vacío.
5. En la lista desplegable, selecciona CreditosManager > MostrarCreditos().

✍ Repite esto con el BotonCerrarCreditos:

• En OnClick(), selecciona CreditosManager > OcultarCreditos().

---

🎯 Resultado Final

✅ Al presionar el botón «Créditos», el panel aparecerá.
✅ Al presionar «Cerrar», el panel desaparecerá.
✅ Si el PanelCreditos no está asignado, Unity mostrará una advertencia en la Console.