HTML5 Canvas

Primera edición (O'Reilly, 2011) de la guía de Steve y Jeff Fulton, autores del blog de desarrollo de juegos 8bitrocket, sobre el elemento Canvas de HTML5 para crear aplicaciones interactivas y multimedia. Lleva el subtítulo Native Interactivity and Animation for the Web. Está pensada para desarrolladores de nivel intermedio que vienen de Flash, de Silverlight o simplemente de HTML y JavaScript, y quieren crear gráficos, animaciones y juegos nativos en el navegador. En 2013 salió una segunda edición ampliada.

Recorre la API 2D de Canvas a fondo: trazados y formas, estilos de relleno y de línea, transformaciones, la API de texto y el manejo de imágenes y mapas de bits. Después explica la animación con matemáticas y física básicas (movimiento, rebotes, gravedad, fricción y curvas) y la combinación de Canvas con los elementos video y audio de HTML5. La parte central está dedicada a los juegos: un marco básico reutilizable para varios juegos, el bucle de juego, la detección de colisiones y el paso del dibujo vectorial a gráficos con mapas de bits y hojas de tiles. Al final adapta las aplicaciones a iPhone con PhoneGap y se asoma a Canvas en 3D y a los juegos multijugador.

El hilo conductor es el desarrollo de juegos. Destaca Geo Blaster, un juego de naves al estilo Asteroids que primero se construye solo con trazados (Geo Blaster Basic) y luego se amplía con mapas de bits, hojas de tiles creadas en tiempo de ejecución y sonido (Geo Blaster Extended). Es muy práctico y abundante en código, ideal para quien quiere entender cómo funciona Canvas sin librerías intermedias. A cambio, es muy largo y en algunas partes reiterativo. Conviene saber que lo relativo a audio, móviles y 3D refleja el estado de 2011: hoy existen la Web Audio API, WebGL maduro y motores como Phaser o PixiJS.