Desarrollo de un videojuego de naves en HTML5 – Parte 4: Explosiones e interfaz

Este artículo es la segunda entrega de la última parte de la serie de artículos sobre desarrollo de un videojuego de naves en HTML5. No hay una nueva etapa de desarrollo, sino que todo está referido al ejemplo que vimos en la última nota.

El código fuente de lo pueden encontrar aquí y el ejemplo terminado, en el siguiente enlace: Desarrollo de un videojuego de naves en HTML5 – Parte 4

En este artículo vamos a ver primero como hacer para que la nave y los aliens exploten y luego, vamos a ver cómo construir una interfaz de usuario simple para manejar el principio y el final del juego.

Creando las explosiones

Las explosiones ocurrirán en el videojuego cuando un proyectil impacte con un alien o cuando un alien impacte con la nave. Se generarán en el centro del alien en el primer caso y en el centro de la nave en el segundo. Decidí no incorporar las explosiones al modelo. Serán únicamente un elemento gráfico de la vista y las controlará la clase Dibujante.

Por lo tanto, las explosiones se crean en Dibujante a través del método crearExplosion. Vamos a ver como es.

Hay varios aspectos para ver. Prestemos atención a los parámetros que son cuatro. Los primeros dos representan la posición en x y en y del elemento a explotar y los otros dos son la posición del centro de estos elementos. Con estos cuatro valores, es posible centrar la explosión de acuerdo a lo que sea que esté explotando.

Ya dentro del método vemos que primero necesitaremos una imagen común de Javascript. Sin embargo, lo que viene a continuación no es una Kinetic.Image, de la librería Kinetic, sino que es una Kinetic.QImage. Si se fijan en el encabezado del código HTML5, verán que hemos cargado una archivo adicional llamado kQuantumImage.js. Este archivo agrega la posibilidad de trabajar con sprites.

Un sprite es un conjunto de imágenes que se juntan para formar una única imagen. De esta forma, en una sola imagen tenemos distintos rectángulos formados por otras imágenes. Se utilizan mucho en videojuegos y también en programación web.

Es común realizar animaciones utilizando sprites. Cada rectángulo de imagen de un sprite puede representar un frame o cuadro de una secuencia animada. En nuestro caso, de una explosión.

El archivo kQuantumImage.js permite crear imágenes en las cuales se puede seleccionar solo determinadas áreas. De esta forma, primero se muestra un recuadro, luego otro y a continuación otro. Si esta secuencia se hace lo suficientemente rápido se tendrá una explosión espectacular.

Cuando se crea la explosión se le pasan los siguiente parámetros: la posición en x y en y donde se creará la explosión (el vértice izquierdo), el ancho y el alto de la explosión, la posición en el sprite a partir de la cual se quiere seleccionar la imagen contenida y el ancho y el alto del recuadro seleccionado.

explosion sprite

Luego de creada la explosión, se agrega a kinExpl que es un nuevo array que guarda todas las instancias de explosiones que se van a crear. Esto es así porque puede haber más de una explosión al mismo tiempo.

Finalmente, se agrega la explosión al layer, que es la capa que tiene todos los objetos.

Animando las explosiones

Con lo que hemos visto hasta acá, las explosiones se crean, mostrando únicamente el primer cuadro de animación, pero no ocurre más nada. Quedan fijas en pantalla. Es el momento de ver como hacer que los cuadros o frames vayan pasando uno tras otro y luego desaparezcan por completo.

En el método actualizar de Juego tenemos un atributo tExpl que lo que hará será contar hasta 5 y cuando llegue, volverá a cero para volver a comenzar la cuenta.

Esta estructura sirve para ejecutar el método animarExplosiones de Dibujante una de cada cinco veces. Ahora veamos que hace por dentro este método.

Vamos a definir frames como un array. Tendrá nueve posiciones (una por cada cuadro de animación) y cada uno de sus elementos será, a su vez, un array que en este caso, tendrá dos valores: una para indicar la posición en x dentro de la imagen y la otra para indicar la posición en y. Los valores están hardcodeados o introducidos de forma fija. Sería recomendable asignarlos a constantes.

Entonces, cada elemento de frames nos dice donde empieza cada cuadro de animación en el sprite de la explosión. Vale aclarar que están en orden, es decir, frames[1] apunta al primer cuadro, frames[2] al segundo y así sucesivamente.

A continuación, lo primero que vamos a chequear es que haya explosiones creadas. ¿Cómo hacerlo? Muy fácil, comprobando si el array this.kinExpl tiene elementos. Por eso en el if que aparece luego se chequea si la longitud del array es mayor que 0.

Luego, se vuelve a utilizar Array.each como en otras partes del código. Lo que se va a recorrer es el array de explosiones. Aquí tengo que aclarar que no encontré métodos que permitan acceder a los atributos de los objetos Kinetic.QImage. La interfaz de la clase no provee ninguno. Por lo tanto, verán que accedo directamente los atributos, algo que no es correcto en realidad.

Dentro del Array.each, se van iterando las distintas explosiones y a cada una de ellas se las hace avanzar un cuadro. Noten que el atributo name de Kinetic.QImage se utilizan para indicar el estado de los frames. Hay 9 estados posibles; cuando las explosiones se crean se inicializan en 1. Cada vez que se ingresa en animarExplosiones, se lo incrementa en uno. Cuando llega a 9, se elimina la explosión y se la quita del layer. Para esto último se utiliza la variable eliminar que guarda la instancia que habrá que suprimir.

Interfaz de usuario

Para dejar este videojuego completo faltaba hacer un pequeño menú de usuario, con mensajes y botones para comenzar y terminar el juego.

Hay algunas modificaciones al código de la tercera etapa de desarollo. Veamos esto en el orden en que van ocurriendo. Comencemos por el inicio del juego en la función de carga.

Luego de completada la carga de las imágenes, ahora el control del juego lo tendrá el método juego.comenzar.

Lo que hace este método es llamar a textoInicial de Dibujante. Pasa por parámetro la propia instancia Juego porque desde el método que se invoca habrá que agregar un evento vinculado a Juego. Veamos a continuación este nuevo método.

Al principio se crea una nueva imagen kinTitulo con el título del juego. Luego se hace lo mismo pero para crear un botón llamado btnJugar que será el que dará inicio al juego cuando se le haga click.

Con el método on se puede agregar eventos a los objetos en Kinetic JS. Primero se pasa por parámetro el tipo de evento y luego se pone la función que se quiere asociar. En el caso del botón btnJugar, el evento es ‘click’ y se agrega una función anónima que llama a juego.jugar, el método que se encarga de dar inicio al juego propiamente.

Finalmente, se agrega al layer el título y el btnJugar para luego dibujar todo.

Cuando un alien chocaba con la nave, teníamos el siguiente código:

Tras la colisión, lo último que se hace es llamar al método finalizar de la clase Juego. Pero no se hace de forma directa, sino que se utiliza la función delay de MooTools para que demore un tiempo T_DELAY. Esto hace que el juego no termine de manera brusca, sino que haya un espacio de tiempo corto entre el choque y el mensaje de fin de juego.

El método finalizar de Juego hace lo siguiente.

Con clearInterval se eliminan las llamadas periódicas a intervaloJuego y a intervaloAlien. Con window.removeEvents se quitan los eventos de teclado asociados al método ejecutar.

Finalmente, se llama textoFinal de la clase Dibujante.

Lo primero que se crea es un objeto de la clase Kinetic.Text, que nunca vimos hasta ahora. Se trata de texto que se puede insertar en el canvas. Como ven, los atributos sirven para darle formato a ese texto, como por ejemplo el color, tipo y tamaño de fuente. El atributo text sirve para definir qué es lo que va a decir el texto.

Abajo se crea un botón, de la misma forma que el botón de inicio de juego y se le asigna el mismo evento, que pone en marcha todo de nuevo. Se agrega el texto, el botón y se dibuja todo en el layer.

Resumiendo

En estas dos últimas entregas hemos visto como se realizan las colisiones entre los objetos de un videojuego de dos dimensiones. Cómo se hace para animar un sprite para crear una explosión y también como armar una interfaz gráfica simple pero necesaria para que el usuario pueda dar inicio al juego y saber cuando termina.

Quizás más adelante, en algún artículo, vuelva sobre este ejemplo para hacer alguna tarea de refactorización (hay bastante para mejorar) o para añadirle alguna nueva funcionalidad.

Referencias

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*