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?