Interfaz de usuario y feedback visual en Construct

Qué es la UI (Interfaz de Usuario) y por qué importa

La UI es la capa de información y control que el jugador ve y usa: marcador, vida, energía, iconos, botones, menús y mensajes. En Construct, una UI bien diseñada cumple dos objetivos: informar (qué está pasando) y guiar (qué puede hacer el jugador). Para lograrlo, conviene separar la UI del mundo del juego, mantenerla legible en distintas resoluciones y añadir feedback visual (partículas, flashes, sacudidas de cámara, cambios de color/animación) que comunique estados sin necesidad de texto.

Arquitectura recomendada: capa UI separada y anclada

1) Crea una capa exclusiva para UI

• En tu Layout, crea una capa llamada UI y colócala por encima de las capas del juego.
• En las propiedades de la capa UI, activa Parallax a 0,0 para que no se mueva con la cámara (si tu juego usa scroll/cámara).
• Si usas efectos visuales en el mundo (blur, tint, etc.), aplícalos a capas del juego, no a UI, para mantener la interfaz nítida.

2) Ancla elementos a la pantalla (no al mundo)

Para que la UI se mantenga en las esquinas o centrada aunque cambie la resolución, usa el comportamiento Anchor en cada elemento UI (textos, iconos, botones). Ejemplos típicos:

• Vida: anclada arriba-izquierda.
• Monedas/puntuación: arriba-derecha.
• Botón pausa: arriba-derecha o arriba-centro.
• Mensajes (Game Over): centrados.

Textos dinámicos: HUD en tiempo real

Cuándo usar Text vs SpriteFont

• Text: rápido de configurar, ideal para prototipos y UI simple.
• SpriteFont: mejor rendimiento/consistencia visual, útil si quieres estética pixel-art o fuentes personalizadas.

Ejemplo: mostrar puntuación, vida y energía

Supongamos que tienes variables globales: Score, HP, Energy. Crea tres objetos de texto en la capa UI: txtScore, txtHP, txtEnergy. Luego, en eventos, actualiza su contenido.

Every tick -> Set txtScore.Text to "Score: " & Score
Every tick -> Set txtHP.Text to "HP: " & HP
Every tick -> Set txtEnergy.Text to "Energy: " & int(Energy)

Consejo: si te preocupa el coste de Every tick, actualiza solo cuando cambie la variable (por ejemplo, al sumar puntos o al recibir daño). Esto mantiene la UI eficiente y evita trabajo innecesario.

Barras de vida/energía: dos métodos prácticos

Método A: Barra con Sprite + recorte (clipping) o escalado

Crea una barra con dos sprites: barBG (fondo) y barFill (relleno). Colócalos en la capa UI. Para representar el porcentaje, ajusta el ancho del relleno.

Continúa en nuestra aplicación.

• Escuche el audio con la pantalla apagada.
• Obtenga un certificado al finalizar.
• ¡Más de 5000 cursos para que explores!

O continúa leyendo más abajo...

Descargar la aplicación

• Define variables: HP y HPMax.
• Calcula porcentaje: HP / HPMax.

Every tick -> Set barFill.Width to barBG.Width * (HP / HPMax)

Si tu barra debe “vaciarse” desde la derecha, además ajusta la posición X del relleno para que el borde izquierdo quede fijo.

Método B: Objeto Progress Bar (si lo prefieres)

Construct incluye objetos tipo barra de progreso (según versión/plantillas). Si lo usas, configura Minimum, Maximum y actualiza Value con tus variables. Es rápido para UI estándar, aunque menos flexible visualmente que sprites personalizados.

Iconos y estados: comunicar sin texto

Los iconos ayudan a reducir carga cognitiva. Ejemplos:

• Icono de llave: indica si el jugador tiene una llave (HasKey).
• Icono de escudo: indica invulnerabilidad temporal (Invulnerable).
• Icono de energía: parpadea cuando está baja.

Implementación típica: alternar visibilidad o animación según variables.

Every tick (or On variable changed) -> Set icoKey.Visible to HasKey
Every tick -> If Energy <= 20 -> Set icoEnergy.Animation to "warning" else set to "normal"

Botones y menús: principal, pausa, opciones y game over

Buenas prácticas de interacción

• Usa Button (objeto UI) o sprites con eventos de ratón/touch.
• Define estados visuales: normal, hover, pressed, disabled.
• Aumenta el área clicable (hitbox) si el botón es pequeño (especialmente en móvil).

Estructura recomendada con grupos de eventos

Organiza tu lógica de UI con grupos para activarlos/desactivarlos:

• grpMenuMain
• grpPause
• grpHUD
• grpGameOver

Así puedes controlar qué interacciones están disponibles en cada estado del juego.

Escalado y múltiples resoluciones: mantener UI legible

1) Ajustes de proyecto y viewport

En Construct, el escalado depende de la configuración del proyecto (tamaño del Layout, tamaño de ventana, modo de escalado). El objetivo es que el juego se adapte sin deformar la UI ni dejarla fuera de pantalla.

• Define un tamaño base (por ejemplo 1280x720) como referencia.
• Usa un modo de escalado que preserve proporción (letterbox) o que ajuste a pantalla según tu diseño.
• Evita colocar UI “a ojo” en posiciones absolutas sin Anchor.

2) Patrón práctico: UI con Anchor + márgenes

Coloca elementos con márgenes consistentes (por ejemplo 24 px) desde los bordes. Con Anchor, esos márgenes se mantienen en distintas resoluciones. Para textos, usa tamaños que sigan siendo legibles en pantallas pequeñas; si tu juego se verá en móvil, prueba con fuentes más grandes y menos información simultánea.

3) Escalado de UI por factor (opcional)

Si necesitas que toda la UI escale proporcionalmente, puedes agruparla visualmente (contenedor) o aplicar un factor de escala a varios elementos. Un enfoque común es definir una variable global UIScale y aplicarla a tamaños/escala de objetos UI en el inicio del Layout.

On start of layout -> Set UIScale to (ViewportHeight / 720)
On start of layout -> Set txtScore.Scale to UIScale
On start of layout -> Set barBG.Scale to UIScale
On start of layout -> Set barFill.Scale to UIScale

Ajusta la fórmula según tu referencia (720 en este ejemplo). Si tu UI se ve demasiado grande/pequeña en ciertos dispositivos, limita el rango con un mínimo/máximo.

Feedback visual: hacer que el juego “responda”

Partículas: impactos, recogidas y estados

Las partículas comunican acciones: golpe, explosión, curación, recogida de moneda. Puedes usar el objeto Particles o sprites animados. Recomendación: crea efectos reutilizables y dispara en el momento del evento.

• Daño recibido: chispas rojas en el jugador.
• Curación: partículas verdes ascendentes.
• Recogida: destello breve + partículas pequeñas.

On player takes damage -> Spawn Particles at Player (set color red)
On coin collected -> Spawn Particles at Coin (set color yellow)

Flashes y cambios de color: feedback inmediato

Un flash rápido (tint/opacity) es una señal clara de daño o invulnerabilidad. Implementación típica:

• Al recibir daño: el jugador parpadea (alternar opacidad) durante 0.3–0.6 s.
• Al estar en estado “power”: cambia el tono o añade un efecto de brillo.

On player takes damage -> Set Player to Flashing state
Flashing state: Every 0.05s -> Toggle Player.Opacity between 40 and 100
After 0.5s -> Stop flashing, set Opacity to 100

Vibración de cámara (camera shake)

La sacudida de cámara refuerza impactos fuertes. Úsala con moderación para no marear. Puedes implementarla con un comportamiento/efecto de cámara si lo tienes disponible, o moviendo la cámara ligeramente durante unos frames y volviendo al centro.

• Daño fuerte: shake corto (0.15 s) con intensidad media.
• Explosión grande: shake un poco más largo, pero no constante.

Animaciones de UI: comunicar cambios de estado

La UI también puede “reaccionar”:

• Cuando sube la puntuación: el texto hace un pequeño “pop” (escala 1.0 → 1.15 → 1.0).
• Cuando la vida está baja: la barra late (pulsación) o cambia a rojo.
• Cuando no hay energía: el icono se desatura y el botón de habilidad se desactiva.

On Score increased -> Set txtScore.Scale to 1.15
After 0.1s -> Set txtScore.Scale to 1.0
Every tick -> If HP/HPMax < 0.25 -> Set barFill color to red else green

Ejercicio guiado: menú principal + pausa + HUD en tiempo real

Objetivo del ejercicio

Crearás un flujo completo de UI:

• Un menú principal con botón Jugar.
• Un sistema de pausa con overlay y botón Reanudar.
• Un HUD que refleje variables del juego en tiempo real (vida, energía, puntuación).

Paso 1: Variables y estructura de estados

Crea variables globales:

• Score (number) inicia en 0
• HPMax (number) inicia en 100
• HP (number) inicia en 100
• EnergyMax (number) inicia en 100
• Energy (number) inicia en 100
• GameState (text) inicia en "menu"

También puedes usar un booleano IsPaused, pero GameState te permite manejar más pantallas (menu, playing, paused, gameover).

Paso 2: Layout de menú principal

• Crea un Layout Menu.
• Crea una capa UI (parallax 0,0).
• Añade un fondo (sprite o tiled background) y un botón btnPlay (Button o sprite).
• Si usas sprite como botón: crea animaciones normal, hover, pressed.

Eventos en Menu:

On start of layout -> Set GameState to "menu"
On btnPlay clicked/tapped -> Set GameState to "playing"
On btnPlay clicked/tapped -> Go to layout "Game"

Paso 3: Layout de juego con HUD

Crea un Layout Game con:

• Capa(s) del mundo del juego.
• Capa UI encima (parallax 0,0).
• HUD: txtScore, barHP (BG + Fill), barEnergy (BG + Fill), iconos opcionales.
• Botón btnPause anclado arriba-derecha.

Configura Anchor:

• txtScore arriba-derecha
• barHP arriba-izquierda
• barEnergy arriba-izquierda (debajo de vida)
• btnPause arriba-derecha

Eventos HUD (actualización):

Every tick -> Set txtScore.Text to "Score: " & Score
Every tick -> Set barHPFill.Width to barHPBG.Width * (HP / HPMax)
Every tick -> Set barEnergyFill.Width to barEnergyBG.Width * (Energy / EnergyMax)

Paso 4: Overlay de pausa (menú dentro del juego)

En la capa UI del Layout Game, crea:

• Un panel semitransparente pauseOverlay (sprite con opacidad 50–70).
• Un texto txtPaused (por ejemplo “Paused”).
• Botones: btnResume, btnOptions (opcional), btnQuit (volver al menú).

Inicialmente, ponlos invisibles.

On start of layout -> Set GameState to "playing"
On start of layout -> Set pauseOverlay.Visible to false
On start of layout -> Set txtPaused.Visible to false
On start of layout -> Set btnResume.Visible to false
On start of layout -> Set btnQuit.Visible to false

Al pausar:

On btnPause clicked/tapped -> Set GameState to "paused"
On GameState = "paused" -> Set pauseOverlay.Visible to true (and other pause UI visible)
On GameState = "paused" -> Set timescale to 0

Al reanudar:

On btnResume clicked/tapped -> Set GameState to "playing"
On GameState = "playing" -> Set pauseOverlay.Visible to false (and other pause UI invisible)
On GameState = "playing" -> Set timescale to 1

Nota importante: si pones timescale a 0, algunos comportamientos/animaciones pueden detenerse (lo cual es deseable), pero asegúrate de que los clics del menú de pausa sigan funcionando. Si algo deja de responder, alternativa común: no usar timescale 0, sino desactivar controles del jugador y lógica del mundo (grupos de eventos del gameplay) y mantener UI activa.

Paso 5: Game Over con feedback y reinicio

Crea un grupo grpGameOver con un panel y botones (Reintentar / Menú). Actívalo cuando HP <= 0.

If HP <= 0 and GameState = "playing" -> Set GameState to "gameover"
On GameState = "gameover" -> Show game over UI
On GameState = "gameover" -> Set timescale to 0

Añade feedback al morir:

• Flash rojo en pantalla (overlay breve).
• Partículas en el jugador.
• Shake de cámara corto.

Paso 6: Feedback conectado a variables del HUD

Vincula estados del HUD a umbrales:

• Vida < 25%: barra roja + pulsación.
• Energía < 15%: icono parpadea.
• Al ganar puntos: pop del texto de score.

Every tick -> If (HP/HPMax) < 0.25 then set barHPFill color red else green
Every tick -> If (Energy/EnergyMax) < 0.15 then set icoEnergy.Opacity to 50 + 50*sin(time*10) else set to 100

Si no quieres usar fórmulas, puedes alternar opacidad con un temporizador (Wait) o con un evento Every X seconds.

Paso 7: Checklist de verificación (pruebas rápidas)