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.