Tutorial Phaser – Parte 7: la label del punteggio

Nel precedente articolo del tutorial sul framework Phaser abbiamo visto come aggiungere l’animazione di un esplosione. Questa volta vedremo come inserire una label (una scritta) per visualizzare il punteggio del giocatore, che incrementeremo ogni volta che verrà distrutto un nemico.

Visualizzeremo questa label, che chiameremo scoreLabel, in alto a sinistra. Il punteggio sarà invece memorizzato in una variabile javascript globale che chiameremo score.

In Phaser per default, in caso di sovrapposizioni tra oggetti, l’ultimo oggetto creato viene stampato al di sopra di quelli creati in precedenza (in gergo di sviluppo di videogames si parla di z-index). Nel caso di oggetti contenuti in gruppi si fa riferimento alla creazione del gruppo.

Per questa ragione il codice che segue andrà inserito nella parte finale della funzione “create”; in modo che la label appaia al di sopra dei nemici e dei laser.

// creiamo una variabile locale per memorizzare il punteggio
points = 0;
// stile dello scoreLabel: carattere Arial, dimensioni 32 pixel, colore giallo
var style = { font: "32px Arial", fill: "#ffff00"};
// creiamo la label in posizione 20 x 20, con la scritta "Score: 0" e lo stile della variabile "style"
scoreLabel = game.add.text(20, 20, "Score: 0", style);

Prepariamo quindi una funzione che chiameremo “updateScore” che servirà per aggiornare il punteggio. Prenderà come parametro la variabile addPoints, che rappresenta i punti da aggiungere al punteggio attuale

function updateScore(addPoints){
points = points + addPoints;
scoreLabel.text = "Score: "+points;
}

Ora non ci resta che richiamare la funzione “updateScore” dall’evento in cui un nemico viene distrutto dal laser ossia “enemyCollisionHandler”. Scegliamo di assegnare al giocatore 100 punti per nemico distrutto.

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

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

Nel prossimo articolo vedremo come aggiungere gli effetti sonori per il laser e per le esplosioni.

Precedente Indice Successivo