Phaser 040 – Level & More (Phaser States)

Bevor es konkret an eine Loadingbar, ein Intro, einen Timer bzw. Timeout oder Game Over geht, müssen erst einmal die Bedingungen für Szenenwechsel geschaffen werden. Bei Phaser geschieht das über sogenannte States. Etwas Theorie.

Tutorial Level: Medium (2,5 / 5)

Kurzbeschreibung

Phaser States machen es möglich verschiedene Phasen eines Game festzulegen. Klassischerweise ist die Reihenfolge ein Booter, dann ein Preloader der die Game-Inhalte lädt und den Ladebalken anzeigt. Anschliessend gibt es einen Splashscreen mit dem Game Title. Es folgt das Game und am Ende ein Gameover.

index.html

Jetzt ist der Zeitpunkt gekommen, wo man an die index.html Hand anlegen muss. Im Script unten, der veränderten index.html, sehen wir den neuen Aufbau. Schön übersichtlich sind alle Bereiche aufgeteilt in einzelne JavaScripte bzw. Phaser-JS,die geladen werden.

Der Block im oberen Teil  <script src=….. beschreibt den Pfad zu den Scripten die geladen werden sollen. Das body(margin:0) beschreibt wie gewohnt den Abstand zum Browserrand, der Null Pixel sein soll.

Es folgt der nächste Block mit einer Funktion, die das Spiel einleitet. Dort stehen die Spielfeld-Größe (320, 480, …) und die Rendermethode.

Danach werden über game.state.add dem Game die einzelnen Teile hinzufügt: Boot, Preload, GameTitle, GamePlay und GameOver.

In der letzten Zeile dieses Blocks wird auch gleich die erste Aufgabe, das Booten, über game.state.start(‚boot‘) gestartet.

Jedes Kapitel im Spiel erhält ein separates Script, seine eindeutige Bezeichnung und wird jeweils von dem Vorgängerscript, am Ende bei Bedarf und/oder Ereignis aufgerufen. Und wieder zurück, wie es beispielsweise beim GameOver der Fall ist. Wird der Button „Play again“ gedrückt, beginnt das Spiel von vorn.

 

Das könnte Dich auch interessieren...

Translate »