Phaser 3 (introduzione) – cancellino.org

Quando l’applicazione da sviluppare è un gioco, si può usare un server web e un framework per HTML5. Con Phaser (licenza d’uso MIT) si ottiene un’applicazione multipiattaforma (non solo per dispositivi mobili).

Il framework si chiama Phaser¹ e funziona semplicemente sul browser, ma richiede un server web per evitare il problema SOP (Same Origin Policy).

Il gioco si sviluppa costruendo classi e metodi in JavaScript, ma esiste anche un editor visuale (solo a pagamento).

Ogni gioco è composto da alcuni file, vediamo un esempio della struttura del progetto:

.
 - ── assets
|   + ── images
 - ── lib
|   ├─── phaser.js
 - ── src
|   ├─── main.js
|   ├─── Scena1.js
|   ├─── Scena2.js
|   ├─── Scena3.js
├─── index.html

In questo semplice esempio, fare particolarmente attenzione alle righe 8 e 18. Il contenuto di index.html è il seguente:

<!DOCTYPE html>

<!--index.html-->

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script  src="./lib/phaser.js"></script> 
    <style>
        body { margin: 10px; padding:10px; }
        div#miodiv  { width: 1024px;  height: 768px } /* richiesto per centratura*/
    </style>
</head>
<body>

    <div id="miodiv">
        <script>screen.orientation.lock('landscape'); </script>
        <script type="module" src="./src/main.js"> </script>
    </div>

</body>
</html>

Nel file main.js si devono importare e configurare tutte le scene previste nel gioco. Il contenuto di main.js è il seguente:

// ./src/main.js

import {Scena1} from './Scena1.js'; 
import {Scena2} from './Scena2.js';
import {Scena3} from './Scena3.js'; 

const config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.NONE,
        parent: 'miodiv',
        autoCenter: Phaser.Scale.CENTER_BOTH,
        autoRound: true,
    },
    width: 1024,
    height: 768,
    backgroundColor: '#332222',
    parent: 'miodiv',
    scene: [ Scena1, Scena2, Scena3 ], 
    physics: {
        default: 'arcade',
        arcade: { debug: false }
    }
};

let game = new Phaser.Game(config);

Il contenuto di Scena1.js (è una classe con metodi da implementare obbligatoriamente, ma anche vuoti)

// ./src/Scena1.js

export class Scena1 extends Phaser.Scene
{
    constructor ()
    {
        super('Scena1');
    }

    preload () 
    {
        // questo metodo è eseguito completamente prima di passare al successivo: create()
        this.testo1 = this.add.text(112, 100, 'scena1-start \n clicca per cambiare scena');
    }

    create () 
    {
         // questo metodo è eseguito completamente prima di passare al successivo: update()
         this.input.once('pointerdown', () => {
	    // avvia un'altra Scena.
            this.scene.start('Scena2'); 
        });
    }
    
    update()
    {
       // questo metodo è il main loop, viene ripetuto ad ogni passo / step / del gioco
    }
}

Il resto del codice è nel seguente allegato.

prova1.zip Download

Prima di provarlo devi installare un server web e poi digitare nel browser direttamente l’indirizzo

http://localhost/percorso/di/installazione/index.html

Post Views: 10

https://phaser.io/ [↩]