Tutorial Phaser - Parte 2: un astronave sullo schermo

Nell’articolo precedente abbiamo parlato brevemente delle caratteristiche di Phaser ed abbiamo accennato al fatto che il framework non è pensato per essere caricato da file locale e che quindi potrebbe essere necessario un Web Server.

In questo articolo inizieremo invece il nostro progetto che inizialmente si limiterà a caricare l’immagine di un astronave e mostrarla sullo schermo.

Sulla directory di lavoro creiamo i seguenti file:

index.html conterrà del semplice codice html coi rifermento ai file js di Phaser e del nostro programma

<html>
<head>
<script src='./phaser.min.js'></script>
<script src='./game.js'></script>
</head>
<body>
</body>
</html>

ship.png la nostra astronave
Scarica
laser.png il laser della nostra astronave
Scarica
il file js di phaser
Scarica
game.js il file principale che conterrà il nostro programma javascript. Inizialmente sarà vuoto, lo riempiremo nel corso dell’articolo.

Nel file game.js andremo quindi ad inizializzare Phaser creando un oggetto che chiameremo game che rappresenterà il gioco.

var game = new Phaser.Game(800, 600, Phaser.AUTO, ”, { preload: preload, create: create, update: update });

i primi 2 parametri rappresentano rispettivamente la larghezza (800) e l’altezza (600) dello schermo

il secondo parametro indica la modalità con cui inizializzare Phaser: può avere 3 valori: Phaser.CANVAS: utilizza la canvas del browser. E’ un sistema che favorisce la compatibilità a discapito delle performance. Phaser.GL: utilizza le webgl per avere accelerazione hardware nel gioco. Potrebbe non essere disponibile. Phaser.AUTO Autorileva la disponibilità o meno delle webgl sul sistema in uso ed in base a questo sceglie automaticamente se usare GL o CANVAS. E’ il sistema più consigliato, ma in certi casi la compatibilità maggiore viene ottenuta con Phaser.CANVAS. Se volete eseguire il gioco senza un Web Server vi consiglio di usare l’opzione Phaser.CANVAS.

il terzo parametro è un array associativo che indica quali funzioni javascript assolveranno determinati compiti. In particolare nel tutorial avremo bisogno di definire le funzioni preload per caricare gli assets di gioco (risorse: immagini, audio, …), create per inizializzare il gioco, update chiamato ad ogni ciclo di gioco. Tutti punteranno a funzioni omonime che andremo adesso a scrivere:

funzione update

Il gioco in fase di svolgimento non farà nulla quindi lasceremo la funzione vuota.

function update() {

}

funzione preload

Il nostro gioco userà per il momento 2 immagini: l’astronave principale ed il gioco. Associamo all’immagine ship.png la chiave.

// funziona di precaricamento
function preload() {
game.load.image('ship', 'ship.png');
}

funzione create

creeremo qui la situazione iniziale del gioco: un astronave sul fondo dello schermo allineata orizzontalmente al centro.

Per calcolare il centro in orizzontale consideriamo la metà della risoluzione orizzontale (800/2=400) meno la metà della dimensione orizzontale dell’astronave (64/2=32) quindi 368. Per la posizione verticale lo sprite è alto 58 quindi lo collocheremo ad altezza 500 per in basso con un certo margine (42 pixel).

Le cose importanti da sapere sono che le coordinate vengono calcolate orizzontalmente da sinistra verso destra e verticalmente dall’alto verso il basso e rispetto allo sprite si riferiscono all’angolo in alto a sinistra.

per creare lo sprite useremo la funzione this.add.sprite(posizionex, posizioney, chiaveAsset)

function create(){
sprite = this.add.sprite(368, 500, 'ship');
}

Se adesso aprite il vostro file index.html col browser dovreste vedere questo

Potete anche scaricare lo zip del progetto
Scarica

Abbiamo realizzato il primo programma con Phaser. Nel prossimo articolo vedremo come renderlo più interessante aggiungendo l’interazione con l’utente.

Precedente Indice Successivo

Tutorial Phaser – Parte 2: un astronave sullo schermo

funzione update

funzione preload

funzione create

Leave a Reply Annulla risposta