Saltar al contenido →

¿Cómo hacer un juego Shoot ‘Em Up con Quintus? – Parte 1

Hace unas semanas, estuve haciendo un curso de android en Coursera. Por hacer este curso, regalaban otro curso en la academia de Zenva: HTML5 Mobile Game Development By Example – Educational Game. Este curso se compone de una serie de videotutoriales hechos por Pablo Farías, fundador de Zenva. En el curso se explica a lo largo de 18 vídeos como crear un juego educativo desde cero utilizando un framework del cual no había oído hablar nunca: Quintus.
Quintus, según lo describen sus creadores, es un motor de juegos Javascript HTML5 sencillo de aprender y divertido de utilizar. Después de haberlo utilizado durante las últimas 3 semanas, estoy muy de acuerdo con esta descripción. Está en una fase muy temprana todavía de desarrollo pero en su estado actual, es posible hacer cosillas bastante interesantes. He decidido escribir esta serie de artículos como un diario mientras hacía este shoot ’em up con Quintus. Ojalá pueda ser de ayuda para otras personas deseosas de aprender a utilizar Quintus.

¿Por dónde empezar?

Cuando empecé el curso de Zenva, uno de los primeros consejos proporcionados por Pablo Farías fue el de adentrarme en el código de Quintus, intentar leerlo, darle una oportunidad durante media o una hora. Quizás este sea uno de los mejores consejos que me han dado últimamente. En más de una ocasión he intentado utilizar otros frameworks, pero nunca había empezado por revisar el código de estos. En el caso de Quintus, el código está muy bien documentado y, aunque es cierto que no llego a entender todo lo que hace, sí que me ha proporcionado una idea más clara de lo que se podía hacer con él. Te animo pues a que le eches un vistazo.

Módulos de Quintus

El motor principal se encuentra en quintus.js. Quintus viene además con una serie de módulos que pueden o no ser incluidos en el juego.

  • Sprites: El módulo de Sprites es uno de los módulos más importantes de Quintus. Este módulo es el responsable del tratamiento de los spritesheets de tu juego y también contiene la clase base Sprite que es la que se suele extender para crear nuevos objetos.
  • Scenes: El módulo de Scenes es otro de los módulos que más se utilizan. Es el encargado de dar soporte a las Scenes y Stages dentro de Quintus. Este módulo depende directamente del de Sprites. Un Stage es un contenedor de Sprites y métodos. Una Scene es una serie de instrucciones para iniciar un Stage. Por ejemplo, para crear el nivel 1 de mi juego, crearé una Scene llamada “level1” y en el Stage que se iniciará junto con esta Scene, insertaré mis Sprites (“player” y “enemy”) y arrancaré la música de fondo. También podría crear otra Scene llamada “menu” que sería el menú de inicio con las típicas opciones de Jugar o Créditos, u otra llamada “gameover” que sea la escena final.
  • Input y Touch: Estos dos módulos se encargan de capturar y gestionar las interacciones del jugador. El módulo Touch se centra en los controles de dispositivos táctiles y el módulo Input en los controles con ratón, pad o teclado. En el módulo Input, también se encuentran dos componentes platformerControls que añade controles básicos para hacer un juego de plataformas en 2d y stepControls que permite sólo un movimiento por ciclo y devuelve el objeto al origen si se encuentra con algo en su destino.
  • Anim: Este módulo permite por un lado definir animaciones para tus sprites y también trae una serie de métodos para poder visualizar esas animaciones. Tendrás que añadir el componente a tu Sprite para poder utilizarlos. También viene con un componente Tween por si no utilizas animaciones con sprites.
  • Audio: Se encarga de gestionar el audio de tu juego.
  • 2D: Contiene una serie de componentes que permiten crear un juego de plataformas en 2D de forma más sencilla. Trae tres componentes:
    • Viewport permite gestionar la cámara.
    • TileLayer da soporte a una tile grid.
    • 2d activa un comportamiento de físicas por defecto así como la detección de colisiones.
  • UI: Define una serie de métodos y elementos que serán útiles para crear la interfaz del juego.
  • TMX: Este módulo carga archivos TMX. En mi caso, no lo he utilizado todavía.

Basta de charla, quiero ver algo en pantalla ¡YA!

Si eres igual que yo de impaciente, no habrás tardado en descargarte el repositorio de Quintus y empezar a jugar con él. Es bastante fácil hacer aparecer un sprite y por lo tanto esto anima a continuar aprendiendo. Para empezar, creo una carpeta para mi juego y dentro de la misma cuatro carpetas y un html:

  • audio: Contendrá los archivos de sonido.
  • data: Contendrá los JSON de los sprites.
  • images: Contendrá los sprites.
  • js: Contendrá Quintus y los módulos por separado. Para el desarrollo, utilizaré las versiones sin comprimir de los archivos.
  • index.html: Donde pondré tanto el html como el js de nuestro juego. Aquí lo tenéis con comentarios.

Demo GitHub

Con este código, puedes ver el jugador en pantalla, a los enemigos caer con una velocidad endiablada de la parte de arriba y comprobar que el jugador y los enemigos colisionan correctamente. Este código muestra los siguientes conceptos:

  • Crear una instancia de Quintus, incluir módulos y configurar un tamaño de canvas.
  • Extender la clase MovingSprite para crear nuestros propias clases necesarias para el juego. Aquí he creado la clase “Player” y la clase “Enemy”.
  • Sobreescribir el constructor de MovingSprite para añadir propiedades por defecto a mis clases.
  • Definir el tipo de un Sprite y la máscara de colisión con el fin de que Quintus y su módulo 2d pueda gestionar las colisiones. En la clase Enemy, he definido una máscara de colisión sobre más de un tipo de objeto.
  • Añadir un componente sobre un objeto. He añadido el componente 2d sobre el objeto Enemy para activar las colisiones.
  • Crear una Scene añadiendo el jugador y varios enemigos de forma aleatoria.
  • Cargar los archivos necesarios para nuestro juego y arrancar un Stage con la Scene definida anteriormente.
  • Cargar spritesheets.

Por ahora, esto es todo, en el siguiente artículo mostraré como hacer que se mueva la nave del jugador, cómo hacer que dispare y lo más interesante ¡hacer que los enemigos mueran! al colisionar con las balas.

Este artículo forma parte de una serie:

  1. ¿Cómo hacer un juego Shoo’Em Up con Quintus? – Parte 1
  2. ¿Cómo hacer un juego Shoo’Em Up con Quintus? – Parte 2
  3. ¿Cómo hacer un juego Shoo’Em Up con Quintus? – Parte 3

Las imágenes utilizadas son de SpriteLib.