Keolot Phaser Editor 2D

Keolot Phaser Editor ist eine kostenlose visuelle Entwicklungsumgebung für 2D-Browsergames auf Basis der Open-Source-Phaser-Engine mit integrierter Matter-JS-Physik. Die Anwendung bietet integrierte Funktionen zum visuellen Erstellen und Bearbeiten von Szenen, Spielobjekten, Animationen, Audio und Tastaturbefehlen sowie zum Schreiben von Spiellogik in Javascript und ermöglicht die Einbindung von Plugins und globalen Skripten. Dank der visuellen Darstellung wird die Erstellung eines Spieldesigns im Vergleich zur direkten Arbeit mit der Phaser-Bibliothek ohne visuelle Darstellung deutlich vereinfacht.

Im interaktiven Editor können Sie visuell ein Design erstellen, Objekte verschieben und neue hinzufügen. Sie können sowohl mit der Maus als auch mithilfe von Oberflächenelementen navigieren, einschließlich der Zoomfunktion. Lineale mit Koordinaten erleichtern die Navigation. Folgende Phaser-Spielobjekte können visuell hinzugefügt, kopiert, bearbeitet und gelöscht werden:

– Bild

– Text

– Sprite

– Partikel

– Video

– Rechteck

– TileSprite

Neben dem interaktiven Editormodus gibt es zwei Spielvorschaumodi:

1) Vorschau der aktuellen Szene. Hier können Sie das Spiel pausieren und die Wiedergabe fortsetzen sowie mit Objekten interagieren und deren Parameter im Inspektor in Echtzeit ändern. Im Vorschaumodus einer bestimmten Szene können Sie nicht zwischen Szenen im Spiel wechseln; es handelt sich lediglich um die Anzeige einer bestimmten Szene. Der Szenenvorschaumodus wird außerdem im Debug-Physikmodus gestartet.

2) Spielvorschau: Das Spiel wird unverändert gestartet, ohne die Möglichkeit, Objekte zu überprüfen und die Wiedergabe zu pausieren.

Es gibt eine Konsole zum Debuggen und Anzeigen von Fehlern.

Im Objektinspektor können Sie Parameter für Spielobjekte festlegen (z. B. X- und Y-Koordinaten, Winkel, Deckkraft, Textur, Tiefe usw.), physikalische Parameter, Partikelparameter und deren Erscheinungsbild anpassen (z. B. Lebensdauer, Frequenz, Geschwindigkeit, Alpha usw.) und weitere Eigenschaften in den Bedienfeldern anpassen, z. B. Animationstypen und Audioeinstellungen.

Bild- und Sprite-Objekte können direkt im Objektinspektor mit nur einem Klick in physische Materieobjekte umgewandelt werden. Physikalische Parameter (z. B. Dichte, Kollisionsform, Kollisionskategorie, Restitution, Schwerkraft ignorieren usw.) können ebenfalls festgelegt werden. Im Skripteditor können Sie weitere Eigenschaften und Spielobjekte erstellen und anpassen, als würden Sie direkt in Phaser arbeiten. Der visuelle Editor bietet Ihnen jedoch alles, was Sie benötigen.

Die Entwicklungsumgebung unterstützt die visuelle Erstellung der folgenden vorinstallierten Assets:

– Bild (Bitmap-Bilder: JPG, PNG, WEBP, AVIF, GIF, SVG)

– SVG (Vektorbilder)

– Audio (MP3, WAV, OGG, M4A)

– Schriftart (TTF, OTF)

– Video (MP4, WEBM)

– Spritesheet

– Atlas

– Animation

– BitmapFont

– JSON

– TXT

– XML

– GLSL

– TilemapTiledJSON

Im Szeneninspektor können Sie Szenen nach oben oder unten verschieben, die lokale Hintergrundfarbe der Szene ändern, standardmäßige physische Grenzen mit einem Klick festlegen und Szenenskripte für die Hauptfunktionen der Phaser-Spielszene erstellen:

– Init()

– Preload()

– Create()

– Update(time, delta)

Sie können auch ein benutzerdefiniertes Skript für die Szene hinzufügen, z. B. mit Ihren eigenen Funktionen. Dieses wird vor der Initialisierung dem Spielcode hinzugefügt. Wenn Sie die Funktionen „Init“, „Preload“, „Create“ oder „Update“ in der benutzerdefiniert-spezifischen Version schreiben, werden diese ignoriert, da hierfür spezielle Abschnitte vorhanden sind.

Im Texteditor mit Syntaxhervorhebung können Sie sowohl Skripte (JS, TS) als auch Textdateien (JSON, TXT) bearbeiten. Der Texteditor unterstützt grundlegende Funktionen und ist völlig ausreichend. Für eine komfortablere Arbeit mit dem Code empfehlen wir jedoch die Verwendung eines Drittanbieter-Code-Editors zum Erstellen und Bearbeiten von Skriptdateien. Beachten Sie beim Schreiben von Skripten die offizielle Dokumentation der Phaser 3.90-Bibliothek.

Der Code-Editor enthält außerdem Codevorlagen für gängige Situationen, z. B. zum Hinzufügen eines Ereignisses zu einem Objekt, Tween-Animationen, Erstellen eines benutzerdefinierten physischen Objekts, Tastenereignissen, Kollisionsbehandlung usw.

Das erstellte Projekt kann gespeichert, als ZIP-Datei exportiert und das fertige Spiel zum Starten im Browser als ZIP-Datei exportiert werden.