Impara a programmare videogiochi con Phaser – Hello World

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.