Tutorial Phaser – Parte 6: l’animazione dell’esplosione

Nel precedente articolo del tutorial su Phaser abbiamo gestito le collisioni tra i laser ed i nemici e tra i nemici e l’astronave del giocatore. In questo articolo vedremo come aggiungere l’animazione di un esplosione quando l’astronave del giocatore o il nemico vengono distrutti.

Per farlo useremo il metodo più classico: alternare una serie di immagini in modo del tutto simile ai cartoni animati.

Tutte i frame (singole immagini dell’animazione) saranno contenuti in un unico file detto spritesheet: un immagine da 1024 x 1024 contenente 16 frames da 256×256 pixel ciascuno (una griglia di 4 x 4).

In questo caso non useremo un immagine per ciascun frame (immagine in un dato istante) ma raggrupperemo un immagine con tenente tutti i frame Per fare questo quindi scaricheremo un asset contenente tutte i frame di un esplosione.

Scarichiamo quindi l’asset dei nemici nella funzione di preload. La precaricheremo come spritesheet usando la chiave “explosion”.
Scarica

// carico l'esplosione. Dimensioni 256x256  (1024/4, 1024/4) per un totale di 16 frames
game.load.spritesheet('explosion', 'explosion.png', 1024/4,1024/4,16);

Scriviamo quindi una funzione chiamata explode che crei l’animazione di un esplosione centrata nelle coordinate che specificheremo nei parametri di ingresso x e y

function explode(x,y){
var explosion = game.add.sprite(x, y, 'explosion');
// l'esplosione viene centrata sui punti x e y, impostiamo quindi l'ancoraggio dello sprite al centro orizzontale e verticale (0.5)
explosion.anchor.setTo(0.5, 0.5);
// prende tutti i frame disponibili in quanto non abbiamo specificato parametri    explosion.animations.add('explode');
// lancia l'animazione con una durata di 30 centesimi di secondo    explosion.animations.play('explode', 30, false);
}

La funzione crea un nuovo sprite per ciascuna esplosione, potremo quindi avere più esplosioni in contemporanea. Adesso dovremo solo richiamarla negli eventi che gestiscono le collisioni

Nell’evento di collisione tra laser e nemico lanceremo un esplosione centrata sul nemico

function enemyCollisionHandler (bullet, enemy) {
bullet.kill();
enemy.kill();
// animazione centrata sulle coordinate del nemico
explode(enemy.x, enemy.y);
}

Nella collisione tra astronave e nemici avremo invece 2 esplosioni

function shipCollisionHandler (ship, enemy) {
ship.kill();
enemy.kill();
// animazione centrata sulle coordinate del nemico
explode(enemy.x, enemy.y);
// animazione centrata sulle coordinate del giocatore
explode(ship.x, ship.y);}

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

Nel prossimo articolo vedremo come aggiungere il punteggio del giocatore.

Precedente Indice Successivo