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.

Cargar cada animación con una llamada al método createSprite();

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

create() {
	this.add.sprite(480, 320, 'fondo');
	this.animacionesDeLaEscena();
	this.createSprite();
}

animacionesDeLaEscena() {
	this.anims.create({
		key: 'hormigaWalk',
		frames: this.anims.generateFrameNumbers('hormiga', {start: 0, end: 3}),
		frameRate: 7,
		repeat: -1,
	});
	this.anims.create({
		key: 'orugaWalk',
		frames: this.anims.generateFrameNumbers('oruga', {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,
	});
}

createSprite(){
	const nombreSprite = 'oruga';
	const obj = this.physics.add.sprite(900,100, nombreSprite);
	obj.setVelocity(-200,0)
	obj.play(nombreSprite+'Walk');
}

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

Varios sprites

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

Carga en posiciones aleatorias

createSprite(){
	const y = Math.floor(Math.random()*config.height);
	const x = Math.random()>0.5?960:0;
	const sentidoVelocidad = x == 0?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;
	}
}

Bichos aleatorios

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

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();
	}
}