phaser-framework Tutorial
Erste Schritte mit Phaser-Framework

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


Bemerkungen

Phaser ist in erster Linie ein Open Source-Framework für Desktop- und Mobile-HTML5-Spiele.

Es enthält eine umfangreiche Dokumentation, Funktionen und Beispiele, um Sie schnell zu einem funktionierenden Spiel zu bewegen. Es unterstützt WebGL über die Pixi.js- Rendering-Engine und enthält einen Canvas-Fallback für ältere Geräte.

Obwohl die Engine in JavaScript integriert ist, enthält sie auch TypeScript- Definitionen

Es gibt eine neue Vorstellung des Projekts, das ES6-konform ist, genannt Lazer .

Versionen

Phaser 2

Ausführung Veröffentlichungsdatum
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 Fünf Könige 2016-06-17
2.4.9 Vier Könige 2016-06-16
2.4.8 Watch Hill 2016-05-19

Erste Schritte Phaser

  1. Erstellen Sie einen Ordner
  2. Erstellen Sie eine index.html im neuen Verzeichnis. Öffnen Sie es im Bracket-Editor
  3. Laden Sie das Phaser-Repository von github herunter und nehmen Sie die Datei phaser.js aus dem Build-Ordner. Legen Sie die Datei in Ihr Projektverzeichnis.
  4. Öffnen Sie index.html und verknüpfen Sie die phaser.js im Header-Tag. 
<!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. Erstellen Sie eine weitere js-Datei im Verzeichnis game.js
  2. Öffne die game.js- Datei im Editor und schreibe folgenden 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. Speichern Sie alle Dateien und öffnen Sie index.html mit dem Bracket-Liveserver (oben rechts).
  2. Die Phaser-Entwicklungsumgebung ist jetzt erstellt. Im Browser sollte ein Konsolenbildschirm zur Fehlerüberprüfung angezeigt werden.

Erste Schritte mit Phaser mithilfe von Node.js

  1. Erstellen Sie einen Ordner, in dem Sie Ihr Spiel live haben möchten, und wechseln Sie in diesen Ordner 
mkdir my-new-game
cd my-new-game
  1. Initialisieren Sie das Verzeichnis mit npm. 
npm init -y
  1. Installieren Sie phaser als Knotenpaket. 
npm install phaser
  1. Installieren Sie den http-Server als globales Modul, das in der Befehlszeile verwendet werden soll. 
npm install -g http-server
  1. Erstellen Sie eine index.html-Datei, verweisen Sie auf die ausführbare Phaser-Datei und fügen Sie den folgenden Code ein. 
<!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. Starten Sie den Server und laden Sie http: // localhost: 8080 in Ihren Browser! 
    hs


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow