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 su 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 si basa su aggiornamenti in loop. Phaser ha tre fasi principali: precaricamento, creazione e aggiornamento.
In precaricamento, le risorse del gioco vengono caricate e messe a disposizione del gioco.
Crea inizializza il gioco e tutti gli elementi del gioco iniziale. Ognuna 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 venga eseguito su HTML e JavaScript, i giochi vengono effettivamente eseguiti lato server, non lato client. Ciò significa che dovrai eseguire il gioco sul tuo localhost . L'esecuzione del gioco lato server consente al gioco di accedere a file e risorse aggiuntivi al di fuori del programma. Consiglio di utilizzare XAMPP per configurare un localhost se non ne hai già uno.
Il codice seguente ti consentirà di essere subito operativo. Imposta un ambiente di gioco di base.
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>
<body>
<script>
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');
}
</script>
</body>
</html>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 al codice in modo più approfondito.
Per eseguire un gioco Phaser, è necessario importare la libreria Phaser. Lo facciamo sulla riga 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 memorizza. 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 su arcade , ma Phaser offre una fisica diversa.
Infine, scene dice al programma di eseguire la funzione di precaricamento prima che il gioco inizi e la funzione di creazione per avviare il gioco. Tutte queste informazioni vengono passate all'oggetto di gioco chiamato gioco .
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 .image 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:
scene: {
preload: preload,
create: create,
update: update
}Successivamente, aggiungi una funzione di aggiornamento sotto la funzione di creazione:
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 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.
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 il nostro pezzo di gioco di conseguenza. Nell'esempio seguente, il pezzo di gioco viene spostato di 2px, ma puoi impostarlo su un numero maggiore o minore. Spostare il pezzo 1px 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 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. L'ostacolo1 è un quadrato blu e l'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.
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 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:
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 qui sopra sposterà l'ostacolo1 lungo lo schermo e l'ostacolo2 attraverso l'area di gioco di 4px 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 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 collider richiede tre parametri. I primi due parametri identificano gli oggetti 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.
