phaser-framework Handledning
Komma igång med phaser-framework

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


Anmärkningar

Phaser är en öppen källkod för Desktop och Mobile HTML5 främst.

Den innehåller en robust uppsättning av dokumentation, funktioner och exempel för att du snabbt ska gå mot ett arbetsspel. Den stöder WebGL via Pixi.js- renderingmotorn och inkluderar en Canvas-fallback för support på äldre enheter.

Även om motorn är inbyggd i JavaScript innehåller den också TypeScript- definitioner

Det finns en ny tänkande av projektet som är ES6-kompatibelt som heter Lazer .

versioner

Phaser 2

Version Utgivningsdatum
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 Fem kungar 2016/06/17
2.4.9 Fyra kungar 2016/06/16
2.4.8 Watch Hill 2016/05/19

Komma igång Phaser

  1. Skapa en mapp
  2. Skapa ett index.html i den nya katalogen. Öppna den i Bracket-redigeraren
  3. Ladda ner Phaser-förvaret från github och tag sedan filen phaser.js från build-mappen. Placera filen i din projektkatalog.
  4. Öppna index.html och länka phaser.js i rubriktaggen . 
<!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. Skapa en annan js-fil i katalogen som heter game.js
  2. Öppna game.js- filen i redigeraren och skriv följande kod: 
// 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. Spara alla filer och öppna index.html med hjälp av Bracket liveserver (ikonen uppe till höger).
  2. Phaser-utvecklingsmiljön skapas nu. En konsolskärm bör visas i webbläsaren för felverifiering.

Komma igång med Phaser med Node.js

  1. Skapa en mapp där du vill ha ditt spel live och flytta till den 
mkdir my-new-game
cd my-new-game
  1. Initiera katalogen med npm. 
npm init -y
  1. Installera phaser som ett nodpaket. 
npm install phaser
  1. Installera http-server som en global modul som ska användas på kommandoraden. 
npm install -g http-server
  1. Skapa en index.html-fil och referera till Phaser-körbara och klistra in följande kod i den. 
<!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. Starta servern och ladda http: // localhost: 8080 i din webbläsare! 
    hs


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow