Se trata de un juego de plataformas donde el escenario a recorrer es infinito, ya que se generan los bloques de forma aleatoria y continua.
Está programado en HTML5 y javascript, utilizando la biblioteca three.js.

El objetivo del personaje es recoger la mayor cantidad posible de monedas en su recorrido, lo que provocará que la velocidad aumente y sea más complejo superar los nuevos bloques ya que deberá evitar caer en la lava o ser golpeado por obstáculos móviles.

La interfaz está distribuida de la siguiente forma:

• Ventana principal: Muestra las opciones que ofrece la aplicación
• Panel de configuración: Permite modificar algunos aspectos del juego
• Panel de ranking: Lista las mejores puntuaciones. También hay un subpanel para el envío de tu puntuación obtenida.
• Canvas: Donde se renderiza el juego

El funcionamiento es sencillo.
Al empezar una nueva partida se mostrará el escenario de juego y el personaje. Para esquivar los obstáculos, no caer a la lava y coger monedas se debe saltar utilizando la barra espaciadora. Si se consiguen obtener más de 20 monedas se puede acceder al ránking de la aplicación.

Se han implementado las siguientes funcionalidades:

• Generar un terreno de forma aleatoria utilizando splines:
  El escenario se va creando a medida que se va avanzando, de forma que queda un juego con un nivel infinito.
  Cada bloque se genera con una spline creada con puntos situados aleatoriamente entre unos rangos. (La spline es calculada por la propia biblioteca three.js)
• Importar un modelo 3D:
  Se importa un modelo 3D creado en Blender (el modelo es original de QuakeII, el personaje tekk-blade), que posteriormente se ha convertido gracias a un addon que se facilita en la biblioteca three.js: Three.js Blender Import/Export
• Implementar acciones (correr, saltar, estar quieto…):
  La única acción necesaria para este formato de juego es la de saltar por la propia Mecánica del juego. Para obtener información referente a la matemática del salto del personaje avanzar a "Salto del personaje"
  La animación del personaje en el momento está corriendo o en el momento está saltando se cambia para crear el efecto de salto.
• Detección de colisiones:
  Existen dos tipos de colisiones en este juego:
  • Colisiones con el terreno:
    Para la detección del terreno se utiliza un rayo desde el personaje y en dirección a (0,-1,0). Se comprueba si existen colisiones con objetos tipo Block y en función del resultado se recalcula la posición del personaje para adaptarlo al terreno o dejar que caiga a la lava.
  • Colisiones con los objetos (monedas, bola de lava...):
    Para la detección con los objetos se utiliza el método AABB (Axis Aligned Bounding Boxes). Tras estudiar la mecánica y el funcionamiento de este método se ha optado por ajustar la función que se facilita en la página de Miguel Casillas para javascript.
• Animar objetos del escenario
  La idea inicial era utilizar los Quaternion que vienen implementados por three.js para realizar las animaciones de los objetos del escenario, pero finalmente y tras haber confirmado que no era requisito imprescindible se ha borrado de la lista.
  De este modo, se han animado las monedas que hay que conseguir con una rotación respecto al eje Y (del mismo modo que la luna).
  Las luces rojas que generan el efecto de luz de lava volcánica han sido animadas de forma que vayan saltando por debajo del plano con la textura de lava, lo que causa el efecto deseado.
  La bola de lava que intentará eliminar al jugador de la partida está animada siguiendo una trayectoria sinusoidal.
• Ampliar modos de juego con otras funcionalidades:
  La única funcionalidad que se ha implementado ha sido poder modificar lo abrupto o llano que es el terreno. Aunque es ampliable y escalable de muy fácil modo.
• Pulir detalles y crear aplicación completa:
  Se han tratado de pulir todos los detalles que se han presentado viables durante el proceso, mejorando su optimización y diseño. Como por ejemplo cambiar la cámara para tener otro punto de vista letra V o poder pausar el juego letra P
  En cuanto a crear la aplicación completa, se han integrado los conocimientos adquiridos en otras asignaturas de modo que además de tener animaciones de objetos se integra una interfaz de usuario, programación hipermedia utilizando PHP y conexiones con las bases de datos para el ranking.

Para utilizar esta aplicación, y en general WebGL, se necesita alguno de los navegadores de la siguiente tabla que sea compatible:

Datos obtenidos desde caniuse.com

Además, también es necesario un ordenador con una GPU ya que son gráficos 3D acelerados por hardware.

En el caso de no cumplir con los requisitos técnicos para hacer funcionar el juego, aquí se muestra un vídeo de demostración

¡¡Vídeo temporal!!

Todo el código está comentado a un nivel de detalle muy alto, La tecnología utilizada:

• El proyecto está programado three.js, que es una bibliotica en Javascript que permite que puede renderizar usando Canvas, SVG o WebGL.
• También se ha utilizado jQuery. Un framework para trabajar en javascript.
• Para maquetar la memoria se ha utilizado bootstrap. Que permite maquetar rápido y contiene plugins muy útiles.
• Además se ha escrito todo el HTML y hojas de estilo CSS.

• SublimeText2: Para todo el código
• Photoshop: Creación de las imágenes
• Firefox & Safari & Chrome: Testing

Gracias a toda la información que he recapitulado durante la investigación sobre este tipo de juegos, he creado el juego de modo en que el personaje nunca altera su posición en el eje X, sino que lo que se desplaza es todo el espacio hacia la izquierda. De este modo se evita que el float pierda precisión cuando alguien llevara muchísimo tiempo jugando y la posición del personaje alcanzara un número superior al que acepta un float.
Para garantizar que tampoco se pierda precisión en los bloques pero en negativo y para garantizar una mejor optimización, cuando un bloque ya no aparece en pantalla se elimina (esto ocurre exactamente con las monedas). En cuanto a la bola de lava que realiza una trayectoria sinusoidal, cuando ésta alcanza una posición no visible por la izquierda se vuelve a posicionar por delante del personaje en una posición aleatoria entre unos márgenes. También, se ha utilizado la variable "delta" (tiempo entre la última entrada en el bucle de pintado y la actual) para garantizar el correcto funcionamiento en ordenadores con más o menos frames per second (por ejemplo: que no salte más alto en un ordenador con 60FPS que en uno que sólo alcance 15FPS).

Los bloques se generan mediante splines que pasan por una serie de puntos aleatorios. Para crear la mesh del bloque se añaden los vertices y las faces puestos todos en el orden correspondiente. (Falta ampliar con datos, imágenes y código)

Para el salto del personaje se han utilizado unas variables con la fuerza con la que salta y la gravedad. Tras comprobar con el rayo el estado actual del personaje, realiza la acción correspondiente.
La altura que alcanza con cada salto es diferente en función al tiempo que se mantenga la barra espaciadora. (Falta ampliar con información sólida y datos)

El efecto de la luz que genera la lava incandescente se ha hecho posicionando 4 luces puntuales que emiten luz roja por debajo del plano que tiene la textura de la lava. Y moviéndolas se consigue el efecto deseado. (falta ampliar con código y fórmulas)

La bola de lava se desplaza con una trayectoria sinuosidad. (Falta ampliar con fórmulas y datos)

Valoración sobre la asignatura [en readacción]

Una cosa que siempre intento en los proyecto finales de asignatura es ser capaz de aplicar los conocimientos que he aprendido de otras asignaturas en el propio proyecto.

En este, he sido capaz de crear los bloques del terreno aleatorio gracias a la asignatura de Informática Gráfica y Gráficos Avanzados y Sonido. Sobre cómo situar las caras y su dirección, orden de los vértices, etc. El conocimiento de shaders me dio la posibilidad de crear la lava con el efecto típico de un fluido, pero finalmente se desechó porque era demasiado costoso para los resultados. Esta asignatura también me ha ayudado a saber cómo colocar las luces, las diferencias entre una luz puntual o direccional, y la cámara.

Por otra parte, siendo un videojuego donde la misión es conseguir el mayor número de monedas, pensé que una buena opción era integrar un ránking donde se contemplaran estos resultados. Así que la asignatura de Programación Hipermedia (aunque utilizo PHP en vez de JSP), y la asignatura de Bases de Datos, me han hecho ser capaz de implementar este sistema.

Por último, en la asignatura de Comunicación Interactiva se nos hizo mantener un blog durante toda la duración del cuatrimestre y esta memoria está redactada como un hipertexto con sus relaciones entre contenido mediante links.

Desde el primer momento que se propuso hacer proyecto me pareció la mejor idea. Además de ser algo que puedes enseñar al resto de gente para que vean qué eres capaz de hacer, es una forma de aprendizaje diferente a limitarse a estudiar unos apuntes y luego mostrar todo lo que has sido capaz de aprender sobre un papel.
Con este proyecto he aprendido lo que se pretendía de la asignatura y también aprender la utilización de una biblioteca en constante desarrollo como es three.js.

Personalmente, he visto muchos de los proyectos de otros compañeros y matemáticamente me parece que el mío no tiene tanta complejidad, pero un proyecto de este calibre, en mi opinión, merecía tener todo tipo de detalles que hicieran un proyecto completo.
Desde el primer momento se me avisó que era demasiado ambicioso y sólo se debería hacer si poseía experiencia con la biblioteca, pero quizás fue eso lo que me motivó más a seguir adelante y crearlo. El problema de esta elección ha sido que en vez de las 30 horas propuestas para realizar el proyecto, debo haber invertido 5 veces más de tiempo, aunque para mí han merecido la pena.

Ahora mismo, tengo un proyecto que, aunque no es un "juegazo", puede llegar a ser entretenido. Y por cómo está implementado es escalable a otros modos de juego para hacerlo todavía más entretenido.

He conseguido algo que me hace estar muy satisfecho, y es un proyecto completo. Que no está limitado a las exigencias de la animación (parte a la que me hubiera gustado ampliar mucho más) sino con la integración de los conocimientos de otras asignaturas.

Ahora tengo algo más que añadir al portafolio y poder enseñar mis conocimientos. Además de haber aprendido cómo funcionan este tipo de juegos, que inicialmente pensaba que se implementaban de otra forma muy distinta, y a saber proponerme objetivos complejos y investigar hasta alcanzarlos.

Considero, por tanto, que ha sido una buena forma de aprender cómo animar objetos en un entorno 3D y demostrar así los conocimientos aprendidos en la asignatura.