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