Desarrollo de juegos en HTML5

Sinopsis

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.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 Ambito 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() Estructuras de datos Resumen Referencia 9. Un juego multijugador en tiempo real utilizando We