Skip to content

Level Editor Handbuch

Der Level Editor ist das zentrale Werkzeug zum Bauen, Testen und Pflegen der Spielwelt. Hier entstehen Grundriss, Laufwege, Kollision, NPC-Platzierung, Trigger und die meisten sichtbaren Szenen.

Zugriff

  1. npm run dev
  2. Spiel mit ?editor öffnen
  3. Tab Level Editor wählen

Level Editor

Was auf dem Screenshot zu sehen ist:

  • oben links: Weltwahl und Editor-Tabs
  • linke Spalte: Levelverwaltung, aktiver Bearbeitungstab und Werkzeugpalette
  • Mitte: die eigentliche Karte
  • unten links: Undo, Redo, Reset View und Speichern

Drei typische Arbeitsansichten

Grundriss und Tiles

Die Standardansicht im Tile-Modus eignet sich für:

  • Boden und Wände zeichnen
  • die Levelstruktur aufbauen
  • Spawnpunkte setzen
  • dekorative Kacheln verteilen
  • den groben Levelrhythmus festlegen

Hier entsteht also die statische Bühne, auf der sich später NPCs, Interaktionen und Quests abspielen.

Layer-Verwaltung

Level Editor - Layers

Diese Ansicht ist wichtig, wenn ein Level aus mehr als nur Boden und Wand besteht. Sichtbar sind:

  • Default-Tileset und Quell-Kachelgröße
  • die Layerliste von oben nach unten
  • Sichtbarkeit und Blockierung pro Layer
  • einen optionalen Condition-Builder pro Layer
  • der Rendermodus pro Tile- und Animated-Layer
  • zusätzliche Tile- und Animated-Layer
  • die Reihenfolge, die später das Rendering bestimmt

Gerade für größere Karten lohnt es sich, Layer früh sauber zu trennen:

  • Untergrund
  • feste Geometrie
  • begehbare Details
  • Vordergrund und Dekoration
  • animierte Spezialschichten

Entities und Template-Instanzen

Level Editor - Entities

In dieser Ansicht sieht man:

  • die Platzierungs- und Auswahlwerkzeuge für Entities
  • die Template- und Treasure-Palette
  • den Inspector einer ausgewählten Template-Instanz
  • Instanz-Defaults für this.-Switches und this.-Variablen
  • statebasierte Darstellung und Interaktion

Wie Layer, Entities und Templates zusammenspielen

Für größere Unterrichts- oder Storywelten ist es wichtig, diese drei Ebenen sauber zu trennen:

  • Layer bilden die statische Bühne: Boden, Wände, Dekoration und Vordergrund.
  • Entities liefern Logik, Interaktion, Bewegung, Trigger und sichtbare Figuren.
  • Templates sorgen dafür, dass wiederkehrende Entity-Typen nicht in jedem Level neu gebaut werden müssen.

Ein typischer Aufbau sieht so aus:

  1. Untergrund und Kollision über Tile-Layer anlegen
  2. feste Objekte und Sichttrennung über weitere Layer aufbauen
  3. NPCs, Trigger, Schalter, Treasures und Spawnpunkte als Entities setzen
  4. wiederkehrende NPC- oder Objektarten über Templates definieren
  5. pro Instanz nur noch Position, this.-Defaults, Pfade oder einzelne States anpassen

Gerade dadurch bleibt ein Projekt mit mehreren Welten wartbar: Die Karte bleibt lesbar, die Logik bleibt an den Entities, und wiederholte Muster landen in Templates statt in duplizierten Einzeldefinitionen.

Funktionen des Editors

Levelverwaltung

  • Level wählen
  • neue Level anlegen
  • bestehende Level speichern
  • Größe des Levels anpassen
  • zwischen Welten wechseln

Die Levels werden pro Welt unter public/data/worlds/<world>/levels/ gespeichert.

Bearbeitungstabs

Der Level Editor ist in mehrere logische Bereiche getrennt:

  • Tiles: Kacheln malen, löschen und Layer füllen
  • Entities: NPCs, Objekte, Templates und Trigger platzieren
  • Layers: Layer anlegen, sortieren und konfigurieren
  • Settings: levelweite Eigenschaften wie Musik, Spawn und Effekte

Levelweite Einstellungen

Level Editor - Settings

Im Settings-Bereich des Levels werden typischerweise gepflegt:

  • Levelname und Spawn
  • Musik
  • Effekte für Licht, Wetter und Atmosphäre
  • optional das Spielerlicht in Nacht- und Höhlenmodus
  • onEnter
  • onFirstLoad

Diese Einstellungen werden leicht übersehen, sind aber für das Verhalten im Spiel zentral. Falscher Spawn, fehlende Musik oder nicht gesetzte Einstiegstrigger wirken schnell wie Laufzeitfehler, obwohl eigentlich nur die Levelkonfiguration unvollständig ist.

Tile-Bearbeitung

Im Tile-Modus stehen mehrere Werkzeuge bereit:

  • Pinsel
  • Füllen
  • Radierer
  • Rechteck- und Messwerkzeuge
  • Marker für Spawn oder Spezialpunkte

Zusätzlich kann die Werkzeugstärke für breitere Malvorgänge angepasst werden.

Layer

Typische Layeraufteilung:

  • Ground: begehbarer Untergrund
  • Walls: blockierende Geometrie
  • Walkable / Furniture / Decoration: dekorative oder halb-logische Schichten
  • weitere Speziallayer je nach Welt

Die Renderreihenfolge und Blockierung entstehen nicht nur über den Layernamen, sondern über die Layerdefinitionen im Level.

Rendermodus pro Layer

Für Tile- und Animated-Layer lässt sich zusätzlich ein Rendermodus wählen. Damit kann dieselbe Karte entweder klassisch in fester Layer-Reihenfolge oder dynamisch gemeinsam mit Entities sortiert werden.

Verfügbar sind drei Modi:

  • Statisch: Der Layer wird so gerendert, wie man es aus klassischen Tile-Editoren kennt. Die Reihenfolge ergibt sich nur aus der Position des Layers in der Liste.
  • Dynamisch gruppiert: Zusammenhängende belegte Tile-Bereiche werden als Gruppe behandelt und gemeinsam mit Spieler, NPCs und anderen Entities nach ihrer Unterkante sortiert.
  • Dynamisch pro Kachel: Jede belegte Kachel wird einzeln nach ihrer Unterkante sortiert. Das ist am flexibelsten, aber auch der aufwendigste Modus.

Wichtig für die Praxis: Die beiden dynamischen Modi laufen in derselben Tiefensortierung wie Spieler, NPCs und andere Entities. Statische Layer bleiben dagegen streng unter oder über diesem gemeinsamen Pass, je nachdem, wo sie in der Layerliste relativ zur Entity-Ebene liegen.

Bedingungen pro Layer

Jeder Layer kann zusätzlich eine Bedingung erhalten. Der Builder funktioniert genauso wie bei Entity-States oder Journal-Einträgen.

Damit lassen sich Layer nur dann anzeigen, wenn eine Bedingung erfüllt ist, zum Beispiel:

  • Nacht- und Tagvarianten eines Raums
  • einblendbare Geheimgänge
  • zerstörte oder reparierte Dekoration
  • umschaltbare Vordergrund- oder Atmosphärenebenen

Beispiele:

is_night

secret_door_open && !alarm_active

Im Spiel und im Testlauf gilt dann:

  • ist die Bedingung wahr, wird der Layer normal gerendert
  • ist die Bedingung falsch, wird der Layer nicht angezeigt
  • blockierende Layer mit falscher Bedingung blockieren dann ebenfalls nicht

Im Editor selbst bleibt der Layer trotzdem bearbeitbar. Die Bedingung wirkt also auf die Laufzeitdarstellung, nicht auf die eigentliche Autorensicht.

Wann welcher Modus sinnvoll ist

  • Statisch eignet sich für Boden, Wände, normale Dekoration und alles, was immer eindeutig unter oder über den Entities liegen soll.
  • Dynamisch gruppiert eignet sich für Baumkronen, Möbeloberteile, Torbögen oder größere Überhänge, die aus mehreren zusammenhängenden Tiles bestehen.
  • Dynamisch pro Kachel eignet sich für verstreute Blätter, unregelmäßige Dachkanten, einzelne hängende Dekoteile oder andere Motive, bei denen jedes Tile unabhängig reagieren soll.

Wichtige Eigenschaft der Gruppierung

Beim gruppierten Modus zählt nur der tatsächlich belegte Bereich. Leere Tiles dazwischen verbinden Gruppen nicht.

Das ist wichtig für Motive wie:

  • eine Baumkrone oben links
  • eine zweite Baumkrone weiter unten
  • viel leerer Raum zwischen beiden

In diesem Fall entstehen zwei getrennte Gruppen. Die Runtime behandelt also nicht die gesamte Layerfläche als ein großes Objekt, sondern nur die zusammenhängenden Tile-Inseln. Genau deshalb kann man in solche Layer gezielt nur die relevanten Tiles setzen und den Rest leer lassen.

Hinweise für gute Layer-Struktur

  • Ground sollte möglichst vollständig sein.
  • Walls oder vergleichbare Blockierlayer sollten nur echte Hindernisse enthalten.
  • Decoration ist gut für Vordergrunddetails, die nicht blockieren.
  • Animated-Layer eignen sich für Wasser, Leuchten oder Tileset-Animationen.
  • Dynamisch gruppierte Layer sind meist die beste Wahl für Vordergrundteile großer Objekte.
  • Dynamische Einzelkachel-Layer sollte man sparsam einsetzen und nur für wirklich unregelmäßige Motive verwenden.
  • Layer-Bedingungen eignen sich für Zustandswechsel der Umgebung, nicht als Ersatz für Entity-Logik.

Eine saubere Layerstruktur spart später viel Arbeit bei Kollision, Sichtbarkeit und Debugging.

Entities und Inspector

Sobald eine Entity ausgewählt ist, erscheint links der Inspector. Dort lassen sich unter anderem bearbeiten:

  • id, Position und Typ
  • Template-Zuordnung
  • Instanz-Defaults für Template-Variablen und -Switches
  • Indikator-Ausrichtung und -Offsets
  • States mit Bedingungen
  • Sprites und Displaygrößen
  • Kollision
  • Bewegungs- und Interaktionsanimationen
  • Trigger wie onInteract und onTouch
  • zyklische Pfade für patrouillierende Entities

Wichtige neuere State-Optionen

Besonders wichtig sind diese State-Optionen:

  • Display Width / Height für logische Größe und Darstellung
  • drawOnTop / Ganz oben pro State für fliegende oder überlagernde NPCs
  • Indicator Alignment / Offset für saubere E- und !-Positionierung
  • state-spezifische Pfade, auch für Template-Instanzen über Overrides

Entity-Typen im Alltag

Im Level Editor arbeitet man meistens mit diesen Typen:

  • NPC
  • Object
  • Template
  • Treasure
  • Spawn

Template und Treasure werden nicht komplett lokal definiert, sondern auf zentrale Definitionen aus den Settings bezogen.

Wann welcher Typ sinnvoll ist

  • NPC: einmalige Figuren mit eigener State-Logik
  • Object: interaktive, aber meist unbewegte Weltobjekte
  • Template: wiederverwendbare NPC- oder Objektfamilien mit Instanzwerten
  • Treasure: standardisierte Belohnungsobjekte mit Loot-Logik
  • Spawn: Start- und Zielpunkte für Spieler oder Events

Templates und Template-Instanzen

Template-Entities nutzen zentrale Definitionen aus den Welt- oder Global-Settings, können aber pro Instanz überschrieben werden:

  • State-Eigenschaften
  • Pfade
  • this.-Variablen
  • this.-Switches

Dadurch lassen sich wiederverwendbare NPC- oder Objektfamilien bauen, ohne jede Instanz vollständig neu zu pflegen.

Der eigentliche Template-Baukasten liegt in den World- und Global-Settings. Im Level Editor werden Templates dann instanziiert und pro Instanz feinjustiert.

Typischer Template-Workflow

  1. Template in den Settings anlegen
  2. States, Spritegrößen, Pfade und Interaktionen definieren
  3. Template im Level Editor aus der Palette platzieren
  4. Instanz-Defaults und eventuelle State-Overrides setzen
  5. im Spiel testen

Typischer Workflow für einen Unterrichtsraum

Ein praktisches Beispiel:

  1. Raumstruktur und Laufwege über Ground und Walls bauen
  2. Vordergrund- oder Atmosphäre-Layer für Tafeln, Schatten oder Dekoration ergänzen
  3. einen Lehrer-NPC oder Inspektor als Template vorbereiten
  4. dieses Template mehrfach im Level platzieren
  5. pro Instanz nur noch Namen, Variablen, Switches oder Pfade anpassen
  6. einzelne Spezialobjekte wie Truhen, Teleporter oder Questterminals direkt als Entities setzen
  7. Spawn, Musik und onEnter-/onFirstLoad-Trigger final prüfen

Trigger und Interaktionen

Alle Entity- und Level-Trigger nutzen denselben Aktionsbaukasten. Dazu gehören unter anderem:

  • Text und Dialoge
  • Queststarts
  • Variablen- und Switch-Aktionen
  • Teleports und Weltwechsel
  • Bewegungs- und Animationsbefehle
  • Eingabedialoge
  • Effekte, Bilder, Videos und Audio
  • Schleifen und Verzweigungen

Die Details dazu stehen in der Interaktionstypen-Referenz.

Praktischer Workflow

Ein sinnvoller Arbeitsablauf ist:

  1. Levelgrundriss zeichnen
  2. Layer und Kollisionen prüfen
  3. Layerreihenfolge und Rendermodus sauber festlegen
  4. zentrale Templates in den Settings vorbereiten
  5. Entities und Template-Instanzen platzieren
  6. States, Bedingungen und Trigger pflegen
  7. Spawn, Musik und Effekte setzen
  8. speichern und direkt im Spiel testen

Häufige Fehler

  • Kollisionen liegen auf dekorativen statt auf wirklich blockierenden Layern.
  • Ein Level besitzt zwar einen Spawn, aber Musik oder Einstiegstrigger sind in den Settings nicht gesetzt.
  • Wiederkehrende NPCs werden als Einzelobjekte gepflegt, obwohl ein Template die bessere Struktur wäre.
  • Ein großer Vordergrund-Layer steht auf Statisch, obwohl sich Spieler und NPCs eigentlich sauber dahinter und davor einsortieren sollen.
  • Für ein zusammenhängendes Motiv wird Dynamisch pro Kachel gewählt, obwohl Dynamisch gruppiert stabiler und einfacher wartbar wäre.
  • States überlagern sich in der falschen Reihenfolge, sodass scheinbar „falsche“ Darstellungen aktiv werden.

Verwandte Werkzeuge

Zum Levelbau gehören meist auch diese Bereiche: