Tutorial Phaser – Parte 5: aggiungiamo i nemici

Nel precedente articolo abbiamo aggiunto all’astronave la capacità di sparare premendo la barra spaziatrice. In questo articolo aggiungeremo dei nemici, li faremo muovere e gestiremo le collisioni in modo che spariscano quando colpiti dal nostro laser.

Come al solito, inizieremo l’asset dei nemici nella funzione di preload. Useremo la chiave “enemy”.
Scarica

// funziona di precaricamento
function preload() {
game.load.image('ship', 'ship.png');
game.load.image('laser', 'laser.png');
game.load.image('enemy', 'enemy.png');
}

Aggiungiamo quindi la funzione createEnemies() che richiameremo quando sarà inizializzato il gioco in create.
Phaser ci consente di gestire gruppi di sprite con l’oggetto Group in modo da poterne gestire con semplicità le caratteristiche e gli eventi. Creeremo quindi il gruppo “enemies” e lo riempiremo con un doppio ciclo di for per generare una sorta di griglia di nemici.

function createEnemies(){
speed = 40;
// creiamo il gruppo dei nemici
enemies = game.add.group();
// su tutto il gruppo dei nemici abilitiamo la fisica.
// Serviranno per capire quando vengono colpiti dal laser.

enemies.enableBody = true;

// ciclo per righe e colonne per fare una griglia di nemici
// yadd serve per alternare le altezze sulla singola riga: vengono quindi sfasati uno
// in alto uno in basso.

yadd = 10;
for (var x = 0; x < 10; x++){
yadd = yadd * -1;
for (var y = 0; y < 6; y++){
// aggiungo un nemico al gruppo
var enemy = enemies.create(100 + (600/8)* x, 60*y +yadd , 'enemy');
// inizialmente viaggiano verso destra
enemy.body.velocity.x = speed;
}
}
}

Infine dovremo gestire la collisione tra il gruppo dei laser e quello dei nemici: quando un laser toccherà un nemico dovranno sparire entrambi dallo schermo.

Scriviamo quindi innanzitutto la funzione da richiamare quando si toccheranno.

function collisionHandler (bullet, veg) {
console.log("collision: "+bullet.key+" "+veg.key);
bullet.kill();
veg.kill();
}

E nel ciclo di aggiornamento “update” la richiameremo ad ogni collisione avvenuta.

function update() {
game.physics.arcade.collide(weapon.bullets, enemies, collisionHandler, null, game);
//...

Abbiamo quindi un astronave in grado di colpire i nemici con dei proiettili laser.

L’effetto con cui questi vengono distrutti però è molto rozzo: semplicemente si limitano a sparire dallo schermo.

Potete vedere il risultato seguendo questo link o potete scaricare il progetto
Scarica

Nel prossimo articolo della serie vedremo quindi come gestire un animazione di esplosione.

Precedente Indice Successivo