Bucle de animación de videojuegos

por

En este artículo vamos a explicar cómo crear un bucle de animación de videojuegos de forma fluida y creando experiencias de juego agradables. En el mundo de los videojuegos, una animación fluida es esencial para crear buenas experiencias de juego en los jugadores. Para lograr esto, se utiliza la técnica llamada «bucle o loop de animación» lo que da pie a las famosas siglas fps, Fotogramas Por Segundo o Frames Per Second en Inglés.

Estas siglas (fps) son la cantidad de veces que se actualiza el videojuego por segundo, o lo que es lo mismo, la cantidad de veces que se ejecuta el bucle de animación. Actualmente existen muchos juegos basados en navegadores web y se ha creado un nuevo método de implementar este bucle de animación en HTML. En este artículo me centraré en explicar este nuevo método y no mencionaré las técnicas antiguas realizadas con setInterval().

Bucle de animación HTML5 Canvas en videojuegos

En HTML5 se ha desarrollado un método que permite crear un bucle a 60 fps estables, componente fundamental en el desarrollo de videojuegos. Dentro de este ciclo o bucle continuo es donde ejecutaremos nuestro videojuego que mostraremos en el lienzo <canvas> a 60 fotogramas por segundo.

En esencia, el bucle de animación es el motor del videojuego, encargado de mantener todo en movimiento y sincronizado, desde la lógica del juego hasta la representación visual en pantalla. Básicamente se trata de borrar el lienzo, dibujar todos los graficos y preparar el juego para el siguiente fotograma.

Estructura HTML y Estilo CSS

Ahora, vamos ver cómo se implementa este bucle universal de animación en un contexto de desarrollo web utilizando HTML5, Canvas y JavaScript. La primera parte es crear una página web sencilla añadiendo nuestra etiqueta <canvas>, si quieres saber más sobre esta etiqueta puedes leer el artículo donde hablo sobre el tag canvas.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bucle universal de animación</title>
  <style>
    body {
      text-align: center;
    }
    canvas {
      width: 60%;
      margin: auto;
      display: block;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <h1>Bucle universal de animación</h1>
  <canvas id="miCanvas" width="800" height="600">Canvas no soportado</canvas>
</body>
</html>

En esta sección, creamos la estructura básica del documento HTML y aplicamos algunos estilos CSS para centrar el contenido y darle un aspecto visual agradable. El elemento <canvas> se utiliza para dibujar gráficos en la página.

Hasta aquí simplemente se ha habilitado una «ventana gráfica» de 800×600 píxeles que hemos rodeado con un borde negro para visualizarla. Ahora vamos a ver cómo dibujar en ella con JavaScript.

JavaScript y el bucle de animación de videojuegos

Justo debajo de nuestra etiqueta <canvas> debemos añadir el siguiente código JavaScript que provocará la animación de 10 círculos rellenos rebotando por el Canvas.

  <script>
    // Obtenemos datos del Canvas
    let canvas = document.getElementById("miCanvas");
    let ctx = canvas.getContext("2d");

    // Dibuja un cí­rculo relleno
    function drawCircle(data) {
      ctx.fillStyle = data.color;	
      ctx.beginPath();			
      ctx.arc(data.x + data.radius, data.y + data.radius, data.radius, 0, 2 * Math.PI);
      ctx.fill();	
    }      

    // Creamos un listados de datos aleatorios tipo "círculo"
    let items = [];
    for (let i=0; i<10; i++) {
      let radius = 25 + Math.random() * 25;
      items.push({
        x: canvas.width/2,
        y: canvas.height/2,        
        radius: radius,
        width: radius * 2,
        height: radius * 2,
        color: "#" + Math.random().toString(16).substr(-6),
        speedY: 5 - Math.random() * 10,
        speedX: 5 - Math.random() * 10
      });   
    } 
  
    // Bucle universal de animación
    function animateScene() {	
      ctx.clearRect(0, 0, canvas.width, canvas.height);    
      for (let i=0; i<items.length; i++) drawCircle(items[i]);  
      for (let i=0; i<items.length; i++) {
        items[i].x += items[i].speedX;
        items[i].y += items[i].speedY;	              
        if (items[i].x < 0 || (items[i].x + items[i].width) > canvas.width) items[i].speedX = -items[i].speedX;
        if (items[i].y < 0 || (items[i].y + items[i].height) > canvas.height) items[i].speedY = -items[i].speedY;
      }   
      requestAnimationFrame(animateScene);
    }

    // Activamos la animación
    animateScene();	
  </script>

En este bloque de código JavaScript es donde se implementan los gráficos y su animación mediante el bucle universal de animación. Su funcionamiento es el siguiente:

  • Obtenemos el contexto del Canvas para poder dibujar en él en las variables canvas y ctx
  • Definimos una función drawCircle(data) que toma un objeto data que contiene la información necesaria para dibujar un círculo en el Canvas. Lee el artículo Círculos en HTML5 Canvas para saber más sobre cómo dibujar círculos.
  • Creamos un listado de datos aleatorios que representan círculos en el Canvas. Cada círculo tiene una posición, tamaño, color y velocidad aleatorios que utilizaremos para animarlos.
  • Definimos la función animateScene() que será nuestro bucle de animación y que ejecutaremos repetidamente utilizando requestAnimationFrame(). Esta es la forma en que se pueden ejecutar animaciones en HTML5 y Canvas.
  • Dentro de nuestro bucle de animación, primero borramos el Canvas, luego dibujamos todos los círculos y finalmente actualizamos sus posiciones para el siguiente fotograma. Es importante mantener siempre este orden y que el tiempo entre «borrado» y «dibujado» sea el menor posible.
  • Para activar la animación llamamos una primera vez a la función animateScene() y luego se ejecuta indefinidamente.

El resultado en un fotograma cualquiera del bucle de nimación podría ser algo parecido a esto:

Bucle de animación de videojuegos

Resumen del bucle de animación de videojuegos

En este artículo hemos explicado qué es el bucle universal de animación de videojuegos y cómo se implementa en un contexto de desarrollo web utilizando HTML5, Canvas y JavaScript. Con un ejemplo de código hemos visto paso a paso la creación de una escena animada con círculos en movimiento.

Si estás interesado en profundizar más sobre la animación o creación de videojuegos en un entorno web con JavaScript, puedes consultar más artículos de esta sección o mirar la página Videojuegos JavaScript donde muestro algunos de los juegos que se pueden hacer con las técnicas descritas en los libros que tengo publicados sobre Programación de Videojuegos.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario