Phaser 003 – Blanko-Dateien & Ordner

Um mit Phaser endgültig durchstarten zu können, benötigt der Einsteiger lediglich drei Dateien. Diese Dateien werden so, leicht verändert und/oder erweitert immer wieder eingesetzt werden. Versteht man diese Struktur sollte der Einstieg leicht fallen.

Drei Files

Im folgenden Bild unten ist die schon angesprochene Ordnerstruktur dargestellt. Die index.html steht ganz oben, und liegt ausserhalb des Asstes Ordner. Die index.html ist die Datei die im Browser alles andere startet.

Im gleichen Verzeichnis wie die index.html befindet sich der Assets-Ordner. Dort befinden sich klassischerweise zwei weitere Ordner (je nach Komplexität eines Games evtl. auch mehr). Das ist der Image-Ordner (abgekürzt IMG) für Bilder usw. und der JS-Ordner mit den Javascript-Dateien. Dies ist der Ordner in dem die phaser.min.js und eine spätere main.js untergebracht werden.

 

Phaser Basics German

Phaser Struktur

Die Ordnernamen sind ansonsten frei wählbar. Man muss im Falle einer anderen Benennung darauf achten, die Links in den Dateien (index.html) anzupassen.

Download

Der Download beinhaltet die index.html, sowie alle benötigten Ordner, inkl zusätzlicher Files, zum sofortigen Durchstarten mit Phaser. Die phaser-min.js ist aktuell 2.8.5 Phaser CE von 2017. Das ZIP-Verzeichnis hat eine Größe von 250 Kilobyte,

[wpdm_package id=’15690′]

 

Arbeiten mit XAMPP und Phaser

Bei XAMPP (eurem virtuellen Webserver) findet ihr den Ordner htdocs. Dort legt ihr einen Projektordner an, in der ihr alles weitere einfügt (index.html und die weiteren Ordner mit Dateien (Bildern, Scripte und später mehr).

Den Projektordner benennt ihr mit einem kurzen,eindeutigen Namen, sagen wir zum Beispiel game_01.

In den Ordner game_01 muss rein: die index.html, und den beschriebenen Ordner assets.

Im assests-Ordner erstellt ihr zwei weitere Verzeichnisse (Ordner): js (für die main.js und phaser.min.js). In den zweiten Ordner images werden die Bilder abgelegt.

Habt ihr jetzt XAMPP gestartet, dann ist der Pfad zu eurem Projekt im Browser (siehe Bild):
http://localhost/game_01 oder über die IP-Adresse 127.0.0.1/game_01

Ruft ihr diese IP, oder die URL auf, geschieht folgendes: Der Browser schaut in den Ordner game_01 und stellt fest: „…aha, da liegt eine index.html, die nehmen ich“

Die index.html holt sich dann weitere Infos aus der min.js und aus der phaser.min.js Das wurde der index.html in den folgenden Zeilen mitgeteilt:

Jetzt sieht man auch schon warum die Ordnerstruktur wichtig ist, denn es steht extra dort, das die src (Source/Quelle) im Ordner assets liegt.

 

Das könnte Dich auch interessieren …

Translate »