phaser-framework Tutorial
Iniziare con il framework phaser

Android Cordova CSS HTML html5-canvas ionic-framework JavaScript jQuery Node.js TypeScript
Ricerca…


Osservazioni

Phaser è principalmente un framework di gioco HTML5 desktop e mobile open source.

Include un robusto set di documentazione, funzionalità ed esempi per farti muovere velocemente verso un gioco di lavoro. Supporta WebGL, tramite il motore di rendering Pixi.js , e include un fallback Canvas per il supporto su dispositivi meno recenti .

Sebbene il motore sia costruito in JavaScript, include anche le definizioni TypeScript

C'è una nuova visione del progetto che è conforme a ES6 chiamato Lazer .

Versioni

Phaser 2

Versione Data di rilascio
2.6.2 Kore Springs 2016/08/25
2.6.1 Caemlyn 2016/07/11
2.6.0 Fal Moran 2016/07/08
2.5.0 Cinque re 2016/06/17
2.4.9 Quattro Re 2016/06/16
2.4.8 Watch Hill 2016/05/19

Guida introduttiva Phaser

  1. Crea una cartella
  2. Crea un index.html nella nuova directory. Aprilo nell'editor Bracket
  3. Scarica il repository Phaser da github , quindi prendi il file phaser.js dalla cartella build. Inserisci il file nella directory del tuo progetto.
  4. Apri index.html e collega phaser.js all'interno del tag dell'intestazione. 
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>
  1. Crea un altro file js all'interno della directory denominata game.js
  2. Apri il file game.js nell'editor e scrivi il seguente codice: 
// Phaser instance, width 800px, height 600px render as CANVAS. 
// Method signature - preload, create and update

var game = new Phaser.Game(800, 600, Phaser.CANVAS,'gameContainer', { preload: preload, create: create, update: update });

function preload() {
// this method used to load your game assets
}

function create() {
// this method run only once used to create to game world
}

function update() {
// this method loop 60 times in a seconds, used to handle gameplay.
}
  1. Salva tutti i file e apri index.html usando il life server Bracket (icona in alto a destra).
  2. L'ambiente di sviluppo Phaser è ora creato. Nel browser deve essere visualizzata una schermata della console per la verifica degli errori.

Iniziare con Phaser usando Node.js

  1. Crea una cartella in cui ti piacerebbe vivere la tua partita e trasferiscila 
mkdir my-new-game
cd my-new-game
  1. Inizializza la directory usando npm. 
npm init -y
  1. Installa phaser come pacchetto di nodi. 
npm install phaser
  1. Installa http-server come modulo globale, da utilizzare sulla riga di comando. 
npm install -g http-server
  1. Creare un file index.html e fare riferimento all'eseguibile di Phaser e incollarvi il seguente codice. 
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>My Gamer</title>
    <script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
    <style type="text/css">
    body {
        margin: 0;
    }
    </style>
</head>

<body>
    <div id="helloWorld"></div>
</body>
<script>
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'helloWorld', {
    create: create
});

function create() {

    var text = "Hello World!";
    var style = {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
    };

    var t = game.add.text(game.world.centerX, 300, text, style);
    t.anchor.set(0.5);

}
</script>

</html>
  1. Avvia il server e carica http: // localhost: 8080 nel tuo browser! 
    hs


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow