Organisation/Initialisierung eines Phaser Projekts

Im folgenden Tutorial werden einige verschiedene Möglichkeiten gezeigt, wie man Phaser Initialisieren und die Funktionen des Spiels organisieren kann. Beginnend dabei, dass alles im globalen Scope abgelegt wird, über die Zusammenfassung in einem State, bis hin, dass der State von Phaser.State erbt. Wenn man sein Projekt in mehrere Dateien aufteilen möchte, sollte man zusätzlich ein Blick auf Webpack, Grunt, Browserify und RequireJs werfen.

Einfacher Weg

Als Erstes wird man darauf stoßen, dass man die Spielfunktionen im globalen Scope erstellt und diese dann Phaser übergibt.

function preload() {
//Herunterladen aller Dateien
}
function create() {
//Erstelle alle Spielobjekte
}
function update(){
//Action
}
var spiel = Phaser.Game(weite, höhe, Phaser.AUTO, {preload:preload, create:create, update:update});

Das ist eine schnelle Lösung aber keine schöne und das hat mehrere Gründe. Zum einen verschmutzt man den globalen Scope, was niemals eine gute Idee ist, und zum anderen wird es dadurch auch schnell unübersichtlich. Weiterhin verhindert diese Methode das einfache Wiederverwenden.

Als Objekt

Besser wird es, wenn man die Laufzeitmethoden für Phaser in einem Objekt zusammenfasst.

var GameObject = {
  function preload() {
    //Herunterladen aller Dateien
  },
  function create() {
    //Erstelle alle Spielobjekte
  },
  function update(){
    //Action
  }
}
var spiel = Phaser.Game(weite, höhe, Phaser.AUTO, GameObject);

Wie man hier sieht, wurde die Anzahl der Objekte im globalen Scope verringert und der Grad der Wiederverwendbarkeit steigt auch, da man jetzt alle nötigen Funktionen im `GameObjekt` erstellt.

Als State

Diese Methode ist eine Erweiterung der Vorherigen. Hier wird das GameObjekt in ein State verwandelt und dann wird dieser State gestartet.

var GameState1 = {
  function preload() {
    //Herunterladen aller Dateien
  },
  function create() {
    //Erstelle alle Spielobjekte
  },
  function update(){
    //Action
  }
}
var spiel = Phaser.Game(weite, höhe, Phaser.AUTO, '');
spiel.state.add('State1', GameState1);
spiel.state.start('State1');

Mit dieser Methode lässt sich der State einfach in ein anderes Projekt übertragen und gleichzeitig bleibt der globale Scope aufgeräumt. Wenn man möchte, kann man verschiedene States auch noch in einem Objekt zusammenfassen.

Als Erbe von Phaser.State

Die nächste Stufe ist, dass unser State von Phaser.State erbt.

var GameState1 = function() {
 Phaser.State.call(this);
};

GameState1.prototype = Object.create(Phaser.State.prototype);
GameState1.constructor = GameState1;

GameState1.prototype.preload = function() {
  //Herunterladen aller Dateien
};
GameState1.prototype.create = function() {
  //Erstelle alle Spielobjekte
};
GameState1.prototype.update = function(){
  //Action
};

var spiel = Phaser.Game(weite, höhe, Phaser.AUTO, '');
spiel.state.add('State1', GameState1);
spiel.state.start('State1');

Nun haben wir unser eigenen State. Weitere Funktionen werden als Prototyp implementiert und beim Bearbeiten erkennen die meisten IDE’s die Funktionen von Phaser.State.

Vererbung mit ECMAScript 2015 (ES6)

Wenn man sowieso alte Zöpfe abschneidet, dann kann man auch gleich mit ES5 programmieren. Alle aktuellen Browser unterstützen es mittlerweile sehr gut. Alternativ kann man mit Webpack oder Grunt den Code zurück übersetzen lassen. Mit ES6 vereinfacht sich die Vererbung sehr, so dass es übersichtlicher wird.


class GameState1 extend Phaser.State { 
  constructor(){
    super();
  }
  preload() {
    //Herunterladen aller Dateien
  }
  create() {
    //Erstelle alle Spielobjekte
  }
  update() {
    //Action
  }
} 

var spiel = Phaser.Game(weite, höhe, Phaser.AUTO, '');
spiel.state.add('State1', GameState1);
spiel.state.start('State1');

 

Mit Lade-Bildschirm

Um nun ein komplexeres Projekt zu erstellen benötigt man einen Ladebildschirm, bei dem die Ressourcen für das Spiel geladen wird. Dazu benutzt man eine Kombination aus States:

  • BootState: Lädt alle Ressourcen für den Ladebildschirm.
  • PreloadState: Ladebildschirm, hier werden alle oder ein Teil der Ressourcen geladen. Weiterhin ist es ratsam jede Musikdatei zu initialisieren, damit es beim ersten Abspielen nicht zu Verzögerungen kommt.
  • MainState: Hier Startet das Spiel

 

Share on FacebookShare on Google+Flattr the authorTweet about this on TwitterShare on RedditEmail this to someone

J. Wiese

Hallo du, schön, dass du dich hierhin verirrt hast! Mein Name ist Johannes Wiese und ich studiere Informatik und blogge hier ab und zu über dieses und jenes. Wenn dir etwas gefällt oder du Fragen hast, dann lass es mich jeder Zeit wissen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.