....wer macht denn sowas?

Dracoo Leveleditor 101

Bereits seit März 2013 gibt es unser Spiel Dracoo the Dragon im Play Store für Android gratis zum Download. Aktuell planen wir den Dracoo-Release für iOS/iPhone/iPad. Diese Situation habe ich mir zum Anlass genommen, um den Leveleditor nochmal etwas genauer zu erklären. Er ist schließlich öffentlich und gratis verfügbar und wir haben ihn nach dem Release etwas stiefmütterlich behandelt und nicht viel darüber gesprochen. Er ist sehr einfach zu verstehen und mindestens genauso einfach zu bedienen. Man erstellt ein Level für das jeweilige Levelpack mit den verfügbaren Bausteinen und kann es direkt im Browser ausprobieren und spielen. Vielleicht möchte ja jemand von euch selber ein großartiges Level für Dracoo the Dragon machen oder sich in 2d Leveldesign üben.

Wenn ihr mir, auf welchem Weg auch immer, einige tolle Levels im JSON Format zukommen lasst, mache ich mir sehr wahrscheinlich die Mühe und verpacke sie entweder in eine Community Edition von Dracoo, oder ich erweitere in der bestehenden App die Levelpacks um die Community-Levels. Vorausgesetzt, sie erfüllen unsere Qualitätsansprüche.

Es würde mich persönlich jedenfalls sehr freuen, wenn ihr euch mit dem Leveleditor und dem Spiel auseinandersetzt. Schlussendlich ist das Spiel ja aus dem Grund entstanden, gespielt zu werden und Spaß zu machen.

Genug drum herum geredet. Wie erstelle ich jetzt ein Level?

Nach dem Öffnen dieses Links befindet ihr euch schon im Editor. Die Ansicht sieht wie folgt aus:


In der Toolbar am oberen Bildschirmrand findet man die Levelpack-Auswahl, die verschiedenen Modi-Schalter, um den Leveleditor in einen anderen Modus zu versetzen und auf der rechten Bildschirmseite alles was mit Export und Import von Levels zu tun hat. Im Hauptbereich unter der Toolbar befinden sich links die Level-Details, wo die grundlegenden Level-Eigenschaften wie Geschwindigkeit und Dauer des Levels festgelegt werden. Im gleichen Akkordeon befindet sich noch ein Panel mit dem Namen Level Items. Dort findet ihr für den gewählten Levelpack die verfügbaren Bausteine. Rechts neben der Akkordeon-Sidebar ist der Hauptbereich, wo das Level gestaltet wird. Zu Beginn ist dieser Bereich noch leer. Erst wenn ein Canvas, also eine Leinwand, erstellt wurde, können auf dieser Leinwand Objekte erzeugt und bearbeitet werden.



Zuerst muss das Levelpack für den neuen Level gewählt werden. Es entscheidet über die verfügbaren Elemente und den Grafikstil.



In den Level Details stellt man die Eigenschaften des Levels ein. Die Flug-Geschwindigkeit in m/s und die Länge des Levels in Sekunden. Diese beiden Eigenschaften in Kombination stellen die Grundlage für die Größe des Levels dar. Je höher die Fluggeschwindigkeit und je länger die Flugzeit bis das Level beendet ist, umso größer wird die Leinwand.

Die Einstellungen Chili-Random-Time und Open Leftside sind ursprünglich für Bossgegner-Levels gedacht gewesen, können aber auch in normalen Levels benützt werden:

  • Wenn die Chili-Random-Time (n) nicht auf 0 ist, bedeutet das, es wird in einem zufallsgenerierten Zeitraum zwischen 0 und n Sekunden eine Chili auf einer zufälligen Position generiert.
  • Die Einstellung Open Leftside ist per default aktiviert. Beim Deaktivieren wird auf der linken Bildschirmseite eine unsichtbare Mauer aktiviert, die verhindert, dass Dracoo und die Gegner den Bildschirm verlassen.
    Anyway, benützt diese Einstellungen eher sparsam, da sie meiner Erfahrung nach nicht besonders den Spielspaß steigern.

Zu guter Letzt sollte mit dem Drop-Down Feld Music noch einer der verfügbaren Background-Tracks ausgewählt werden. Sind diese Einstellungen vorgenommen, drückt ihr auf CREATE CANVAS und erzeugt somit die Leinwand, auf der ihr das Level fortan designt.



Im Hauptbereich erscheint ein Raster, auf dem die Objekte platziert werden können. Der Abstand der Gitternetz-Linien im Raster entspricht 0,5m in der Spielwelt.


Beim Erstellen der Leinwand wechselt die Ansicht weg von den Level Details auf die für dieses Level verfügbaren Level Items. Markiert in dieser Auflistung das Element, welches ihr in den Level einfügen möchtet.


Stellt sicher, dass der Creator Mode eingestellt ist. Ist dieser Mode aktiviert, erstellt ihr mit jedem Mausklick auf das Canvas ein neues Objekt in der Spielwelt.


Auf der Abbildung haben wir z.B. 3 Square-Elemente erstellt. Natürlich möchten wir die erstellten Elemente ausrichten und an den richtigen Platz verschieben. Beendet dafür den Creator Mode, indem ihr den Button erneut drückt.


Wenn keiner der drei Modi aktiv ist, könnt ihr die Objekte in der Welt mit der Maus verschieben und positionieren.


Vorsicht: Die Reihenfolge der Erstellung der Objekte legt fest, welche Objekte weiter vorne und welche weiter hinten sind. Wenn mehrere Objekte überlappen, kann immer nur das am weitesten vorne manipuliert werden. Ein Objekt ist immer ein volles Rechteck. Auch wenn in dem Objekt transparente Bereiche vorhanden sind, können diese Bereiche dahinterliegende Objekte überdecken.


Wird der Erasor Mode aktiviert, funktioniert die Maus als Radiergummi. Durch Anklicken eines Elementes wird dieses gelöscht.


Bei mehreren überlappenden Elementen, wird dabei wieder Rücksicht darauf genommen, welches Element am weitesten vorne liegt.


Nicht alle, aber doch einige Elemente (Gegner, Pause-Element) können noch weiter manipuliert werden. Dafür ist der Editing Mode zuständig.


Manipulation heißt in diesem Zusammenhang, das Verändern von Verhalten bestimmter Elemente in der Spielwelt. Bei Gegnern kann man zum Beispiel die Richtung, die Geschwindigkeit und das Flugmuster beeinflussen.


Klickt man einen Gegner im Editing Mode an, öffnet sich eine Eingabemaske, auf der man verschiedene Verhaltensmuster beeinflussen kann.

Wichtig zu wissen: Gegner werden, genau wie alle Objekte, außerhalb des Sichtfeldes des Spielers erstellt, kurz bevor der Spieler in diesen Bereich fliegt. Ab dem Erstell-Zeitpunkt gehen Gegner ihrem Verhalten nach, was bedeutet sie fliegen in eine spezielle Richtung und haben ein spezielles Flugmuster. Deshalb kommt es vor, dass beim Spielen des Levels der Gegner nicht an der erwarteten Position ist, da er bereits einige Meter geflogen ist, bis man ihn zu Gesicht bekommt. Diese Überlegung sollte man beim Design berücksichtigen und entsprechend die Positionierung wählen.

  • ySpeed: Wie schnell bewegt sich der Gegner auf der y-Achse, also die tatsächliche Aufwärts oder Abwärts Bewegung, bereinigt um Bewegungen der Motion Equation. Die Angaben sind in m/s. Positive Werte lassen den Charakter nach oben, negative nach unten fliegen.
  • xSpeed: Vorsicht, hier muss man auch eine Kleinigkeit wissen. Das Spiel ist so gemacht, dass nicht der Drache in einer bestimmten Geschwindigkeit fliegt, sondern die Welt sich auf ihn in einer gewissen Geschwindigkeit zubewegt. Der Drache selbst steht eigentlich still. Die Geschwindigkeit, mit der sich die Welt vorwärts bewegt, wurde bei den Level-Details vor dem Erstellen der Leinwand gewählt. Damit ein Gegner sich schneller als die Welt bewegt, also so wirkt als ober vorwärts fliegt, muss seine Geschwindigkeit höher sein, als die der restlichen Welt. Per Default wird ein Unterschied von 2m/s gewählt. Wenn die Welt eine Geschwindigkeit von 6m/s hat, wirken 8m/s beim Gegner als Vorwärtsflug, 4m/s wirken, als ob der Gegner rückwärts fliegt. Am besten, ihr probiert das Verhalten aus. Man gewöhnt sich sehr schnell daran. Gegner, die in der Welt verankert sind, wie z.B. die Spuckblumen, sollten die selbe Geschwindigkeit wie die Welt kriegen.
  • Motion Duration: Jeder Gegner hat, unabhängig von Flugrichtung und Geschwindigkeit, noch eine Motion, also eine Eigenbewegung die ihm etwas mehr Dynamik verleiht und ihn unberechenbarer macht. Die Motion-Duration ist die Zeit in Sekunden, die ein voller Zyklus dieser Bewegung vom Ausgangspunkt wieder in den Ausgangspunkt dauert. Beispiel: Bei einer sinusförmigen Wellenbewegung linear.inout wird der Auf-Abwärtsflug schneller und hektischer, wenn dieser Wert kleiner wird. Größere Werte lassen den Gegner mehr chillen.
  • Motion Peculiarity: Wie weit bewegt sich der Charakter während seiner Motion weg von seiner Ursprungsposition. Entspricht der Amplitude bei der Sinuskurve linear.inout. Wird in Metern angegeben. Soll der Gegner eine gerade Flugbahn haben und keine Motion vollführen, muss hier 0 eingestellt werden. Das ist wichtig bei Gegner, die in der Welt fix verankert sind, wie z.B. die Spuckblumen.
  • Motion Equation: Eine Auswahl an verschiedenen Flugmustern und Easing-Methoden. Ausprobieren, und ihr werdet die Unterschiede feststellen.
  • Motion Infinite: Wenn es aktiviert ist, vollführt der Gegner laufend seine Motion entsprechend der Duration, Peculiarity und Equation. Wenn dieser Wert deaktiviert wird, führt der Gegner nur eine Bewegung aus und fliegt danach gerade aus.


Es gibt auch die Möglichkeit, mit break eine erzwungene Pause ins Spielgeschehen einzubauen. Diese Pause kann dazu verwendet werden, entweder Story-Elemente zu vermitteln oder kurze Erklärungen oder Tutorials zu geben.


Mit dem Editier-Modus kann das Pause-Element mit einem eigenen Text versehen werden, der im Spiel angezeigt wird. Es sollte Rücksicht darauf genommen werden, dass entsprechend der Auflösung und Bildschirmgröße der Text nicht immer vollständig gelesen werden kann. Umbrüche müssen manuell eingefügt werden.

Speichern, Laden, Ausprobieren


In der rechten oberen Ecke des Bildschirms gibt es noch einige wichtige Steuerelemente, die den Level als JSON-Code exportieren (um ihn z.B. mir zu schicken), importieren oder direkt im Browser ausprobieren können.


Zuerst möchte ich aber die Funktion der Buttons Load Level, Push Level und dem Level-Auswahl-Feld erklären. Auf meinem Web-Server liegt eine Version des Spiels zum Probieren bereit. Diese Version hat 30 Levels verteilt auf 2 Levelpacks auf dem Server liegen, wobei jedes Level ein Textfile ist, das JSON (Java Script Object Notation) beinhaltet. Durch Auswahl des Levelpacks im Editor und durch Auswahl der Levelnummer (1-15) kann der ausgewählte Level auf dem Webserver durch den aktuellen Level im Editor mit dem Button "Push Level" ersetzt werden. Man drückt seinen Level sozusagen in das Online-Spiel. Ab diesem Zeitpunkt kann jeder, der das Spiel online spielt, den von dir gerade auf den Server gepushten Level spielen. Natürlich kann diesen Level auch jeder andere wieder mit seinem eigenen Level überschreiben. Deswegen hebt euch die Levels lieber mit dem Export-Tool als JSON Code auf. Nicht darauf verlassen, dass sie am Server bleiben.

Zum Ausprobieren des Levels drückt ihr, wie schon erwähnt auf den Button Try.


Das Spiel öffnet sich in einem neuen Browser Tab. Damit es erfolgreich geladen werden kann, müsst ihr das WebGL Browser Plugin installiert haben.


Wählt das Levelpack aus, für das ihr den neuen Level erstellt habt.


Wählt den Level, den ihr im Editor eingestellt habt und den ihr mit dem Server-Push überschrieben habt.


Probiert euer Level aus. Macht das ganze so lange, bis er Spaß macht und ihr das Gefühl habt, jemand anderes würde diesen Level sicher gerne spielen.



Wenn ihr einen Level auf den Server gepushed habt und es ausprobieren wollt, löscht vorher dringend euren Browsercache. Die meisten Browser erlauben dies durch die Tastenkombination strg + shift + entf. Ansonsten seht ihr die Änderung im Level, die ihr gemacht habt möglicherweise nicht, da der Client die neuen Daten nicht downloaded sondern die alten Daten aus dem Browsercache anzeigt.


Load Level ist das Gegenteil. Dieser Button holt den eingestellten Level vom Server ab und baut ihn im Editor nach.


Der Button Export JSON  zeigt euch euer Level in Textform. Diesen Code solltet ihr aufheben und irgendwo abspeichern. Wenn ihr diesen Code das nächste Mal beim Button Load JSON eingebt, habt ihr euer Level wieder vor euch und ihr könnt daran weiterarbeiten.

 

Ich wünsche viel Spaß beim Level basteln! Wie gesagt, ich würde mich sehr über ein paar gute Levels freuen. Zum Beispiel per Mail.

 

Letzte Änderung amDienstag, 26 März 2019 11:59
Michael Wagner

...ist Web- und Spieleentwickler und aktuell bei der Firma Microtronics Engineering GmbH beschäftigt, wo er an M2M Software und dem Internet der Dinge arbeitet. Nebenbei unterrichtet er Webentwicklung an der Fachhochschule St. Pölten. In seiner Freizeit grübelt er an Videospiele-Ideen, bastelt an Webdevelopment Toolchains herum, treibt gelegentlich Sport, macht Musik oder ist mit seiner Kamera unterwegs. Nebenberuflich studiert er im Masterstudiengang "Web and Mobile Media Design" an der Donauuniversität Krems.

E-Mail Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Mehr in dieser Kategorie: Jelly aus dem Tiefschlaf holen »
FaLang translation system by Faboba