Iniziare con Phaser per lo sviluppo di giochi

Iniziare con 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 su JavaScript vanilla è che ha una vasta libreria che completa gran parte della fisica dei videogiochi, consentendoti 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 visiva in quanto il programma si basa su aggiornamenti in loop. Phaser ha tre fasi principali: precarico, creazione e aggiornamento.





In precarico, le risorse del gioco vengono caricate e rese disponibili al gioco.

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



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

Configura il tuo 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 su il tuo host locale . L'esecuzione del gioco lato server consente al gioco di accedere a file e risorse aggiuntivi al di fuori del programma. raccomando usando XAMPP per configurare un localhost se non hai già una configurazione.



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







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}


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 60xgame de60px. Il tuo gioco dovrebbe assomigliare a questo:



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

Spiegazione del codice di installazione

Finora, il gioco non fa nulla. Ma abbiamo già percorso un sacco di terreno! Esaminiamo il codice in modo più approfondito.

Per eseguire un gioco Phaser, è necessario importare la libreria Phaser. Lo facciamo alla riga 3. In questo esempio, abbiamo collegato il codice sorgente, ma puoi scaricarlo sul tuo localhost e fare riferimento anche al file.

come eliminare la tua ricerca su google

Gran parte del codice finora 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) che è 600px per 600px. Per ora, la fisica del gioco è stata impostata su arcadico , ma Phaser offre una fisica diversa.

Finalmente, scena dice al programma di eseguire il 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 .

Imparentato: I 6 migliori laptop per la programmazione e la codifica

La prossima sezione 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 la seconda 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 difficilmente può 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 config per dire al gioco quale funzione eseguire quando aggiorniamo il gioco.

Aggiunta di una funzione di aggiornamento

Nuova scena in configurazione:

scene: {
preload: preload,
create: create,
update: update
}

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

android tv per lampone pi 3
function update(){
}

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 sotto dove abbiamo dichiarato gamePieces. Dichiarandolo lì, tutte le funzioni accedono alla nuova variabile.

var gamePiece;
var keyInputs;

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

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

Ora nella funzione di aggiornamento, possiamo verificare se il giocatore sta premendo un tasto freccia e, in tal caso, spostare di conseguenza il nostro pezzo di gioco. Nell'esempio seguente, il pezzo di gioco viene spostato di 2 pixel, ma puoi renderlo un numero più grande o più piccolo. Spostare il pezzo di 1 pixel alla volta sembrava un po' lento.

function update(){
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 ha un personaggio mobile ora! Ma per essere veramente un gioco, abbiamo bisogno di un obiettivo. Aggiungiamo alcuni ostacoli. Schivare gli ostacoli era alla base di molti giochi dell'era a 8 bit.

Aggiungere ostacoli al gioco

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

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 pezzo di gioco.

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

Far muovere gli ostacoli

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

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

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

Rilevamento delle collisioni

Ma non abbiamo ancora finito. Potresti aver notato che il nostro giocatore può passare attraverso gli ostacoli. Dobbiamo fare in modo che il gioco rilevi quando il giocatore incontra un ostacolo e termini il gioco.

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

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

Il metodo del collisore richiede tre parametri. I primi due parametri identificano quali oggetti stanno collidendo. Quindi sopra, abbiamo impostato due collisori. Il primo rileva quando la pedina si scontra con l'ostacolo1 e il secondo collisore cerca collisioni tra la pedina e l'ostacolo2.

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

Prova lo sviluppo di giochi con Phaser

Ci sono molti modi diversi in cui questo gioco può essere migliorato e reso più complesso. Abbiamo creato un solo giocatore, ma un secondo personaggio giocabile potrebbe essere aggiunto e controllato con i controlli 'awsd'. Allo stesso modo, potresti sperimentare aggiungendo più ostacoli e variando la velocità del loro movimento.

come aprire il file .nfo

Questa introduzione ti consentirà di 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 riscontri errori, il debugger del browser è un ottimo modo per scoprire il problema.

Condividere Condividere Tweet E-mail Come utilizzare Chrome DevTools per risolvere i problemi del sito web

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

Leggi Avanti Argomenti correlati
  • Programmazione
  • JavaScript
  • HTML5
  • Sviluppo del gioco
Circa l'autore Jennifer Seaton(21 articoli pubblicati)

J. Seaton è uno scrittore scientifico specializzato nell'analisi di argomenti complessi. Ha un dottorato di ricerca presso l'Università del Saskatchewan; la sua ricerca si è concentrata sull'utilizzo dell'apprendimento basato sul gioco per aumentare il coinvolgimento degli studenti online. Quando non lavora, la troverai mentre legge, gioca ai videogiochi o fa giardinaggio.

Altro da Jennifer Seaton

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti