HTML-Spiele mit Phaser
Abläufe gliedern mit dem Screen Manager
B eim aktuellen Stand besteht unser Spiel Space Rush nur aus einem einzelnen Level. Sobald das Spiel umfangreicher wird, lohnt es sich, Phasers Scene Manager zu nutzen und den Code auf verschiedene Szenen aufzuteilen. Laden Sie sich dazu das Zip-File unter bit.ly/space-rush herunter. Unser Ausgangspunkt für Teil 4 entspricht dem letzten Stand aus Teil 3. Es sind lediglich zwei Gra ken hinzugekommen, die wir gleich benötigen. Falls Sie die ersten drei
Teile verpasst haben sollten, nden Sie die entsprechenden Artikel als PDFs auf der beiliegenden DVD.
Szenen vorbereiten
Wir begnügen uns hier mit zwei Szenen: einem Titelbild und dem eigentlichen Spiel. Sie könnten solche Szenen grundsätzlich auch in einer einzelnen JavaScript-Datei unterbringen, aber wir möchten den Code ja absichtlich auf verschiedene Dateien verteilen. Legen Sie einen neuen Ordner /js an, und verschieben Sie die beiden bisherigen JS-Dateien dort hinein. Fügen Sie eine neue Datei sceneTitle.js hinzu – dies wird die Szene für das Titelbild. Dann ändern Sie den Namen der bisherigen main.js in scenePlay.js – dies ist die Szene für das eigentliche Spiel. Außerdem lagern wir die Kon guration in eine neue gameInit.js aus. In der index.html müssen Sie nun alle vier JavaScript-Dateien laden:
Den Inhalt der neuen gameInit.js können Sie weitgehend vom Anfang der alten main. js herauskopieren: var config = { type: Phaser.AUTO, width: 800, height: 640, physics: { default: "arcade", arcade: { gravity: { y: 400 }, }
}, scene: [sceneTitle, scenePlay], }; var game = new Phaser.Game(config);
Das einzige, das sich hier geändert hat, ist die Zeile scene. Hier steht ein Array mit den Namen der Szenen. Phaser startet mit der ersten Szene aus dem Array.
Szene: Titelbild
Die einzelnen Szenen sind grundsätzlich so aufgebaut wie die alte main.js-Datei; es gibt jeweils einzelne Abschnitte für die preload-, create-, und update- Funktionen, wobei Sie nicht unbedingt jede dieser drei Funktionen in jeder Szene benötigen. Dazu kommen eigene Funktionen für die jeweiligen Szene. Füllen Sie die sceneTitle.js mit: var sceneTitle =
new Phaser.Scene("sceneTitle"); sceneTitle.preload = function() { this.load.image("gameTitle",
"assets/title.png"); this.load.spritesheet("button", "assets/button.png", {frameWidth:112, frameHeight:44}); } sceneTitle.create = function() { this.add.image(400,320,"gameTitle"); var btn_start = this.add. sprite(544,408,"button"). setInteractive(); btn_start.on("pointerover", function(pointer){ btn_start.setFrame(1); }, this); btn_start.on("pointerout", function(pointer){ btn_start.setFrame(0); }, this); btn_start.on("pointerdown", function(pointer){ this.scene. start("scenePlay"); }, this); }
Hierbei erzeugen wir in der ersten Zeile eine neue Szene. Die beiden Funktionen create und preload sind bereits bekannt. Da wir nun mit Szenen arbeiten, ändert sich das bisherige this.preload in ein nameDerSzene.preload. Zunächst laden wir ein Bild für den Titelbildschirm und ein Spritesheet für den Button. In der create- Funktion kommen neue Funktionen hinzu. Hier de nieren wir das Sprite als interaktiv. Dadurch können wir Mausevents abfangen und entsprechend reagieren. Bei einem pointerover oder pointerout ändern wir das aktuelle Frame. Effektiv erzeugen wir damit einen Hover-Effekt. Das pointer im Namen deutet bereits darauf hin, dass das Ganze auch auf Touchscreens funktioniert.
Bei einem Klick ( pointerdown) starten wir die Szene scenePlay. Genau betrachtet sorgt this.scene.start() dafür, dass die aktuelle Szene gestoppt wird und die angegebene Szene gestartet wird. In Phaser können auch mehrere Szenen gleichzeitig laufen. In diesen Fällen fügen Sie mit this.scene. launch() eine weitere Szene zur aktuell laufenden Szene hinzu. Das erlaubt es zum Beispiel, eine Touchscreen-Steuerung über Buttons in eine eigene Szene auszulagern und über die Spiel-Szenen zu legen.
Szene: Spiel
In der neuen scenePlay.js müssen wir nun etwas aufräumen. Zu Beginn haben wir bereits die Phaser-Kon guration entfernt. Stattdessen fügen wir am Start die neue Szene hinzu: var scenePlay = new Phaser.Scene("scenePlay");
Im nächsten Schritt gehen wir den gesamten Code in scenePlay.js durch und passen dabei all unsere Funktionen an. Die entsprechenden Stellen beginnen also mit: scenePlay.preload = function() {…} scenePlay.create = function() {…} scenePlay.update = function() {…} scenePlay.countdown = function() {…} scenePlay.countup = function(…) {…} scenePlay.playerDeath = function() {…} scenePlay.playerWon = function() {…}