Contenido del curso
El sistema de UI de Unity
- 4

Canvas y sus modos de renderizado en Unity
08:48 min - 5

El Rect Transform
11:45 min - 6

Componente de imagen
08:05 min - 7

Máscaras y efectos
04:16 min - 8

Texto en Unity con Text Mesh Pro
06:14 min - 9

Creando botones en nuestra interfaz
07:37 min - 10

Otros elementos de UI
05:32 min - 11

Auto layout
09:02 min - 12

Scroll views
05:21 min - 13

Controla grupos de UI con Canvas Group
02:58 min
Haciendo interfaces para el juego
- 14

Pantallas de UI para Safari Match en Unity
02:45 min - 15

Importar y configurar sprites UI en Unity
05:36 min - 16

Construye la Start Screen en Unity
12:31 min - 17

Animando el fondo con shader graph
12:16 min - 18

Agregando lógica a la pantalla de título
11:35 min - 19

Scroll view de selección de niveles en Unity
10:47 min - 20

Genera lista de niveles con prefabs en Unity
13:23 min - 21

Corrige bugs de UI antes de añadir más features
08:43 min - 22

Contador de puntos y pausa en Unity HUD
11:06 min - 23

Anima iconos con DOTween en Unity
Viendo ahora - 24

Pantalla de pausa en Unity con Layout Group
07:42 min - 25

Pantalla de pausa con reseteo de escena en Unity
09:37 min - 26

Rediseño visual de la pantalla Game Over en Unity
07:47 min - 27

Pantalla de opciones con layouts en Unity
11:36 min - 28

Implementación de la pantalla de configuración
12:46 min - 29

Interfaces de Unity que parecen juegos profesionales
02:41 min
Anima iconos con DOTween en Unity
Resumen
Cuando desarrollas un juego en Unity, el feedback visual marca la diferencia entre una experiencia genérica y una memorable. Aquí vas a aprender a formatear el contador de puntos con ceros a la izquierda y a animar el ícono de estrella usando DOTween, dos detalles que elevan la calidad percibida de tu interfaz de gameplay.
¿Cómo formatear los puntos con ceros a la izquierda en Unity?
El primer ajuste es estético, pero impacta mucho la lectura del HUD. En vez de mostrar un número simple cuando el jugador hace un match, queremos que el contador siempre tenga al menos cinco dígitos visibles, con ceros precediendo al valor real.
Dentro del script UIPoints, en la línea donde asignas el valor a pointsLabelText, agregas el formato D5 al método ToString. Esto le indica a C# que convierta el entero a texto con un mínimo de cinco dígitos, rellenando con ceros a la izquierda cuando haga falta.
¿Qué hace el formato D5 en ToString? Convierte un número entero a texto forzando un mínimo de 5 dígitos. Si el valor es 42, lo muestra como 00042. Es útil para contadores de puntaje y temporizadores.
Al probar el juego, verás que los ceros se mantienen visibles y solo se reemplazan a medida que el puntaje crece. Es un cambio de una línea con un resultado visual fuerte.
¿Cómo animar un ícono con DOTween cuando suben los puntos?
La idea es que la estrella vibre mientras el contador está aumentando, dando una señal clara al jugador de que algo está pasando. Para esto necesitas una referencia al RectTransform del ícono y la librería DOTween.
Referencia pública y posición original
En el script declaras public RectTransform icon para arrastrar la estrella desde el inspector. Dentro de la corrutina que aumenta los puntos, lo primero es guardar la posición de partida con var ogPosition = icon.anchoredPosition. Esa variable te permitirá devolver el ícono a su lugar exacto cuando termine la animación.
No olvides importar la librería al inicio del archivo:
csharp using DG.Tweening;
Configurar el shake con DoShakeAnchoredPosition
La animación se construye con un tween que sacude el ícono en su posición anclada. El método se llama DoShakeAnchoredPosition y recibe varios parámetros que controlan el efecto.
- Duración del shake: 0.25 segundos.
- Fuerza o intensidad del movimiento: 20.
- Vibrato o cantidad de vibración: 30.
- Curva de easing: Ease.InBounce.
El código queda así:
csharp var tween = icon.DOShakeAnchoredPosition(0.25f, 20, 30).SetEase(Ease.InBounce); tween.SetLoops(-1);
La función SetLoops con valor -1 repite la animación de forma infinita mientras los puntos siguen subiendo. Es la clave para que la estrella vibre durante todo el conteo y no solo en un frame.
Detener la animación y restaurar la posición
Una vez que la corrutina termina de aumentar los números, llamas a tween.Kill() para frenar el bucle infinito. Inmediatamente después, asignas icon.anchoredPosition = ogPosition para que la estrella regrese exactamente a donde estaba antes de la sacudida.
¿Para qué sirve SetLoops(-1) en DOTween? Hace que un tween se repita de forma infinita hasta que lo detengas manualmente con Kill. Es ideal para animaciones de feedback que duran mientras un evento está ocurriendo.
En la escena, arrastras el objeto de la estrella al campo icon del componente UIPoints en el inspector. Al jugar, cada match dispara la vibración, y el jugador recibe una confirmación visual inmediata de que está sumando.
¿Cómo conectar el botón de pausa a un script en Unity?
El último paso es preparar el botón de pausa para una funcionalidad que llegará después. Creas un nuevo script llamado UIInGame sin métodos Start ni Update, solo con una función pública vacía:
csharp public void PauseButtonPressed() { // Lógica futura de pausa }
Luego asignas ese componente al objeto UI In Game, renombras el botón a btnPause y, en su evento OnClick, arrastras el objeto y seleccionas PauseButtonPressed. La función está vacía por ahora porque la lógica real de pausa vivirá en el GameManager más adelante, pero la conexión ya quedó lista.
Por qué el feedback visual mejora la experiencia de juego
Formatear el puntaje con D5 y animar la estrella con DOTween son cambios pequeños en código, pero grandes en percepción. El jugador necesita señales constantes de que sus acciones tienen consecuencias, y una vibración de 0.25 segundos cumple ese rol mejor que un simple número que cambia.
Piensa en otros elementos de tus juegos donde puedas agregar este tipo de respuesta: botones que se escalan al presionarse, sonidos cortos al ganar monedas, partículas cuando un enemigo cae. Cada detalle suma a la sensación de que el mundo reacciona al jugador.
¿Qué animación de feedback agregarías tú a tu próximo proyecto?