
Supercharged JavaScript Graphics
Raffaele Cecco
- Editorial
- O'Reilly
- Año
- 2011
- Páginas
- ~282
- Nivel
- Intermedio
De qué trata
Libro práctico de Raffaele Cecco, veterano desarrollador de videojuegos, sobre cómo crear aplicaciones web con mucha carga gráfica usando JavaScript, jQuery, DHTML y el elemento Canvas de HTML5, tanto en escritorio como en móviles. Se publicó en 2011, cuando HTML5 empezaba a consolidarse y todavía había que tener en cuenta navegadores como Internet Explorer 6. Está dirigido a programadores JavaScript de nivel intermedio con interés por los gráficos, las animaciones y los juegos.
Arranca con la optimización: perfilado, tablas de consulta, operadores de bits, desenrollado de bucles y cómo optimizar jQuery y las actualizaciones del DOM. Sigue con lo esencial del DHTML: sprites, temporizadores y tasa de fotogramas, y cómo convertir el código en un plugin de jQuery. Después trata el scroll, desde efectos solo con CSS hasta el scroll por fondo y por tiles con mapas creados en el editor Tiled, y las interfaces avanzadas con formularios HTML5, jQuery UI, Ext JS y un carrusel 3D hecho desde cero. La parte central explica los fundamentos de los juegos (bucle de animación, entrada de teclado, detección de colisiones), el dibujo y la animación en Canvas (con una comparación frente a SVG y Flash, dibujo recursivo y sprites) y la matemática de vectores para simulaciones físicas. Cierra con gráficos y paneles interactivos con las herramientas de visualización de Google, interfaces móviles con jQuery Mobile y empaquetado de aplicaciones Android con PhoneGap y Eclipse.
Es un libro de aprender haciendo: cada bloque culmina en ejemplos funcionales, entre ellos un clon de Space Invaders, un chat gráfico con WebSockets, simulaciones con vectores y un puzle para móviles. La reseña de I Programmer lo valora muy bien por lo claro y razonado. Hay que saber, eso sí, que buena parte de la tecnología ha envejecido: el soporte para IE6, Ext JS, las image charts de Google y PhoneGap con Eclipse ya no se usan, y hoy existen CSS3, requestAnimationFrame, WebGL y motores como Phaser. Sus ideas sobre sprites, bucles de juego, colisiones, vectores y rendimiento siguen siendo valiosas. Los capítulos finales se alejan algo del tema gráfico.
- HTML5 Canvas
- DHTML
- Sprites y animación
- jQuery y jQuery UI
- Optimización de rendimiento
- Scroll por tiles
- Desarrollo de juegos
- Detección de colisiones
- Vectores
- WebSockets
- Google Visualization
- jQuery Mobile y PhoneGap
¿Cómo enseña?
Con proyectos
- ✗ Sin ejercicios
- ✓ Incluye proyectos
Proyectos
Clon de Space Invaders
Juego arcade construido solo con DHTML y JavaScript: alienígenas, tanque del jugador con láser, escudos y platillo misterioso, con bucle de animación, entrada de teclado y detección de colisiones.
Chat gráfico con WebSockets
Aplicación de chat que dibuja su interfaz en un Canvas de HTML5 y se comunica en tiempo real mediante WebSockets.
Simulaciones de cañón y cohete
Simulaciones físicas basadas en operaciones con vectores; la del cohete incluye respuesta a colisiones.
Carrusel 3D
Componente de interfaz con efecto de carrusel tridimensional programado desde cero con JavaScript.
TilePic
Puzle de piezas deslizantes para móviles creado con jQuery Mobile, que luego se lleva a Android empaquetándolo con PhoneGap.

