Rediseñar la pantalla de Game Over en Unity es un ejercicio que combina ajustes visuales con buenas prácticas de UI. Aquí aprendes a transformar una pantalla funcional pero genérica en una interfaz coherente con el estilo de tu juego, usando imágenes sliced, vertical layout group y reconectando eventos de botones.

¿Cómo preparar el entorno antes de modificar la UI?

Antes de tocar la pantalla, conviene aislar el trabajo y tener referencias visuales claras a la mano.

El primer paso es abrir la imagen de referencia desde la carpeta UI Reference en el Sprite Editor. Esto te permite comparar lado a lado el diseño actual con el resultado esperado. Después, desactiva todas las pantallas del Canvas excepto la de Game Over para evitar que otros elementos interfieran.

¿Por qué desactivar otras pantallas en Unity? Porque el Canvas renderiza todos los elementos activos al mismo tiempo. Aislar la pantalla en la que trabajas evita superposiciones visuales y agiliza la edición.

¿Cómo aplicar fondos e imágenes sliced al contenedor?

El fondo y los contenedores son la base visual de cualquier pantalla de Game Over.

El color del fondo se ajusta hacia un tono más amarillo con menor opacidad para suavizar la pantalla. Luego, al container del contador de puntos se le añade un componente Image con el sprite grey button arrastrado a Source Image. El tipo sliced se mantiene por defecto, lo que permite escalar la imagen sin deformar sus bordes.

Dentro del vertical layout group del container, los valores de padding quedan así:

• Top: 80 píxeles.
• Bottom: entre 100 y 120 píxeles.
• Izquierda y derecha: 75 píxeles cada uno.

Estos márgenes alinean el contenido con la referencia y dan respiración visual a los elementos internos.

¿Qué fuente y color usar para el título Game Over?

El título cambia a la fuente Kenny Blocks y se le quita el estilo bold. El color se mueve del rojo puro hacia un naranja más cálido, y se ajustan tanto el line spacing como el tamaño hasta que coincida con la referencia.

¿Cómo estructurar el contador de puntos con un points container?

El contador de puntos necesita un fondo blanco con margen interno y el número centrado.

Para lograrlo, dentro del container creas un nuevo UI Image llamado points container. El elemento de texto points pasa a ser hijo de ese contenedor. La alineación se configura en stretch con posición cero en las cuatro direcciones, lo que hace que el texto ocupe todo el espacio del contenedor padre.

El texto arranca en cero, usa color naranja, fuente Kenny Blocks sin bold y queda centrado.

¿Qué hace el modo stretch en un RectTransform? Estira el elemento hijo para que ocupe el ancho y alto del padre, dejando los offsets en cero para un ajuste perfecto.

¿Cómo reutilizar botones existentes y reconectar su lógica?

Reutilizar componentes ya diseñados ahorra tiempo y mantiene consistencia visual entre pantallas.

En lugar de rediseñar los botones desde cero, copias los dos botones de UI Pause y los pegas dentro del contenedor de Game Over. Eliminas los botones antiguos Exit y Play Again, y verificas que los nuevos queden como hijos del contenedor. El espacio entre ellos se controla con la propiedad spacing del vertical layout group, no con un spacer manual.

El botón continue heredado se renombra a Play Again y se reduce el tamaño de su fuente.

¿Cómo reconectar los eventos de los botones nuevos?

Al eliminar los botones originales, también desaparecen las referencias a sus métodos. La reconexión se hace desde el Inspector:

1. En el botón continue, arrastra el objeto UI Game Over al campo de evento.
2. Selecciona el método Play Again Button Clicked desde UI Game Over.
3. En el botón Exit, repite el proceso seleccionando Exit Game Button Clicked.

Esta reconexión es indispensable porque los eventos OnClick en Unity se rompen cuando el objeto referenciado se elimina.

¿Cómo validar que la pantalla funciona en runtime?

La validación final pasa por reactivar todas las interfaces y probar el flujo completo del juego.

Después de dar play, recorres pantalla de inicio, selección de niveles, gameplay, pausa y Game Over. Verificas que el contador de puntos crezca, que el botón Play Again reinicie la partida y que Exit cierre el juego correctamente. Con estas cinco pantallas operativas, queda solo una más por construir.

¿Cuál crees que es la pantalla que falta para cerrar el flujo de UI? Déjame tu respuesta en los comentarios.