Diseña juegos HTML5 con Box2dWeb

En Genbeta Dev ya empezamos a ver cómo usar Box2dWeb de forma básica, teniendo en cuenta que el motor de física solo representa un debug. Ahora veremos cómo interpretar los datos de nuestro escenario de Box2dWeb y representarlo de forma visual a través de un Canvas (aunque podemos hacerlo de cualquier otra forma o simplemente usar los datos para otros fines).

En el siguiente ejemplo vemos el escenario recreando la simulación en tiempo real que creamos anteriormente pero sumándole dos visualizaciones más: una en blanco y negro y otra con imágenes (asemejándose a una máquina de hacer palomitas "hiper-realista"). Pulsando se generan nuevas bolas o palomitas.

Simulación

Lo primero es repasar lo que vimos en el anterior artículo: generamos el "mundo", creamos los límites del escenario y una plataforma y por último al pulsar en la visualización se generaba una bola que podía salir volando hacia ambos lados de forma aleatoria.

Este es el código sobre el que seguiremos trabajando para visualizar primero el escenario de forma plana y posteriormente con palomitas. Daremos por hecho que tenemos dos Canvas (canvasDebug y caanvasView).

var  world,
    walls = [],
    balls = [],
    canvasDebug = document.getElementById('canvasDebug'),   // Canvas de Debug
    canvasView = document.getElementById('canvasView');     // Canvas de visualización
      
    // Atajos Box2dWeb
var b2Vec2 = Box2D.Common.Math.b2Vec2,
    b2BodyDef = Box2D.Dynamics.b2BodyDef,
    b2Body = Box2D.Dynamics.b2Body,
    b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
    b2World = Box2D.Dynamics.b2World,
    b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
    b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
    b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
      
world = new b2World(new b2Vec2(0,20), true);    // Nuestro mundo
  
// Tamaño de Canvas
_cw=canvasDebug.width,
_ch=canvasDebug.height;
  
// Muros
var wallsDimensions =[
    {x:_cw/2,    y:  0,      w:_cw/2, h:  1}, // Superior
    {x:_cw/2,    y:_ch,       w:_cw/2, h:  1}, // Inferior
    {x:  0,     y:_ch/2, w:  1,      h:_ch},  // Izquierda
    {x:_cw,      y:_ch/2, w:  1,      h:_ch},  // Derecha
    {x:_cw/2,    y:212.5,    w:100,      h: 22.5}    // Muro de la parte inferior
];
  
// Generamos los muros
for(var i=0;i

Ahora en nuestro Canvas de debug deberíamos de tener la simulación ejecutándose. Es recomendable cuando se está probando que la visualización se genera correctamente poner el Canvas de debug encima del de pruebas.

Diseño básico

Ahora que disponemos de los datos suficientes para recrear la situación vamos a cambiar una parte del script, que es la del intervalo. Ahora en cada paso del intervalo generaremos de nuevo toda la visualización mediante Canvas, creando rectángulos y círculos (si no sabéis como funciona Canvas podéis ver esta pequeña introducción).

setInterval(function(){
    world.Step(1 / FPS, 10, 10);
    world.DrawDebugData();
    world.ClearForces();
                /*
                 *  En esta parte del anterior
                 *  script añadiremos lo siguiente
                 */
},1000/FPS);

Lo primero es seleccionar el contexto de 2D del Canvas y posteriormente limpiaremos su contenido dibujando un rectángulo blanco.

var ctx = canvasView.getContext("2d");
  
// Fondo
ctx.fillStyle='#ffffff';    // Fondo blanco
ctx.fillRect(0,0,_cw,_ch);    // Rectángulo con el ancho y el alto del Canvas

Ahora generaremos los muros sin tomar los datos del motor, ya que son estáticos podemos ahorrarnos pedir esos datos y ahorrar carga al navegador. Simplemente hacemos un bucle que procesa el objeto que usamos anteriormente para generar los muros (que disponíamos de posición y dimensiones).

// Muros
for(var i=0;i

Ahora es cuando tomamos los datos de la simulación, como la posición de las bolas y su radio. Las generaremos mediante un arco de Canvas de 360 grados (un círculo), en la posición y con el radio que nos proporciona Box2dWeb.

// Visualizando las bolas
for(var i=0;i

Este es el resultado.

Los datos para las bolas los hemos tomado de un array que se rellena, al añadir una nueva bola, con el objeto de la simulación. Este objeto contiene distintas funciones que te devuelven datos relevantes sobre la bola o permite cambiar su configuración. Para conocer los diversos datos o funciones que contiene es recomendable explorar el objeto mediante herramientas de desarrollo como las de Chrome o FireBug, ya que pocas documentaciones al respecto existen para Box2dWeb (para Box2dFlash encontramos más y es similar el funcionamiento).

Visualización con imágenes

En la imagen superior vemos como va a ser la disposición de las distintas capas de imágenes (sin contar las palomitas). Crear la visualización no es muy diferente a como lo hemos hecho antes. Empezamos por la imagen de fondo.

var ctx = canvasView.getContext("2d");
  
// Fondo
var img = new Image();
img.src = "img/fondo.jpg";  // Ruta de la imagen
ctx.drawImage(img, 0, 0);   // Dibujamos la imagen

En este punto ya no generamos los muros, aunque existen en la simulación no hace falta representarlos ya que usamos varias imágenes para aparentar los muros. Primero vamos a establecer la imagen de la cacerola y del cartel de popcorn, que es el que simula el muro ancho.

// "popcorn"
var img = new Image();
img.src = "img/popcorn.png";
ctx.drawImage(img, 0, 0);

Ahora generaremos las palomitas a partir de una imagen, que es ligeramente más grande que el círculo para simular que se tocan las palomitas entre si. En este caso tomamos de la simulación el dato del ángulo de la bola, para así rotar la palomita y parezca que tiene un movimiento real.

// Generando las palomitas
for(var i=0;i

Por último añadimos la imagen del marco de la máquina de palomitas y el reflejo del cristal.

// Marco y reflejo
var img = new Image();
img.src = "img/front.png";
ctx.drawImage(img, 0, 0);

El resultado es el siguiente.

También podéis ver todo el código en GitHub.

Resumen

Box2dWeb es muy potente y no solo se limita a este tipo de cosas, al proporcionar solo los datos se le puede dar usos como el de hacer pequeños cálculos de física o recrear un movimiento de rebote para un slider (aunque como es lógico este será un ejemplo muy poco útil). Se puede realizar, además, cualquier tipo de diseño, gracias a las posibilidades de Canvas y buscando un poco se encuentran juegos realmente interesantes realizados con este motor.

En Genbeta Dev | Introducción a Box2dWeb Más información | Box2dWeb Código | GitHub