Siguiendo con los eventos de Code&Beer en las oficinas, ayer se habló sobre desarrollo de video juegos con HTML5 y JavaScript.
Enfoque
Iniciamos con una introducción al concepto de desarrollo de video juegos, donde hablamos de los siguientes puntos:
- Tag <canvas> como lienzo de dibujo en HTML5
- Bucle principal de un juego
- Sprites y Sprite Sheets
- Double buffering para optimización de performance
Los puntos anteriores sirvieron como puntapié de las actividades mínimas necesarias que involucra la creación de un video juego.
El objetivo
Mediante la utilización de un micro framework existente y algunos sprites, nos pusimos en la tarea de crear un juego simple, con una base común, pero aplicando cada uno de los asistentes sus propias variantes.
El micro framework
Este micro framework, con solo 88 líneas de JavaScript, fue el encargado de manejar la lógica principal del juego. Proveer el lienzo de dibujo a los distintos objetos del juego, manejar el bucle de dibujo e interactuar con el mecanismo de double buffering.
Un poco de la estructura del framework a continuación:
this.init = function (canvasName) {
canvas = document.getElementById(canvasName);
context = canvas.getContext(“2d”);
…
setInterval(runGame, 1000 / 30);
}
function runGame() {
…
backBuffer.fillStyle = “rgb(255,255,255)”;
backBuffer.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < gameObjects.length; i++) {
gameObjects[i].update(delta);
if (gameObjects[i].draw && gameObjects[i].visible()) {
…
}
}
context.drawImage(backBufferCanvas, 0, 0);
};
Los objetos del juego
Cada entidad en el juego fue representada por un objeto que manejaría el micro framework. Para respetar la estructura y funcionamiento, cada objeto necesitaría 4 funciones (Init, Visible, Update y Draw).
function Cavernicola() {
var self = this;
var cavernicola = new Image();
cavernicola.src = “prota.png”;
…
…
this.init = function() {
//Inicializamos el objeto
…
}
this.visible = function() {
return true;
}
this.update = function(delta) {
//Lógica de actualización del objeto
…
}
this.draw = function(context) {
//Se dibuja el objeto en el lienzo de dibujo
…
}
}
Pueden descargar el código desde esta dirección.
