Phaser.js รจ un framework di gioco scritto in JavaScript che permette di creare videogiochi direttamente per il web, senza ripartire da zero a ogni progetto. Raccoglie tutto ciรฒ che serve โ rendering, suoni, animazioni, gestione degli input โ in unโunica libreria leggera da caricare in una pagina HTML.
Perchรฉ iniziare con Phaser?
Phaser si occupa delle parti piรน noiose dello sviluppo di un gioco: il game loop, il disegno sul canvas, il caricamento di immagini e suoni, le collisioni. Cosรฌ possiamo concentrarci sullโidea del gioco invece che sulla parte tecnica. Il risultato gira in qualsiasi browser moderno e si condivide con un semplice link.
Nel corso di questa serie vedremo come disegnare forme e immagini, riprodurre suoni e musica, aggiungere realismo con le animazioni e introdurre lโinterattivitร con il mouse. Partiremo da un progetto di base e aggiungeremo man mano una logica piรน ricca.
Ci concentriamo sulla terza versione del framework. Le versioni precedenti (Phaser 2 e CE) non sono compatibili con il codice mostrato qui.
Preparare il progetto
Per iniziare non servono strumenti complicati: basta un semplice file HTML che carica Phaser da un CDN. Si aggiunge un tag script con la configurazione del gioco e si apre il file nel browser. Ecco un esempio completo che mostra ยซHello Worldยป sullo schermo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: "#1d1d2b",
scene: { create: create }
};
const game = new Phaser.Game(config);
function create() {
this.add.text(400, 300, "Hello World", {
fontFamily: "Arial",
fontSize: "48px",
color: "#ffffff"
}).setOrigin(0.5);
}
</script>
</body>
</html>Analizziamo il codice. Lโoggetto config dice a Phaser il tipo di rendering (Phaser.AUTO sceglie WebGL o Canvas in base al browser), le dimensioni dellโarea di gioco e la scena da eseguire. Una scena รจ una schermata del gioco; qui la sua funzione create() aggiunge un testo centrato alla posizione (400, 300). La riga new Phaser.Game(config) avvia tutto. Aprendo la pagina ottieni il tuo primo rendering con Phaser: un canvas scuro con ยซHello Worldยป al centro.
Da questa base รจ sufficiente arricchire la funzione create() โ caricare unโimmagine, mostrare uno sprite, reagire alla tastiera โ per trasformare lo scheletro in un vero gioco.
Chi conosce bene JavaScript noterร la parola chiave function al posto della sintassi a freccia: una scelta che mantiene il codice leggibile e compatibile con il design del framework.
Lo sviluppo di un videogioco รจ prima di tutto una forma dโarte.
Per restare aggiornato sulle novitร di Phaser, iscriviti alla newsletter ufficiale Phaser World, gestita dal creatore e manutentore originale del framework.
Per approfondire, dai unโocchiata alla nostra guida completa per creare un gioco in JavaScript, allโarticolo su quale engine HTML5 scegliere e a tutti i nostri corsi online.
Sul fronte dei libri, trovi ottimi testi sullo sviluppo di giochi in JavaScript per andare oltre.
E’ online?
Ciao! Si il corso รจ online e disponibile per gli utenti premium: https://itamde.com/corso/impara-a-programmare-videogiochi-web-con-phaser-3.
Quindi andando sul catalogo (https://itamde.com/it/corsi-online-digitali/) e sulla sezione “Videogiochi”.
A breve lo proporrรฒ anche sullo store del sito.
Ottimo grazie mille!