Diagramando la pantalla de pausa

¿Cómo crear una pantalla de pausa en Unity?

Construir una interfaz gráfica de usuario atractiva es esencial para cualquier juego. En esta lección, crearemos una pantalla de pausa utilizando Unity, con un enfoque práctico y paso a paso. Sigue estas instrucciones para replicar este diseño en tu propio proyecto de juego.

¿Cómo establecer la estructura básica?

Inicialmente, asegúrate de desactivar todas las interfaces actuales para permitir un trabajo más ordenado. Este paso es crucial para evitar confusiones visuales y mantener el enfoque en la nueva pantalla de pausa.

1. Buscar referencias: Localiza la referencia de la pantalla de pausa en UI References. Visualiza los sprites necesarios en el Sprite Editor.

2. Creación de la imagen base: En el panel de UI, haz clic derecho para crear una nueva imagen que representará la pantalla de pausa. Nombrarla de forma coherente ayuda a mantener la organización del proyecto, por ejemplo, UI Pause.

3. Establecer el color de fondo: El color de esta imagen debería coincidir con la pantalla de inicio para mantener una estética coherente. Copia el color de UI Start Screen y aplícalo a UI Pause.

¿Cómo integrar el contenedor central?

El panel central es fundamental, pues contendrá los elementos interactivos, como botones y títulos. Aprende a configurarlo correctamente:

1. Crear el contenedor: Dentro de UI Pause, añade una nueva imagen y llámala Container. Arrastra la imagen Grey Button desde tu carpeta de Sprites para usarla como fondo.

2. Ajustes de imagen: Selecciona el tipo de imagen como "Slice" y ajusta el tamaño mientras presionas Alt para conservar las proporciones deseadas.

¿Cómo adicionar elementos internos?

Para añadir títulos y botones, un Vertical Layout Group simplificará este proceso, asegurando un diseño ordenado y alineado.

1. Agregar un layout vertical: Al contenedor añade un grupo de diseño vertical para organizar los elementos en un orden ascendente. También, aplica un Content Size Filter para ajustar los elementos en función del tamaño preferido.

2. Incorporar el título: Usa TextMesh Pro para el título y llama a este elemento Title.

3. Botones de interacción: Copia los botones necesarios desde la interfaz de menú de inicio (Start Menu). Asegúrate de arrastrarlos al contenedor adecuadamente.

¿Cómo estilizar el texto y los botones?

Detente un momento para personalizar el estilo del texto y botones. Este paso es crucial para asegurar que sean fáciles de leer y visualmente atractivos.

• Estilo del título: Configúralo para que diga "pausa", centrado, con fuente Kenny Blocks. Usa el modo Auto Size para ajustarlo automáticamente con un tamaño máximo de fuente de 200.

• Botones personalizados: Debes diseñar un botón, nombrándolo Btn.Continue, eliminar su ícono, y ajustar el texto para que diga "Continue". Cambia el tamaño de la fuente para que se adapte correctamente.

¿Cómo finalizar el diseño?

Revisa los detalles finales para completar tu pantalla de pausa. Aquí es donde los ajustes de margen y espacio aseguran un diseño pulido.

1. Padding y Spacing: En el panel de Vertical Layout Group, ajusta el Padding en todos los lados para crear espacio alrededor de los bordes. Por ejemplo, añadir Padding Top de 70, y 75 en Left y Right.

2. Cambios en Btn.Exit: Cambia el color del botón y su texto según el diseño deseado. Utiliza el Yellow Button y pon el texto en marrón oscuro.

Una vez que hayas seguido todos estos pasos, tendrás una pantalla de pausa funcional y estilizada lista para integrarse en tu juego. No olvides agregar las lógicas necesarias para hacer que estos botones sean interactivos, lo cual se cubrirá en la siguiente lección. ¡Sigue creando y aprendiendo!