DESARROLLO DE JUEGOS EN HTML5

Sobre los autores

Sobre el revisor técnico

Introducción

1. El estado de los juegos en Web abierta
Breve presentación
¿Qué tienen de interesante los juegos en Web abierta?
Es fácil empezar
Excelente documentación
Una comunidad grande y agradable
Se escribe una vez, se utiliza en cualquier parte
Sin compilar y abierto
Todo el mundo tiene control
Acceso a la mayor audiencia del mundo
¿Cuál es el estado actual de los juegos en Web abierta?
Ya existen tecnologías de navegador relacionadas con juegos
Gráficos 2D con SVG y canvas de HTML5
Gráficos 3D con WebGL
Mejor rendimiento de aplicaciones con requestAnimationFrame
Música y sonido con audio de HTML5 y las API de datos de audio
Estilo de juego multijugador en tiempo real con WebSockets
Almacenar datos de manera local con IndexedDB, Local Storage y otras API
Jugar sin conexión con la caché de aplicaciones
Estilo de juego de inmersión con la API FullScreen
Domar al ratón con la API Mouse Lock
Experiencia similar a las consolas con la API Gamepad
Identificar jugadores con servicios como BrowserID
Crear aplicaciones nativas para sistemas operativos con entornos como WebRT
Mucho por llegar
Existen muchos juegos buenos en Web abierta
Bejeweled
Angry Birds
Robots Are People Too
Runfield
TF2 WebGL demo
Ya existen opciones de distribución y monetización
El proyecto Mozilla Labs Apps
Chrome Web Store
Facebook
iOS App Store
Muchas más opciones
El lado no tan bueno de los juegos en Web abierta
¿Qué nos depara el futuro y qué queda por hacer?

2. La complejidad a partir de la simplicidad
¿Quién soy?
Antecedentes en el diseño de juegos
A to B
Influencia e inspiración
Fase creativa
Preproducción
Producción
Postproducción y lanzamiento
Aceptación
Reglas de simplicidad
Por qué funciona A to B
Processing.js
¿Cómo funciona Processing.js?
¿Quién debería usar Processing.js?
Puntos fuertes y debilidades
¿Es una buena opción para juegos?
Ejemplos e integración de Processing.js
Sintaxis básica de Processing
Incrustar un sketch
Procesamiento en línea
Integrar JavaScript
Utilizar audio
Importar y cargar imágenes
Tabla de máximas puntuaciones con jQuery
Resumen
Otros recursos

3. Cómo crear juegos multiplataforma en HTML5 desde cero
Introducción
Organización de código en tres partes
HTML, un lenguaje de contenido
Iniciar nuestro juego
CSS, un lenguaje de hoja de estilo descriptivo
Sintaxis de CSS
Algunas propiedades CSS significativas
Lenguajes de hoja de estilo por encima de CSS
Crear los efectos de transición de las páginas
JavaScript, un lenguaje dinámico de alto nivel
Codificar el controlador de juegos
Escribir el código de nuestro juego de ajedrez
Especificación del juego
Estilos de juego
Lógica del juego
Ámbito y uso de espacio de nombres
La clase Game
La clase Renderer
La clase Storage
Implementar nuestro controlador
El resultado
Marcos de móviles
jQuery y Zepto
PhoneGap
PhoneGap Build
Configuración de nuestro juego de ajedrez
WebAppBuilder
Makefile para nuestro juego de ajedrez
Internacionalización
El ejemplo
Código HTML
Código básico i18n de JavaScript
Pure DOM frente a juego basado en canvas
Visión general de la API Canvas
Comparación de soluciones: Canvas
Comparación de soluciones: Pure DOM
Podemos mezclar
Resumen
Otros recursos

4. Crear, guardar y cargar pistas
¿Quiénes somos, qué haremos y por qué?
La aplicación y su sentido
¿Por qué son importantes los niveles?
Dividir en componentes pequeños
El marcado HTML
Añadir un poco de estilo
La estructura JavaScript
El bucle de dibujo
Los ladrillos
Cuadrado
Círculo
Curva
Triángulo
Añadir ladrillos a la cuadrícula
Implementar la rotación
Implementar el botón Clear
El almacenamiento
Guardar las pistas
Recuperar pistas
Implementar el botón Save
Crear una lista de pistas guardadas
Resumen

5. Tutorial de 3D CSS
Introducción
Visión general de los elementos
Variables del juego
Propiedades 3D del contenedor
Temporizador de bucles de juego y eventos
Visión general del bucle de juego
Crear peces nuevos
Actualización de los peces
Renderizar los peces
Crear peces
Configurar las propiedades de los peces
Reciclar los peces
Explotar los peces
Partículas
Capas de paralaje
Deshabilitar el comportamiento predeterminado del toque/ratón
Resumen

6. Sistemas de partículas
Introducción
Matemáticas
Vectores
Añadir comprobaciones
Valores aleatorios
Componentes
Partículas
Emisores
Fuerzas
Renderizador
Sistema
Hola, fuegos artificiales
Diseñar la chispa
Implementar el bucle principal
Implementar el emisor
Fuerzas
Vida y muerte
Renderización
Fuego
Crear las texturas
Cargar las texturas
Implementar el emisor
Implementar las fuerzas
Implementar el bucle principal
Rotación
Apagado
Humo
Crear las texturas
Implementar el emisor
Implementar el bucle principal
Optimizaciones
Partículas sencillas
Matrices tipificadas
requestAnimationFrame
Microoptimizaciones
Encadenar expresiones
Redondear
Fuegos artificiales optimizados
Resumen

7. Empezar con WebGL
El origen de WebGL
¿Cómo funciona WebGL?
Usos y limitaciones
Demostraciones
Sistema operativo, tarjeta gráfica y compatibilidad del navegador
Probar la compatibilidad de WebGL
Bibliotecas
Bibliotecas de matrices
API de nivel alto
Herramientas de depuración
Actualizador 3D
Sistema de coordenadas
Transformaciones
Componer la vista de la escena
Transformación del modelo en mundo
Transformación del mundo en vista
Transformación de proyección
Viewport
GLSL
Utilizar WebGL
Dibujar una forma sencilla
Configurar un programa sombreador
Animación y profundidad
Entrada del usuario
Utilizar requestAnimationFrame
Crear movimiento
Utilizar un búfer de índices
Cargar un modelo complejo
Un juego básico
Planificación
Añadir una textura
Dibujar nuestro dardo
Eventos de ratón
Detección de colisiones básica
Puntuación
Resumen

8. CycleBlob: Un juego WebGL de ciclo de luz
¿Qué es WebGL?
Empezar con WebGL
Configuración del entorno de trabajo
El problema con los archivos de disco local
Depurar JavaScript
Un editor mejor
Geometría y modelos en 3D
Clasificación de modelos
Modelos estáticos
Modelos dinámicos
Procesamiento geométrico
Movimiento y posición
Situación en una cuadrícula
Componentes de la transformación
Posición de la cámara
Motor de animación
Velocidad y medidas
Temporización de la animación
Control de la velocidad de fotogramas
Estructura del código
Inicio
La función tick()
Estru

Esta obra revela numerosos trucos de programación y técnicas de optimización que le ayudarán a crear su juego perfecto. Los autores, todos ellos prestigiosos desarrolladores de juegos en HTML5, cuentan con todo lujo de detalles su pasión por crear y escribir estupendos juegos, comparten sus conocimientos fruto de la experiencia y una amplia variedad de ejemplos reales de código que podrá utilizar en sus propios proyectos.

Descubrirá lo que supone hacer un juego al que todo el mundo quiera jugar. Trabajará de la mano de expertos programadores utilizando JavaScript, HTML5, WebGL y CSS3. A medida que vaya completando los proyectos, no aprenderá solamente a crear simples juegos, sino que podrá desarrollar juegos fantásticos.
Al terminar el libro, habrá adquirido una serie de habilidades y una colección de ejemplos de código reutilizables que podrá emplear para crear los juegos más deseados de la red. Tanto si es un programador experto, como si es un principiante que busca inspiración y una base sólida, en este libro encontrará lo que necesita para crear el juego de sus sueños.