Diagramación de la pantalla de configuración

¿Cómo crear la pantalla de configuración en Unity?

En este tutorial, te guiaré a través del proceso de creación de una pantalla de configuración dentro de Unity, centrándonos en la estructuración de la interfaz de usuario gracias al uso de grupos de diseño vertical y horizontal. Este enfoque te permitirá crear una pantalla bien organizada y fácilmente adaptable a cambios futuros. Verás cómo combinar diferentes elementos como textos, botones y espaciadores para lograr un diseño efectivo y estéticamente agradable.

¿Cómo configuramos los elementos de UI en Unity?

Para iniciar, la pantalla de configuración es creada en Unity utilizando un objeto de tipo "UI Image" dentro del objeto principal de UI. Este objeto se nombra "UI Options" y se configura para rellenar completamente el área de pantalla mediante la opción de "Stretch". A continuación, asignamos el mismo color de fondo que las otras pantallas como la de pausa y título.

Pasos iniciales:

1. Crear un objeto UI Image:

   • En el objeto principal de UI, crea un objeto UI Image llamado "UI Options".
   • Configura "Stretch" a cero en todas las direcciones para que ocupe toda la pantalla.
   • Copia el color de fondo de la pantalla de pausa y aplícalo a "UI Options".

2. Añadir un contenedor central:

   • Dentro de "UI Options", crea otro objeto de tipo imagen llamado "Container".
   • Ajusta su anchura y posición para centrarlo en pantalla.
   • Asigna "Vertical Layout Group" para organizar los elementos verticalmente.
   • Utiliza el "Gray Boolean" como imagen de fondo para el contenedor.

¿Cómo organizar los elementos dentro del contenedor?

Dentro del contenedor, se dispoensan diversos elementos siguiendo un enfoque combinado de diseño vertical y horizontal. La alineación correcta y el uso de espaciadores resultan esenciales para un diseño limpio y eficaz.

Organización de elementos:

• Título de la pantalla:
  • Crea un texto de UI llamado "Title" dentro del contenedor.
  • Usa la fuente "Scanny Blocks" con un color gris oscuro y el texto "Options".
  • Configura el tamaño de la fuente en "Auto Size" con un máximo de 200.

// Configurando el título
TextMeshPro title = container.AddComponent<TextMeshPro>();
title.text = "Options";
title.alignment = TextAlignmentOptions.Center;
title.font = Resources.Load<TMP_FontAsset>("Fonts/ScannyBlocks");
title.color = new Color(0.3f, 0.3f, 0.3f); // Color gris oscuro

• Etiqueta de música:

  • Duplica el título para crear una etiqueta llamada "Music Label".
  • Ajusta el color a uno más claro y disminuye el tamaño de la fuente.
  • Establece el texto como "Music".

• Control de música:

  • Crea un objeto vacío llamado "Music Controls" e ingresa un "Horizontal Layout Group".
  • Añade botones y etiquetas de control dentro de él, alineando el contenido al centro.
  • Usa imágenes de ± para los botones, configuradas dentro de un "Pixel Per Multiplier".

// Ejemplo de botón restar
Button minusButton = new Button();
minusButton.GetComponentInChildren<TextMeshPro>().text = "-";
minusButton.transform.SetParent(musicControls.transform);

¿Qué sigue después de configurar los elementos comunes?

Una vez que los elementos principales están en su lugar, se procede a duplicar y ajustar estos elementos para cubrir tanto controles de música como de efectos de sonido (SFX). Por último, se reutiliza un botón preexistente en la parte inferior izquierda, asegurando consistencia visual y funcionalidad.

Pasos adicionales:

• Duplicar para controles SFX:

  • Duplica "Music Label" y "Music Controls" para crear los controles SFX.
  • Cambia los textos correspondiendo a "SFX".

• Añadir botón en la esquina inferior izquierda:

  • Copia el botón “Bottom Back” de otra sección de la UI para "UI Options".

Por con este detallado proceso, hemos completado una pantalla de configuración efectiva en Unity, lista para integrarse y recibir lógicas personalizadas en cualquier proyecto. Recuerda que este es el comienzo de un camino lleno de oportunidades de aprendizaje y desarrollo creativo en el diseño de interfaces en Unity. ¡Sigue adelante y crea experiencias inmersivas para tus usuarios!