Phaser 3 è una potente libreria per implementare videogames (prettamente 2D) sul web sfruttando Javascript e HTML5.
E’ indubbiamente una libreria con una community molto attiva ma molto spesso i problemi, e le loro risoluzioni, scalfiscono solo la superficie delle potenzialità di tale libreria in quanto la quasi totalità degli utilizzi si ferma ad un uso basilare.
Di seguito una raccolta, costantemente aggiornata, di spunti e suggerimenti su argomenti non propriamente “di base” ma con cui sicuramente ci si può scontrare appena si entra nel vivo dell’utilizzo di Phaser 3.
Rimuovere i listeners di una scena
Per rimuovere un listener da una scena si usa this.events.removeListener(”); non molti sanno che però la scrittura ufficiale è this.events.off(”) in quanto la prima è un alias di quest’ultima.
E’ bene invece non usare la funzione this.events.removeAllListeners() in quanto questa funzione rimuove anche tutti i listener interni della scena di Phaser. Si consiglia quindi di usare sempre e solo this.events.off(”) rimuovendo manualmente gli eventi creati.
Alla chiusura di una scena i listeners non vengono rimossi
Chiudendo una scena con this.scene.stop(), i vari listeners attivi non vengono rimossi causando problemi nel ricaricamento successivo della scena (esempio click lanciati due volte). E’ bene quindi appoggiarsi all’evento “shutdown” e rimuovere tutti i listeners attivi (vedere punto precedente).
this.events.on('shutdown', () => {
//Eventi phaser
this.events.off('shutdown'); //Rimuovere anche shutdown
//Eventi custom
this.events.off(KEYS.EVENTS.GAMEOVER);
this.events.off(KEYS.EVENTS.ADDSCORE);
this.events.off(KEYS.EVENTS.REMOVESCORE);
}, this);
Disegnare i limiti del mondo fisico
Molto spesso è necessario, per la sola fase di debug, visualizzare i limiti del mondo fisico della scena. E’ possibile ottenerli tramite l’oggetto this.physics.world.bounds e disegnarli nel modo seguente:
drawBounds() {
const bounds = this.physics.world.bounds;
const graphics = this.add.graphics();
graphics.lineStyle(2, 0xFF1111);
graphics.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
}