HTML5 Game Development by Example Beginners Guide, Second Edition
Makzan
- Editorial
- Packt
- Año
- 2015
- Páginas
- ~354
- Nivel
- Básico
De qué trata
Segunda edición (2015) de la guía para principiantes de Makzan (Seng Hin Mak), desarrollador y diseñador de juegos que enseña en Hong Kong y Macao. Enseña a crear juegos para el navegador con HTML5, CSS3 y JavaScript construyendo varios títulos completos desde cero. Está dirigida a diseñadores y desarrolladores web con una base en HTML, CSS y JavaScript que quieren dar el salto al desarrollo de juegos sin plugins.
Tras una introducción a HTML5 y sus capacidades para juegos (canvas, audio y video), el libro recorre distintas técnicas: juegos basados en el DOM con jQuery (posicionamiento, entrada de ratón, marcador y separación entre datos y vista), animaciones y transformaciones 3D con CSS3, la API de dibujo de Canvas, sprite sheets, capas y técnicas avanzadas de canvas, efectos de sonido y música con el elemento audio, guardado persistente de datos con Local Storage, comunicación en tiempo real con WebSockets para juegos multijugador y simulación física con el motor Box2D. También explica cómo publicar los juegos en servicios de hosting estático.
El aprendizaje se organiza alrededor de proyectos pequeños pero completos, con el formato de la serie Beginner's Guide (secciones «manos a la obra», cuestionarios y retos). Su punto fuerte es mostrar varias formas de hacer juegos en la web (DOM, CSS3 y Canvas) antes de recurrir a un motor. Lo que deja fuera: no usa frameworks como Phaser o PixiJS, y el código es anterior a la adopción generalizada de ES6. Para la parte multijugador conviene tener nociones básicas de un servidor con Node.js.
- HTML5 Canvas
- jQuery
- DOM
- CSS3 animaciones
- Sprite sheets
- Audio HTML5
- Local Storage
- WebSockets
- Multijugador
- Box2D
- Despliegue de juegos
¿Cómo enseña?
Con proyectos
- ✓ Incluye ejercicios
- ✓ Incluye proyectos
Proyectos
Ping Pong
Juego basado en el DOM con jQuery que introduce el posicionamiento de elementos, la entrada de ratón, el marcador y la separación entre los datos del juego y la vista.
Juego de memoria con cartas
Juego de emparejar cartas construido con transformaciones y animaciones CSS3, incluido el volteo 3D de las cartas.
Untangle
Rompecabezas en Canvas en el que hay que desenredar líneas arrastrando nodos; sirve para practicar la API de dibujo y, en el capítulo siguiente, técnicas avanzadas de canvas.
Juego musical
Juego que usa el elemento audio de HTML5 para sincronizar música y efectos de sonido con la interacción del jugador.
Juego multijugador de dibujar y adivinar
Juego en tiempo real en el que un jugador dibuja y los demás adivinan, comunicados mediante WebSockets.
Juego de coches con física
Juego en Canvas que usa el motor físico Box2D para simular el movimiento del vehículo y las colisiones.
