Crea interfaces efectivas en Unity dominando el canvas, el rect transform, las anclas, el overflow y los efectos outline y shadow. Aprende a colocar textos, botones y sliders que escalan con la pantalla, mantienen legibilidad y respetan la estética visual del juego.
¿Qué es el canvas y por qué separar la UI del juego?
El heads up display agrupa etiquetas, botones, desplegables, sliders y scrolls. En Unity, todo vive dentro de un canvas y un sistema de eventos. El canvas es el “padre” donde se coloca la interfaz; el sistema de eventos detecta clics, drags y opciones del usuario. La UI “vive” en un espacio distinto y escala con la pantalla, así los menús permanecen donde los coloques.
- Crear elementos: botón derecho en la jerarquía > UI > texto, imagen, botón, slider, etc.
- El canvas es enorme respecto a la escena: se trabaja aparte y no cambia con el escenario.
- El Event System gestiona interacciones: clics, arrastres y selección.
- Ventaja clave: la interfaz permanece inmutable mientras el juego cambia.
¿Cómo crear y ver el canvas correctamente?
- Añade un Texto para el título.
- Doble clic en Canvas para encuadrarlo en la vista.
- Si un objeto “desaparece”, usa Reset para centrarlo.
- Cambia color del texto si no se ve sobre el fondo.
¿Cómo alinear rápido con rect transform?
- Usa el panel Rect Transform para alinear: arriba izquierda, centro, abajo, etc.
- Las anclas definen desde dónde se miden las coordenadas. En centro: coordenadas ~ 0,0.
- Al anclar arriba, la X puede quedar en 1 y la Y en un valor negativo (p. ej., −158) respecto al ancla.
- Atajos útiles:
- Shift: cambia el pivote.
- Alt: ajusta la posición.
- Pulsando Alt + Shift mueves pivote y posición a la vez.
¿Cómo posicionar elementos y ajustar el texto sin perder legibilidad?
Trabajar con anclas evita desplazamientos indeseados al cambiar resolución. Coloca el título (ej. “Space Man”) arriba y baja unos 100 puntos en Y para separarlo del borde. Ajusta tamaño, estilo y color sin perder control.
- Tamaño de fuente: si pones 60 y “desaparece”, no cabe en la caja.
- Dos opciones:
- Redimensionar la caja con el editor de rectángulos.
- Ajustar overflow del texto.
- Configuración de overflow:
- Horizontal/vertical con valores como “wrap” o “truncate”.
- Permite que el texto se salga para recolocar y luego volver al ajuste original.
- Centrado del texto: alinea vertical y horizontalmente dentro de su caja.
- Reposiciona con rect transform para mantener consistencia en cualquier resolución.
¿Qué ajustes prácticos aceleran el trabajo diario?
- Cambia color del texto de inmediato para comprobar visibilidad.
- Usa alineaciones predefinidas del rect transform para colocar en esquinas o centro.
- Mantén la UI alejada de la lógica del juego: te ahorra retrabajo cuando la escena cambia.
¿Cómo mejorar textos: fuentes TTF, outline, shadow y color picker?
La tipografía y los efectos aumentan la legibilidad y la coherencia visual. Puedes explorar Dafont (dafont.com) para encontrar fuentes “gratis para uso personal” o “uso comercial”. Ejemplos buscados: Metal Gear o Super Mario Bros.
- Descarga la fuente en formato TTF (“Text Type Font”).
- Impórtala a tu carpeta de Fuentes en el proyecto.
- Aplica la fuente arrastrándola al campo Font del texto (ej. “Spaceman”).
- Mejora la lectura con efectos UI:
- Outline: borde negro que separa del fondo.
- Shadow: sombra que refuerza contraste y volumen.
- Usa el cuentagotas del selector de color para muestrear tonos de tus sprites.
- Conserva una estética global sin paletas dispersas.
- Tinta el texto con el color exacto pensado por el diseñador.
¿Qué trucos evitan textos ilegibles?
- Añade outline y shadow si el fondo cambia o es complejo.
- Ajusta grosor del borde para no “aplastar” la fuente.
- Verifica contraste en varias resoluciones y fondos.
¿Tienes una fuente favorita o una combinación de outline y shadow que funcione bien con tu juego? Comparte tus ejemplos y cuéntanos cómo mantienes la estética de tu UI en Unity.
