Asignatura: Matemáticas y física para simulaciones y videojuegos
Titulación: Grado Multimedia
Nombre del estudiante: David Otero Verdaguer
Consultor y profesor: Vicent Moncho Mas / César Pablo Córcoles Briongos
Introducción
Empieza el semestre y llevo ya unos días parado desde JARVIS. Mi Notepad++ lleva demasiado tiempo cerrado y está empezando a quedar arrinconado entre los iconos de mi escritorio… ¡Necesito programar! Por eso, este semestre, he elegido Matemáticas y Física para Videojuegos, una asignatura de carácter abierto, sin apuntes, donde se trabaja con 2 librerías de javascript: ThreeJS para gráficos 3D en el navegador y PhysicsJS, la librería de físicas que ha dado luz a este proyecto “CrazyBirds”.
Etapas y retos
Desde el primer momento en mi elección de asignaturas quise seguir llevando más allá el aprendizaje en programación. Programar es de esas cosas que se pierden sin la práctica, y cuando crees que sabes algo llega el momento de subir un escalón para reconocer que no tienes ni idea, que te quedan un montón de cosas por aprender.
En este caso me planteé hacer alguna cosa basada en programación orientada a objetos (Práctica 1) y machacar el tema de las matrices de datos y físicas aplicadas a un entorno web, consiguiendo movimientos con parábolas y aceleraciones (Práctica 2).
Otra cosa que me llamaba la atención era cómo animar elementos gráficos en respuesta a eventos, más allá de un simple cambio de estado al pulsar una tecla.
¡Ah sí, y… divertirme!
PhysicsJS
Las directrices de la segunda práctica en la asignatura sólo establecían el uso de la librería PhysicsJS de Jasper Palfree. Esta librería de javascript facilita el uso de colisiones, gravedad y comportamiento de elementos en un entorno: fricciones, aceleraciones, etc.
Para entender la librería y hacerse con sus elementos se nos propuso modificar algunos de los ejemplos que el propio autor expone en su web como tutorial de la librería. Todos los ejemplos que trabajé me inspiraban juegos: juegos de bolos, naves, un FruitNinja…
Pero al final me quedé con algo que prometía fácilmente llevarnos al estilo del famoso AngryBirds. Esta idea surgió de modificar el tutorial de la web del autor Basket of Verlet Constraints en mi ejercicio número 4 para las pruebas de evaluación continuada (PACS).
Los Gráficos
Sinceramente, lo más difícil ya estaba hecho: modificar el ejemplo para poder utilizarlo como una goma elástica y lanzar cajas que se comportaban con gravedad colisionando entre ellas. Ahora sólo tenía que jugar con estas colisiones y darle un poco de estilo cartoon al juego, con animaciones atractivas que llenaran la pantalla de color y lo hiciesen divertido.
Si consigues meterle un poco de nivel pro a algo que estás haciendo con ayuda de recursos libres, o de pago, tu motivación para seguir dando forma al proyecto se multiplica de forma exponencial. Es algo que recomiendo en toda práctica: poder ver resultados finales desde el inicio para hacerte una idea de cómo quedará acabado y motivarte.
Con el prototipo funcionando, llegó el momento de sacar los pinceles, la pizarra y Photoshop. Para las animaciones del pájaro y algunos gráficos de entorno me decidí a comprar, por unos 10€ en Game Devoloper Studio, unos paquetes gráficos que seguro ayudarían a dar ese acabado pro al juego.
Ya sólo quedaba ir jugando algunas partidas para añadir nuevos elementos y dificultades al juego. A medida que ves cómo se comportan los elementos en la partida se te ocurren opciones que lo pueden hacer más adictivo y entretenido: cuenta atrás, bonos o enemigos adicionales, entre otras.
Sólo te lleva unos minutos meter un par o tres más de líneas al código fuente y seguro que con ello multiplicarás el tiempo medio de juego y la experiencia final del jugador. ¡Vale la pena perder esos minutos de más!
JQuery/AnimateSprite
No tenía ni idea de cómo ejecutar una animación dentro de un elemento de caja en javascript (DIV), fuera del típico recurso de vincular un Gif animado. Pero esto no me parecía muy profesional para el entorno de un juego, ya que no puedes controlar la animación.
Buscando por la red encontré documentación de cómo crear sprites, empaquetarlos en formato XML o JSON y animarlos con javascript. Unos días más allá, fui a parar a una librería compatible con JQuery que facilitaba mucho todo el proceso: AnimateSprite.
Esta librería trabaja con un par de métodos: el primero ejecuta una serie de secuencias definidas por el usuario en frames, y el segundo decide si debe hacer algo cuando la secuencia acaba o, simplemente, repetir la animación indefinidamente.
Por otro lado, tengo que decir que estoy enamorado de JQuery: es un gran recurso. Ha sido, sin duda, uno de los grandes descubrimientos del Grado. Si sabes aplicar estilos a los elementos HTML, generar comportamientos en la parte del cliente es muy fácil con el uso de esta librería; y no tienes que preocuparte mucho de la compatibilidad entre navegadores, eso te quita muchos dolores de cabeza.
CSS y Niveles
Todo el juego está preparado para realizar un segundo nivel, como podréis ver en el código fuente. He decidido no separar los estilos (1.CSS), la estructura (2.HTML), la lógica (3.JAVASCRIPT) y las físicas (4.PHYSICSJS) en diferentes ficheros para poder agilizar la búsqueda de elementos a los más noveles.
El documento está comentado con todo tipo de detalles a nivel de tutorial para facilitar su seguimiento por parte de aquellos que no estén muy relacionados con la programación WEB, y creo que de esta forma es más fácil entender cómo funciona.
Otra cosa a comentar es que, como veréis en el código, muchos comentarios os hablan de niveles, proponiendo fácilmente al lector la ampliación del juego. El cielo, por ejemplo, está creado con un gradient en css y resulta muy fácil cambiar el aspecto del fondo durante el juego para simular que está atardeciendo.
¿Cómo se juega?
-
- La función principal del juego es conseguir meter los huevos en el nido para que los pollitos nazcan a salvo.
-
- Si los huevos caen al suelo se romperán y nos penalizarán.
-
- Los cuervos se pueden asustar si les tiramos un pelotazo. Eso nos bonificará con tiempo extra.
-
- La serpiente no puede tocar la caja de huevos o finalizará el juego. Debes conseguir tirarle una pelota encima que no haya impactado anteriormente con un cuervo.
- Al finalizar el juego se hará un recuento de pollitos y huevos rotos consiguiendo el nivel de: Looser(0-5), Beginner(5/10), Promise(10/20) o Crack(+20)
¿Echamos una partida?
http://www.reparamipc.com/codi/uoc-mfJocs/pra2/
Enlaces relacionados:
Jarvis
http://mosaic.uoc.edu/2017/07/20/conociendo-a-jarvis-un-asistente-domotico-de-pelicula/
ThreeJS
PhysicsJS
http://wellcaffeinated.net/PhysicsJS
Práctica1
http://www.reparamipc.com/codi/uoc-mfJocs/pra1/
Práctica2
http://www.reparamipc.com/codi/uoc-mfJocs/pra2/
Ejemplo “Basket of Verlet Constraints” de PhysicsJS
http://wellcaffeinated.net/PhysicsJS/#demo-5
Ejemplo modificado para PACS
http://www.reparamipc.com/codi/uoc-mfJocs/pac2/4-basketModificat.html
Gráficos
https://www.gamedeveloperstudio.com/
AnimateSprite
http://blaiprat.github.io/jquery.animateSprite/
JQuery
Enlace al juego
http://www.reparamipc.com/codi/uoc-mfJocs/pra2/
Documentación:
Advanced Game Design with HTML5 and JavaScript
Rex van der Spuy (Apress)
ISBN: 978-1-4302-5800-1
Desarrollo de juegos en HTML5
Varios autores (Anaya Multimedia)
ISBN: 978-84-415-3202-1
The making of “The Aviator“
https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/
Physics API reference
http://wellcaffeinated.net/PhysicsJS/docs/
Create a sprite Animation with HTML5
http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/
Licencias:
Imágenes
Licencias adquiridas para uso comercial por compra
https://www.gamedeveloperstudio.com/
Música:
Bajo licencia Open Source
Temas:
-
- Chibi Ninja
- HHavok-main
Cita recomendada: OTERO VERDAGUER, David. CrazyBirds, aprendiendo a programar un juego web con PhysicsJS. Mosaic [en línea], abril 2018, no. 159. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n159.1817.
Deja un comentario