Introduzione a Phaser per lo sviluppo di giochi

Phaser è un framework per la creazione di videogiochi 2D. Utilizza HTML5 Canvas per visualizzare il gioco e JavaScript per eseguire il gioco. Il vantaggio dell'utilizzo di Phaser rispetto a JavaScript vanigliato è che ha una vasta libreria che completa gran parte della fisica dei videogiochi permettendoti di concentrarti sulla progettazione del gioco stesso.

Phaser riduce i tempi di sviluppo e semplifica il flusso di lavoro. Impariamo come creare un gioco di base con Phaser.

Perché sviluppare con Phaser?

Phaser è simile ad altri linguaggi di programmazione visuale in quanto il programma è basato su aggiornamenti in loop. Phaser ha tre fasi principali: precaricamento, creazione e aggiornamento.

Durante il precaricamento, le risorse del gioco vengono caricate e messe a disposizione del gioco.

Crea inizializza il gioco e tutti gli elementi iniziali del gioco. Ciascuna di queste funzioni viene eseguita una volta all'avvio del gioco.

L'aggiornamento, d'altra parte, viene eseguito in un ciclo durante il gioco. È il cavallo di battaglia che aggiorna gli elementi del gioco per renderlo interattivo.

Configurare il sistema per lo sviluppo di giochi con Phaser

Nonostante Phaser funzioni su HTML e JavaScript, i giochi vengono effettivamente eseguiti lato server, non lato client. Ciò significa che dovrai eseguire il gioco il tuo localhost. L'esecuzione del gioco lato server consente al gioco di accedere a file e risorse aggiuntivi al di fuori del programma. raccomando utilizzando XAMPP per configurare un localhost se non ne hai già una configurazione.

Che cos'è 127.0 0.1, Localhost o un indirizzo di loopback?

Hai visto "localhost" sul tuo computer, ma che cos'è? Cosa significa l'indirizzo 127.0.0.1? Sei stato violato?

Il codice seguente ti consentirà di essere subito operativo. Imposta un ambiente di gioco di base.

Per funzionare, il gioco richiederà un'immagine PNG chiamata "gamePiece" salvata in una cartella "img" sul tuo localhost. Per semplicità, questo esempio utilizza un quadrato arancione di 60xgame de60px. Il tuo gioco dovrebbe assomigliare a questo:

Se riscontri un problema, utilizza il debugger del tuo browser per capire cosa è andato storto. Anche la mancanza di un singolo carattere può causare il caos, ma generalmente il tuo debugger rileverà quei piccoli errori.

Spiegazione del codice di installazione

Finora, il gioco non ha funzionato. Ma abbiamo già percorso molto terreno! Diamo un'occhiata più approfondita al codice.

Per eseguire un gioco Phaser, è necessario importare la libreria Phaser. Lo facciamo sulla linea 3. In questo esempio, ci siamo collegati al codice sorgente, ma puoi scaricarlo sul tuo localhost e fare riferimento anche al file.

Gran parte del codice fino ad ora configura l'ambiente di gioco, che la variabile config I negozi. Nel nostro esempio, stiamo impostando un gioco phaser con uno sfondo blu (CCFFFF in codice colore esadecimale) di 600 px per 600 px. Per ora, la fisica del gioco è stata impostata arcade, ma Phaser offre fisica diversa.

Infine, scena dice al programma di eseguire il file precarico funzione prima dell'inizio del gioco e il creare funzione per avviare il gioco. Tutte queste informazioni vengono passate all'oggetto di gioco chiamato gioco.

Relazionato: I 6 migliori laptop per programmazione e codifica

La sezione successiva del codice è dove il gioco prende davvero forma. La funzione di precaricamento è dove vuoi inizializzare tutto ciò di cui hai bisogno per eseguire il tuo gioco. Nel nostro caso, abbiamo precaricato l'immagine del nostro pezzo di gioco. Il primo parametro di .Immagine nomina la nostra immagine e il secondo dice al programma dove trovare l'immagine.

L'immagine gamePiece è stata aggiunta al gioco nella funzione di creazione. La riga 29 dice che stiamo aggiungendo l'immagine gamePiece come sprite 270px a sinistra e 450px in basso dall'angolo in alto a sinistra della nostra area di gioco.

Far muovere il nostro pezzo di gioco

Finora, questo può difficilmente essere definito un gioco. Per prima cosa, non possiamo spostare il nostro pezzo di gioco. Per poter cambiare le cose nel nostro gioco, dovremo aggiungere una funzione di aggiornamento. Dovremo anche regolare la scena nella variabile di configurazione per dire al gioco quale funzione eseguire quando aggiorniamo il gioco.

Aggiunta di una funzione di aggiornamento

Nuova scena in configurazione:

scena: {
precarico: precarico,
creare: creare,
aggiornamento: aggiornamento
}

Successivamente, aggiungi una funzione di aggiornamento sotto la funzione di creazione:

aggiornamento funzione () {
}

Ottenere input chiave

Per consentire al giocatore di controllare il pezzo di gioco con i tasti freccia, dovremo aggiungere una variabile per tenere traccia dei tasti che il giocatore sta premendo. Dichiara una variabile chiamata keyInputs di seguito in cui abbiamo dichiarato gamePieces. Dichiararlo lì consentirà a tutte le funzioni di accedere alla nuova variabile.

var gamePiece;
var keyInputs;

La variabile keyInput dovrebbe essere inizializzata quando il gioco viene creato nella funzione create.

funzione create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
}

Ora nella funzione di aggiornamento, possiamo controllare se il giocatore sta premendo un tasto freccia e, in tal caso, spostare il nostro pezzo di gioco di conseguenza. Nell'esempio seguente, il pezzo di gioco viene spostato di 2 px, ma puoi impostarlo su un numero maggiore o minore. Spostare il pezzo 1px alla volta sembrava un po 'lento.

aggiornamento funzione () {
if (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
if (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
if (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
if (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Il gioco ora ha un carattere mobile! Ma per essere veramente un gioco, abbiamo bisogno di un obiettivo. Aggiungiamo alcuni ostacoli. Schivare gli ostacoli era la base per molti giochi nell'era degli 8 bit.

Aggiunta di ostacoli al gioco

Questo esempio di codice utilizza due sprite ostacolo chiamati ostacolo1 e ostacolo 2. ostacolo1 è un quadrato blu e ostacolo2 è verde. Ogni immagine dovrà essere precaricata proprio come lo sprite del gamepiece.

function preload () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('obstacle1', 'img / obstacle1.png');
this.load.image ('obstacle2', 'img / obstacle2.png');
}

Quindi ogni sprite ostacolo dovrà essere inizializzato nella funzione di creazione, proprio come il gamepiece.

funzione create () {
gamePiece = this.physics.add.sprite (270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys ();
ostacolo1 = this.physics.add.sprite (200, 0, 'ostacolo1');
ostacolo2 = this.physics.add.sprite (0, 200, 'ostacolo2');
}

Far muovere gli ostacoli

Per spostare i pezzi questa volta, non vogliamo utilizzare l'input del giocatore. Invece, facciamo muovere un pezzo dall'alto verso il basso e l'altro si muova da sinistra a destra. Per farlo, aggiungi il seguente codice alla funzione di aggiornamento:

ostacolo1.y = ostacolo1.y + 4;
if (ostacolo1.y> 600) {
ostacolo1.y = 0;
ostacolo1.x = Phaser. Matematica. Tra (0, 600);
}
ostacolo2.x = ostacolo2.x + 4;
if (ostacolo2.x> 600) {
ostacolo2.x = 0;
ostacolo2.y = Phaser. Matematica. Tra (0, 600);
}

Il codice sopra sposterà l'ostacolo1 lungo lo schermo e l'ostacolo2 nell'area di gioco di 4 pixel per ogni fotogramma. Una volta che un quadrato è fuori dallo schermo, viene spostato sul lato opposto in un nuovo punto casuale. Ciò garantirà che ci sia sempre un nuovo ostacolo per il giocatore.

Rilevamento di collisioni

Ma non abbiamo ancora finito. Avrai notato che il nostro giocatore può passare attraverso gli ostacoli. Dobbiamo fare in modo che il gioco rilevi quando il giocatore colpisce un ostacolo e finisca il gioco.

La libreria di fisica Phaser dispone di un rilevatore di collisori. Tutto quello che dobbiamo fare è inizializzarlo nella funzione create.

this.physics.add.collider (gamePiece, obstacle1, function (gamePiece, obstacle1) {
gamePiece.destroy ();
ostacolo.destroy ();
ostacolo2.destroy ();
});
this.physics.add.collider (gamePiece, obstacle2, function (gamePiece, obstacle2) {
gamePiece.destroy ();
ostacolo.destroy ();
ostacolo2.destroy ();
});

Il metodo collider richiede tre parametri. I primi due parametri identificano quali oggetti stanno entrando in collisione. Quindi, sopra, abbiamo due collisori impostati. Il primo rileva quando il gamepiece entra in collisione con l'ostacolo1 e il secondo collisore cerca le collisioni tra il gamepiece e l'ostacolo2.

Il terzo parametro dice al collisore cosa fare una volta che rileva una collisione. In questo esempio, c'è una funzione. In caso di collisione, tutti gli elementi del gioco vengono distrutti; questo ferma il gioco. Ora il giocatore eseguirà il gameover se colpisce un ostacolo.

Prova lo sviluppo del gioco con Phaser

Ci sono molti modi diversi in cui questo gioco può essere migliorato e reso più complesso. Abbiamo creato un solo giocatore, ma è possibile aggiungere e controllare un secondo personaggio giocabile con i controlli "awsd". Allo stesso modo, potresti provare ad aggiungere più ostacoli e variare la velocità del loro movimento.

Questa introduzione ti farà iniziare, ma c'è ancora molto da imparare. La cosa grandiosa di Phaser è che gran parte della fisica del gioco è fatta per te. È un ottimo modo semplice per iniziare a progettare giochi 2D. Continua a costruire su questo codice e perfeziona il tuo gioco.

Se si verificano errori, il debugger del browser è un ottimo modo per scoprire il problema.

Come utilizzare Chrome DevTools per risolvere i problemi del sito web

Scopri come utilizzare gli strumenti di sviluppo integrati del browser Chrome per migliorare i tuoi siti web.

Circa l'autore