phaser-frameworkAan de slag met phaser-framework


Opmerkingen

Phaser is voornamelijk een open source Desktop en Mobile HTML5-gamekader.

Het bevat een robuuste set documentatie, functies en voorbeelden om u snel op weg te helpen naar een werkspel. Het ondersteunt WebGL, via de Pixi.js rendering engine, en bevat een Canvas fallback voor ondersteuning op oudere apparaten.

Hoewel de engine is gebouwd in JavaScript, bevat deze ook TypeScript- definities

Er is een nieuwe voorstelling van het project dat voldoet aan ES6, Lazer genaamd.

versies

Phaser 2

Versie Publicatiedatum
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 Vijf koningen 2016/06/17
2.4.9 Vier koningen 2016/06/16
2.4.8 Kijk Hill 2016/05/19

Aan de slag Phaser

  1. Maak een map aan
  2. Maak een index.html in de nieuwe map. Open het in de Bracket-editor
  3. Download de Phaser-repository van github en pak het phaser.js- bestand uit de map build. Plaats het bestand in uw projectmap.
  4. Open index.html en koppel de phaser.js binnen de koptag .
<!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. Maak nog een js-bestand in de map game.js
  2. Open het game.js- bestand in de editor en schrijf de volgende code:
// 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. Sla alle bestanden op en open index.html met behulp van Bracket liveserver (pictogram rechtsboven).
  2. De Phaser-ontwikkelomgeving is nu gemaakt. Er moet een consolescherm in de browser verschijnen voor foutverificatie.

Aan de slag met Phaser met behulp van Node.js

  1. Maak een map aan waar je je game live wilt hebben en ga daar naartoe
mkdir my-new-game
cd my-new-game
  1. Initialiseer de map met npm.
npm init -y
  1. Installeer phaser als een knooppuntpakket.
npm install phaser
  1. Installeer http-server als een globale module, te gebruiken op de opdrachtregel.
npm install -g http-server
  1. Maak een index.html-bestand en verwijs naar het uitvoerbare Phaser-bestand en plak de volgende code erin.
<!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. Start de server en laad http: // localhost: 8080 in uw browser!
    hs