En este capítulo, aprenderemos los conceptos básicos de animación en el canvas. La animación es un componente esencial para crear juegos, ya que permite el movimiento de objetos y una experiencia visual dinámica. Usaremos el método requestAnimationFrame para crear animaciones fluidas y optimizadas.

Concepto de requestAnimationFrame

Para animar en canvas, se utiliza el método requestAnimationFrame, que permite ejecutar una función repetidamente en intervalos específicos, ideal para mantener el rendimiento alto en animaciones. Este método sincroniza las animaciones con la velocidad de actualización de la pantalla, brindando una experiencia visual más fluida.

Crear un Ciclo de Animación

Veamos cómo crear un ciclo básico de animación que actualiza la posición de un cuadrado en el canvas.

javascript

Control de la Velocidad de Animación

Podemos ajustar la velocidad de la animación modificando el incremento de la variable de posición, en este caso x. Por ejemplo, si aumentamos x en valores más altos, el objeto se moverá más rápido.

javascript

Crear Animaciones Bidimensionales

Para crear movimientos en dos direcciones, simplemente añadimos una segunda variable para el eje Y. En este ejemplo, haremos que el cuadrado se mueva en diagonal.

javascript

Ejercicio: Crear una Animación Compleja

Intente crear una animación donde un círculo se mueva en una trayectoria circular. Para esto, puede usar funciones trigonométricas para calcular las posiciones x e y en base a un ángulo que se incrementa.

javascript

Conclusión

En este capítulo, hemos explorado cómo animar objetos en el canvas, desde movimientos lineales hasta trayectorias bidimensionales más complejas. La animación es una técnica esencial para los juegos y permite crear una experiencia visual atractiva y dinámica.