Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
En este videojuego, los enemigos irán apareciendo desde los extremos laterales de la pantalla y entrando en el area del juego. El jugador debe pulsar sobre ellos. Si acierta, el enemigo explotará.
Aquí tenemos una versión sencilla del juego, aunque podríamos añadirle más complicación fácilmente. Podríamos hacer que la velocidad de los enemigos aumente en función del tiempo, o de cuantos hemos matado, podríamos tener un marcador de puntos, podríamos tener vidas, etc.
Pasos en la resolución del juego de galería de tiro con PhaserJS
Cargar fondo
Cargamos la imagen de fondo del juego. Para ello, utilizamos el código correspondiente para precargar la imagen en Boot.js y la ubicamos en pantalla en el método create de la escena Game.
createSprite();
Vamos a añadir el sprite de uno de los enemigos, la oruga o Caterpillar. Este enemigo no es una imagen estática, sino que es una imagen compuesta de varias imágenes que iremos mostrando de manera secuencial para lograr un efecto de animación.
Para ello, en el fichero Boot.js cargaremos un spritesheet en lugar de una imagen estática. El spritesheet es una imagen compuesta por varios frames. Las propiedades frameWidth y frameHeight definirán el tamaño de cada uno de estos frames.
Después de precargar el spritesheet, en el método create vamos a definir la animación que lo utilizará. En el código en la función anims.create hemos definido los siguientes parámetros:
- Con la propiedad key hemos identificado esta animación como caterpilllarWalk.
- Con la propiedad frames hemos especificado los frames de la spritesheet que componen la animación. En este caso, todos los frames de la spritehseet sirven para hacer la animación de andar, pero podría ocurrir que en la misma spritesheet hubiese frames de diferentes animaciones.
- Con la propiedad frameRate indicamos los frames por segundo que tendrá la animación.
- Con la propiedad repeat indicamos cuantas veces se va a repetir la animación. Como hemos utilizado el valor -1, la animación se repetirá indefinidamente.
/src/Boot.js
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
En la escena Game vamos a utilizar la animación recien cargada. La función createSprite() coloca en pantalla un sprite que tendrá físicas. Es decir que podrá colisionar contra otros objetos, tener velocidad, etc. A este sprite con físicas que he llamado obj en el código le he añadido una velocidad (setVelocity) y he indicado que se reproduzca la animación caterpillarWalk.
/src/game.js
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Para que el sprite con físicas pueda añadirse correctamente a la pantalla, debemos indicar en el fichero main.js que vamos a usar físicas de tipo Arcade. Las físicas de tipo arcade son las que menos recursos consumen. En ellas, las cajas de colisión son siempre rectangulares.
/src/main.js
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Bichos aleatorios
Hasta ahora, estabamos instanciando siempre una oruga. En este paso vamos a instanciar una de las tres variadades de enemigos disponibles. Para ello, tendremos un array con los nombres de cada uno de los tipos de enemigo y generaremos un número aleatorio en función del cual utilizaremos un sprite u otro. Luego, utilizando ese nombre de sprite más la palabra Walk, activaremos la animación correspondiente.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Varios sprites
Queremos crear un enemigo nuevo cada segundo. Para ello utilizaremos la siguiente función al final de la función createSprite(), que llamará a la propia función al cabo de 1000 milisegundos.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Carga en posiciones aleatorias
Ahora mismo los enemigos estan saliendo siempre del mismo sitio. Queremos que a veces salgan del lado derecho de la pantalla y a veces del lado izquierdo. También queremos que los enemigos salgan desde diferentes alturas (diferentes valores de y).
Para conseguir que los enemigos salgan de ambos lados de la pantalla, crearemos un número aleatorio. Si es es mayor que 0.5, el enemigo saldrá de un extremo de la pantalla. Si no, saldrá del otro.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Los bichos deben mirar en la dirección del desplazamiento
Ahora mismo los bichos siempre miran hacia el mismo lado. El objetivo es que miren en la dirección en la que estan andando. Para ello, en función de la variable direction, haremos un flip que volteará la imagen para que mire en la dirección deseada.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Detectar pulsación
Vamos a detectar cuando pulsamos sobre un sprite. Para ello, le añadiremos el evento pointerdown, de manera similar a como hacíamos con las caras que el juego de acierta imagen.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Explosión
La animación de explosión se activará cuando pulsemos sobre alguno de los enemigos. Como todas las animaciones, la precargaremos en el preload de Boot.js y luego en el create definiremos las características de la animación.
/src/scenes/Boot.js
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
Debemos añadir, en el método que realizó la creación del sprite del enemigo el código que detectará cuando pulsamos sobre él y llamará a la función clickedBug, que deshabilitará las físicas del enemigo para que deje de moverse y activará la animación de explosión.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.
La explosión desaparece cuando ha concluído
Finalmente, para que la explosión no deje en pantalla ningún sprite tras haber concluído, añadiremos un listener que escucha cuando termina cualquier animación y en el caso de que la animación que ha concluído sea crashAnim, eliminaremos totalmente el sprite.
while(premium == false) verCodigo = false;
Para poder ver el código fuente, accede o suscríbete.