PDF de programación - Diseño de juegos 3D para Web – Libro 01

1 www.TheFivePlanets.org

Índice de contenidos







Índice de contenidos

www.TheFivePlanets.org 2





DISEÑO DE JUEGOS 3D PARA WEB -

LIBRO 01 (PREVIEW)

THREE.JS – HTML5 Y WebGL

PREVIEW

Jordi Josa



3 www.TheFivePlanets.org

Índice de contenidos







Índice de contenidos

www.TheFivePlanets.org 4

ÍNDICE DE CONTENIDO

INTRODUCCIÓN

Para quien es este libro

Objetivo de la colección

Creemos nuestro juego de rol

¿Por qué un juego de rol?

¿Cómo es el juego que crearemos?

Tecnologías a usar

Three.js

Detección de colisiones y leyes de la física

Ammo.js

Cannon.js

Physijs

Oimo.js

JQuery

Blender

Adobe Photoshop

C1 - THREE.JS: PRIMEROS PASOS

Hola mundo

Escena

Mesh

Geometría

Material

Cámara

Cámara en perspectiva (THREE.PrespectiveCamera)

Render

WebGL (THREE.WebGLRenderer)

5 www.TheFivePlanets.org

Introducción



Canvas (THREE.CanvasRenderer)

CSS3D (THREE.CSS3DRenderer)

Ejes, Posición, Escala y Rotación

Ejes

Posición y Escala

Posición relativa

Rotación

Rotación sobre su eje

Rotación respecto a un punto de referencia

Convertir grados a radianes y viceversa

Animación de la escena

Clock

C2 - TREEJS: PREPARANDO EL ENTORNO DE DESARROLLO

Solucionar el error “cross-origin-domain”

Chrome

Firefox

Instalar un servidor web local

Servidores portables

PWS (Apache + MySQL + PHP)

UwAmp (Apache + MySQL + PHP)

Mongose

Servidores no portables.

XAMPP

MAMP

Web server para Node.js

Estadísticas (stats.js)

Control ui

Tipos de campos a usar en la interfaz

Carpetas

Índice de contenidos

www.TheFivePlanets.org 6



Eventos

Detectar soporte WEBGl

C3 - THREEJS: GEOMETRÍAS, MATERIALES, LUCES Y
SOMBRAS

Geometrías

Geometrías 3D predefinidas

Cubo (THREE.BoxGeometry)

Esfera (THREE.Sphere)

Poliedro (THREE. IcosahedronGeometry,
THREE.DodecahedronGeometry, THREE.OctahedronGeometry,
THREE.TetrahedronGeometry)

Cilindro (THREE.CylinderGeometry)

Cono (THREE.ConeGeometry)

Torus (THREE.TorusGeometry)

TorusKnot (THREE.TorusKnotGeometry)

Geometrías 2D predefinidas

Plano (THREE.Plane)

Círculo y polígono (THREE.Circle)

Ring (THREE.Ring)

Geometrías personalizadas

Figura 2D libre (THREE.Shape y THREE.ShapeGeometry)

Dar volumen a una figura plana (THREE.ExtrudeGeometry)

Texto en 3D (THREE.TextGeometry)

Materiales

THREE.MeshBasicMaterial

THREE.MeshNomalMaterial

THREE.MeshDepthMaterial

THREE.MeshLambertMaterial

THREE.MeshPhongMaterial

THREE.MultiMaterial

7 www.TheFivePlanets.org

Índice de contenidos



Texturas

Texturas múltiples - Mapeado UV

Repetir la textura

Transparencias

Luces

Iluminación de ambiente (THREE.AmbientLight) y direccional
(THREE.DirectionalLight)

Luz Hemisférica (THREE.HemisphereLigh)

Punto de luz (THREE.PointLight) y Luz focal (THREE.SpotLight)

Sombras

C4 - THREEJS: CREANDO NUESTRO MUNDO

Cargar modelos externos (loaders)

Formato .OBJ (THREE.OBJLoader y THREE.MTLLoader)

Activar sombras y cambiar propiedades del objeto

Solucionando problemas

Escala

Solucionar problema del servidor WEB

El objeto no muestra la textura.

Tiempo de carga demasiado lento o reducción de frames durante
la ejecución.

Texturas, gama, colores.

Formato collada. DAE (THREE.ColladaLoader) y animaciones de
objetos

Activación animación del objeto

Activar sombras y cambiar propiedades del objeto

Solucionar problemas

Escala

Solucionar problema del servidor WEB

El objeto no muestra la textura.

Tiempo de carga demasiado lento o lentitud de ejecución.

Índice de contenidos

www.TheFivePlanets.org 8



Formato nativo de three.js

Niebla

Niebla lineal - THREE.Fog (color, inicio, fin)

Niebla exponencial – THREE.FoxExp2 (color, densidad)

Crear la base del juego

Mejorando bucle de animación (world_v01.js)

Métodos de $WORLD

Propiedades de $WORLD

Crear un suelo básico (ground_v01.js)

Mover un objeto por un camino trazado (controls_path_v01.js)

Crear un cielo

Crear un cielo con un cubo (Skybox)

Crear un cielo con una esfera (Skydome)

Crear un cielo con una esfera y con un degradado

Crear vegetación y elementos naturales

Usar THREE.Sprite para crear hierba y árboles

Crear hierba usando planos

Crear el mapa del juego

Cargar varios modelos no animados simultáneamente

Clonar objetos

Crear una barra de progreso y una pantalla de carga (splashScreen)

Añadir aldeanos y crear sus rutinas de la vida diaria

Clonar objetos animados

Crear una Inteligencia Artificial básica mediante rutas
preestablecidas

Añadir monstruos y moverlos

Crear una Inteligencia Artificial básica mediante movimiento
errático

C5 - THREEJS: EXPLORAR E INTERACTUAR

9 www.TheFivePlanets.org

Índice de contenidos



Controlador básico en primera persona - movimiento por teclado y ratón

Controladores THREE.JS

FirstPersonControls.js

FlyControls.js

OrbitControls.js

TrackballControls.js

Control de movimiento vía webcam (WebRTC)

Acceso a la webcam (HTML5 getUserMedia API)

Creando la interfaz

Captura de las dos imágenes

Comparar los dos últimos frames de la cámara

Determinar los botones o zonas de la pantalla que presentan
movimiento

Aplicar el control por movimiento al juego

Control de la página web vía Gamepad

Detección del API

Eventos Gamepad

Consulta de los objetos tipo Gamepad

Ejemplo completo: Visualización del estado del gamepad

Poniéndolo todo junto

Seleccionar objetos y clickar - raycaster

¿Cómo funciona?

Preparando la escena

Lanzando el rayo

Calculando las intersecciones y seleccionando el objeto

Pulsando sobre el objeto

Arrastrar y soltar - raycaster

Preparando la escena

Control de los eventos del ratón

Índice de contenidos

www.TheFivePlanets.org 10



Interactuando con los elementos del juego

Pantalla completa (API HTML5 Fullscreen)

Los métodos, propiedades y eventos de la API Fullscreen

Detección de disponibilidad del API de pantalla completa

Cambiar a modo de pantalla completa

Cancelar el modo en pantalla completa

Comprobar si se está en modo pantalla completa

Captura de los eventos de pantalla completa

La pseudo-clase CSS :fullscreen

C6 THREEJS: PRÓXIMOS LIBROS DE LA COLECCIÓN

Gestión de la detección de colisiones

Motor de las leyes físicas

Creación de una interfaz rica para el juego

Gestión de los efectos de sonido y música de fondo

Cómo almacenar y recuperar los datos de las partidas

Cómo empaquetar y distribuir nuestra aplicación

Cómo mejorar la Inteligencia Artificial de los monstruos y aldeanos

Sharders, texturas avanzadas y sistema de partículas.

Modelos 3D animados

11 www.TheFivePlanets.org

Índice de contenidos



INTRODUCCIÓN

PARA QUIEN ES ESTE LIBRO

Este libro es para gente con conocimiento básico de JavaScript y HTML que quiera
aprender cómo realizar escenas y animaciones en 3D usando la librería Three.js, e
iniciarse en el mundo del diseño de juegos sobre web. El libro forma parte de una
colección en la que se irán introduciendo todos los conceptos, herramientas y
tecnologías que necesitaremos para la creación de juegos complejos y convertirnos
en verdaderos maestros.

Durante la colección de libros, diseñaremos e implementaremos un juego de rol
“THE FIVE PLANETS”. Por todo ello, el libro también va dirigido a aquellos que
ya conocen Three.js, pero quieren seguir el proceso de creación de este juego en
particular, y adquirir los elementos más complejos que se presentan en fases
posteriores.

OBJETIVO DE LA COLECCIÓN

El objetivo de la colección de libros es aprender todo lo necesario para crear juegos
en 3D con tecnología web y finalmente proponer formas de rentabilizar las
creaciones. Para ello iremos creando desde el principio un juego de ROL, tipo “The
Elder Scrolls V: Skyrim”, “Fallout 4” ..., con los principales elementos que
presentan, o sea la creación de los mapas en 3D, la inteligencia artificial de los
enemigos, la gestión del inventario (armamento, armaduras, pociones, …), el
sistema de misiones y por supuesto el sistema de estadísticas y niveles de los
personajes tan característicos de estos juegos.

Bueno, quizás no tan ambicioso como los que he citado, pues unos juegos así
requieren de equipos y presupuestos muy extensos con los que no contamos, sino
más bien una mezcla de los juegos como eran antes, tipo “Ishar III”, o la legendaria
saga de los “Migth and Magic”, con los de nueva generación.

CREEMOS NUESTRO JUEGO DE ROL

¿Por qué un juego de rol?
La creación de un juego de ROL en 3D presenta una colección de retos, que no se
encuentran en los Juegos de plataforma, los árcades, o bien los de tipo tablero.
Todos ellos mucho más sencillos, pues sólo cubren algunas funcionalidades.

Los juegos de ROL, o al menos en los que estamos pensado, incorporan todos estos
elementos:

13 www.TheFivePlanets.org

Introducción




Amplios mapas, con ciudades, bosques, llanuras y por supuesto mazmorras
donde interactuar. Con ello cubriremos ampliamente el diseño de mapas y escenas
en 3D, el examen de técnicas básicas para la creación del cielo y el suelo.

Incluyen un “shooter” a tiempo real, con la posibilidad de lanzar hechizos
devastadores, como bolas de fuego. En ellos nos enfrentamos a una horda de
enemigos capaz de responder con ataques igual de formidables. Esto nos permitirá
introducir la gestión de la Inteligencia Artificial, y las animaciones avanzadas.

Las partidas suelen ser largas y demorarse por varios días. Con muchas
misiones y un mundo muy cambiante. Todo ello implica que guardar una partida
para posteriormente cargar los datos y volver al estado en que dejamos el juego
implica el manejo de muchos datos.