Galería de tiro con PhaserJS

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Cargar fondo

Cargamos la imagen de fondo del juego.

createSprite();

import oruga from './assets/img/oruga.png';
import hormiga from './assets/img/hormiga.png';
import avispa from './assets/img/avispa.png';

preload() {
	...
	this.load.spritesheet('oruga', oruga, {
		frameWidth: 96,
		frameHeight: 192
	});
	this.load.spritesheet('hormiga', hormiga, {
		frameWidth: 192, frameHeight: 96
	});
	this.load.spritesheet('avispa', avispa, {
		frameWidth: 128,
		frameHeight: 128
	});
};

create() {
	this.add.sprite(gameWidth/2, gameHeight/2, 'back');
	this.animacionesDeLaEscena();
	this.createSprite();
}

animacionesDeLaEscena() {
	this.anims.create({
		key: 'orugaWalk',
		frames: this.anims.generateFrameNumbers('oruga', {start: 0, end: 3}),
		frameRate: 7,
		repeat: -1,
	});
}

createSprite(){
	const obj = this.physics.add.sprite(0,100, 'oruga');
	obj.setVelocity(200,0)
	obj.play('orugaWalk');
}

const config = {
	type: Phaser.AUTO,
	width: 960,
	height: 640,
	scene: Escena,
	physics: {
		default: 'arcade'
	},
};

Bichos aleatorios

createSprite(){
	...
	const bichos = ['oruga', 'hormiga', 'avispa'];
	const random = Math.floor(Math.random()*bichos.length);
	const nombreSprite = bichos[random];
	...
}

animacionesDeLaEscena() {
	...
	this.anims.create({
		key: 'hormigaWalk',
		frames: this.anims.generateFrameNumbers('hormiga', {start: 0, end: 3}),
		frameRate: 7,
		repeat: -1,
	});
	
	this.anims.create({
		key: 'avispaWalk',
		frames: this.anims.generateFrameNumbers('avispa', {start: 0, end: 2}),
		frameRate: 10,
		repeat: -1,
	});
}

Varios sprites

this.time.delayedCall(1000, () => {
      this.createSprite()
}, [], this);

Carga en posiciones aleatorias

createSprite(){
	const y = Math.floor(Math.random() * gameHeight);
        const x = Math.random() > 0.5 ? gameWidth + 100 : -100;
        const sentidoVelocidad = x == -100 ? 1 : -1;

	const obj = this.physics.add.sprite(x,y, nombreSprite);
	...
	obj.setVelocity(sentidoVelocidad*200,0);
}

Las orugas deben mirar en la dirección del desplazamiento

createSprite(){
	...
	if(sentidoVelocidad==1){
		obj.flipX = true;
	}
}

Detectar pulsación

createSprite(){
	const obj = this.physics.add.sprite(x,y, nombreSprite).setInteractive();
	...
	obj.on('pointerdown', () => this.bichoPulsado());
	...
}

bichoPulsado(){
	alert('bicho pulsado');
}

Explosión

preload(){
	...
	this.load.spritesheet('explosion', 'img/crash.png', {
		frameWidth: 199,
		frameHeight: 200
	});
}
create(){
	...
	obj.on('pointerdown', () => this.bichoPulsado(obj));
	...
}

bichoPulsado(bicho){
	bicho.disableBody();
	bicho.play("explosionAnim");
}

animacionesDeLaEscena() {
	...
	this.anims.create({
		key: 'explosionAnim',
		frames: this.anims.generateFrameNumbers('explosion', {start: 0, end: 4}),
		frameRate: 7
	});
}

La explosión desaparece cuando ha concluído

obj.on('animationcomplete', this.animationComplete, this);
...
animationComplete(animation, frame, sprite) {
	if (animation.key === 'explosionAnim') {
		sprite.disableBody(true, true);
		sprite.destroy();
	}
}