Sprint 2 - Proyecto Final

Descripción del Proyecto

Para el proyecto final se propuso hacer un fruit ninja en WebGL en 3D. Para soportar 3D quiero modificar la mecánica del juego.

En la versión que planeo crear el jugador se encuentra en un salón. El jugador se puede mover al rededor del salón como si estuviese en un first-person shooter. El objetivo del jugador es prevenir que los objetos (frutas) que estén cayendo del techo toquen el suelo. Para lograr esto el jugador debe desplazarse al rededor del salón e ir pegándole (click) a los objetos que están cayendo. Como en la versión original, el jugador solo puede dejar caer 3 veces un objeto al piso. Así mismo, existen objetos que al destruirse causan que el jugador pierda automáticamente (bombas).

Estado Actual

Luego de haber creado una serie de objetos y clases útiles para acelerar el desarrollo del proyecto final en el Sprint 1, en el Sprint 2 me dedique a lograr mover la cámara como si se estuviese en un first person shooter. El código se encuentra aquí. Un demo funcional se puede encontrar acá. Nótese que la misma página se utiliza para mostrar la versión más reciente del juego, es decir, puede que en un futuro la aplicación mostrada en la página corresponda a la implementación de un sprint más adelante. Independientemente, en el repositorio de Github hay un release que corresponde a esta versión del código que se puede descargar y correr localmente.

Código de Interes

El browser permite capturar el mouse del usuario de tal forma que uno pueda garantizar que este nunca llegue al borde de la pantalla. Esto es útil ya que el mouse se puede utilizar para mover la cámara sin necesidad de dejar el click presionado para rotarla. Para capturar el mouse se utiliza el siguiente segmento de código:

 

Esto se puede interpretar como cuando el usuario le de click al canvas donde estamos dibujando, le vamos a señalar al browser que vamos a bloquear el mouse.

Después de capturar el mouse, llamamos a la siguiente función cada vez que este se mueva:

Estos ángulos que calculamos en esta función son utilizados a la hora de generar la matriz de lookAt para ver el juego desde la perspectiva del usuario. La creación de la matriz que funcionará de cámara se hace en el siguiente fragmento en la clase Scene.


Bitácora de Tiempos

Para lograr simular el movimiento del usuario como si se estuviese en un first person shooter, se realizaron las siguientes tareas con sus respectivos tiempos estimados y cuanto realmente me demoré.


  1. Tarea: Lograr situar la cámara adentro de un cubo donde se mapea una textura distinta a cada cara.
    Tiempo Estimado: 4 horas
    Tiempo consumido: 7 horas
  2. Tarea: Capturar el mouse del usuario dentro del canvas de tal forma que este no se pueda salir de el sin importar cuanto lo mueva.
    Tiempo estimado: 1 hora
    Tiempo consumido: 1 hora
  3. Tarea: Mover la cámara a medida que el usuario mueve el mouse.
    Tiempo estimado: 3 horas
    Tiempo consumido: 4 horas
  4. Tarea: Mover la cámara a medida que el usuario mueve el mouse Y usa las teclas "W", "A", "S", "D".
    Tiempo estimado: 5 horas
    Tiempo consumido: 5 horas

Comentarios

Publicar un comentario

Entradas populares de este blog

Texturas

Imagen
Se explicará un ejemplo de uso y manipulación de texturas en webgl. Se dibujó una escena con una lata de Coca Cola, un balón de futbol y un hershey kiss. El resultado final se puede encontrar aquí , mientras que el código se puede encontrar acá . El primer paso para poder agregarle texturas a los objetos es cargarlas como objetos de tipo Image en JavaScript. Esto se realiza en el método main: Hacemos un llamado a loadTexture por cada textura que queremos cargar. Ya que vamos a dibujar 3 objetos, hacemos 3 llamados. La implementación del método loadTexture es sencilla: Antes de cargar la textura que queremos utilizar, agregamos una por default que tiene un color azul. De esta forma, si es imposible descargar la textura por internet, al menos podemos agregarle otra. Luego, creamos el objeto image y le asignamos una función que se llamará cuando la imagen se baje por internet (onload). Este método hace el binding de la textura con el ambiente gráfico. Adicionalmente, si las ...
Leer más

Ejemplo Processing P5.js

Imagen
Se utilizó la versión web de processing para mostrar un ejemplo. Este ejemplo se encuentra desplegado en  https://codepen.io/adelavegaf/pen/jZOeOB . Como se evidencia del codepen, son una serie de objetos en 3D rotando. Para poder utilizar la versión web de processing, solo hay que incluir una serie de tags al html con las librerias. Al incluir estos tags en el html principal, podemos comenzar a utilizar las funcionalidades que nos provee P5.js desde nuestros archivos de JavaScript. Para hacer uso de las funciones, creamos un nuevo archivo de JS donde llamaremos las distintas funciones. Este archivo lo llamaremos Sketch.js. Se debe agregar un tag ubicando a este archivo en el html antes de que podamos usarlo. El tag debe estar ubicado después de los tags de las librerías de P5.js. En el archivo Sketch.js vamos a utilizar las dos funciones más importantes de P5.js: Setup y Draw. Setup se llama solo una vez, su rol es crear todo los objetos necesarios para que funcione ...
Leer más

Sprint 4 - Proyecto Final

Imagen
Descripción del Proyecto Para el proyecto final se propuso hacer un fruit ninja en WebGL en 3D. Para soportar 3D quiero modificar la mecánica del juego. En la versión que planeo crear el jugador se encuentra en un salón. El jugador se puede mover al rededor del salón como si estuviese en un first-person shooter. El objetivo del jugador es prevenir que los objetos (frutas) que estén cayendo del techo toquen el suelo. Para lograr esto el jugador debe desplazarse al rededor del salón e ir pegándole (click) a los objetos que están cayendo. Como en la versión original, el jugador solo puede dejar caer 3 veces un objeto al piso. Así mismo, existen objetos que al destruirse causan que el jugador pierda automáticamente (bombas). Estado Actual Luego de haber agregado la mecánica básica del juego en el Sprint 3, en el Sprint 4 me dedique a proveer un mecanismo de puntajes y de perdida al juego. Adicionalmente, me dedique a pulir la implementación con detalles como sombras, y a ...
Leer más