Einsteigerübung für Parallax-Mapping

In diesem Tutorial möchte ich euch näher bringen, wie man externes Mapping dafür nutzt, um seine Maps zu verbessern. Die im nachfolgenden präsentierte Arbeit lässt sich sowohl für Overlay- als auch für Parallax-Mapping nutzen.

Um das ganze möglichst Einsteiger-freundlich zu gestalten, wollen wir dabei eine stark versimpelte Übung machen, die jeder mit dem RPG Maker MV und einem Grafikprogramm sehr schnell nachmachen kann und welche die Parallax-Technik nutzt.

Ihr solltet bei Möglichkeit mit dem Grafikprogramm eurer Wahl vertraut genug sein. Dieses Tutorial ist nicht für blutige Anfänger im Umgang mit einem solchen Programm gedacht und erklärt nicht den Umgang mit dem entsprechenden Programm.

Mehr zu den Begriffen: Parallax- und Overlaymapping Begriffsklärung

Die Übung

Ziel ist es, eine Map außerhalb des Makers in einem externen Programm zu erstellen und anschließend wieder im Maker nutzbar zu machen.

Im folgenden findet ihr die Arbeitsschritte mit markiert. Alles weitere sind Erklärungen und nützliche Informationen.

1) Vorbereitungen

Für diese simple Übung brauchen wir eine neue, leere Minimal-Map (17x13 Tiles) im Maker.

Die Größe spielt eine wichtige Rolle für diese Übung, jedoch unterliegen die Maps abseits dieser Übung nicht dieser Beschränkung.

Dabei ist jedoch zu beachten, dass die Dateigröße der Ebenen für eine so erstellte Map recht schnell groß werden können und dies die Performance eures Spiels beeinträchtigen kann. Daher ist vor zu großen Maps zu warnen.

Es gibt verschiedene Möglichkeiten diese Mapping-Technik für das eigene Projekt zu nutzen. Während manche ihre Maps komplett extern erstellen, wollen andere traditionelles Mapping nur mit Zusätzen aufwerten, usw.

Man kann also im Maker bereits vormappen, um z.B. Boden-Texturen, Wände und Decken mit zu übernehmen. Vorteil des Mapping-Editors des Makers sind hierbei die Autotile-Funktionen, die verschiedene Texturen je nach Legart aneinander anpassen. Dies können normale Grafikprogramme nicht so einfach. Dort muss man sich für das gleiche Ergebnis die Stücke selbst raussuchen und ggf. anpassen. Vor allem bei Innenräumen ist es oft bequemer, wenn man im Maker vorarbeitet.

Möchte man also eine Map aus dem Maker weiter bearbeiten, muss man sie ins Grafikprogramm übertragen.

Wichtig: Das Grafikprogramm eurer Wahl muss in der Lage sein mit Transparenzen und Ebenen umzugehen.

Empfehlenswert sind da z.B. Gimp, paint.net oder Adobe Photoshop.

Wichtig: Die neue Arbeitsfläche im Grafikprogramm (und das Bild der vorbereiteten Map) muss genauso groß wie die Originalmap sein.

Habt ihr eine leere Map im Maker genommen, könnt ihr euch errechnen, wie groß die Arbeitsfläche eures Bildes im Grafikprogramm sein muss.

1 Tile im MV-Maker-Raster entspricht 48x48 Pixeln. Eine Minimal-Map wäre damit (17x48) x (13x48) = 816x624 px groß.

Habt ihr eine vorbereitete Map im Maker und wollt die übertragen, könnt ihr sie euch aus Screenshots zusammen stückeln, oder ihr verwendet als Hilfsmittel ein Plugin, mit dem man Mapshots (Empfehlung: Orange Mapshot von Hudell) erstellen kann.

Der MV bietet die Option "Als Bild speichern", jedoch werden die Maps dabei nicht in Originalgröße, sondern nur mit 50% der eigentlichen Größe dargestellt.

Das Vergrößern auf 100% im Grafikprogramm verzerrt die ursprünglichen Texturen und kann zu einem sehr verwischten bis verpixelten Ergebnis führen. Daher ist davon abzuraten!

Habt ihr also nun eure "Map" im Grafikprogramm offen, kann es weiter gehen.

2) Das Mappen im Grafikprogramm

Der große Vorteil gegenüber dem Mapping-Editor des Makers ist nun, dass ihr nicht an eine vorgegebene Anzahl von Ebenen und Tilesets gebunden seid und auch nicht genau im Raster arbeiten müsst, wie es der Editor sonst vorgibt. Dazu bekommt ihr zusätzliche Optionen durch das Grafikprogramm, mit dem ihr die Tiles bearbeiten könnt, wie z.B. schneiden, färben und skalieren.

Mehr zu den Vorteilen und Nachteilen und wie man sie nutzen kann: Parallax- und Overlaymapping Begriffsklärung

Ihr könnt beliebig viele Tilesets/Kachelsets parallel im Grafikprogramm öffnen und die Tiles, die ihr verwenden wollt, in eure Arbeitsdatei herüber ziehen oder kopieren und so mappen.

Für diese Übung reicht es, wenn ihr eine Außenmap mit Haus, einem Weg und ein paar Bäumen gestaltet.

In unserer Übung braucht ihr weder die ganze Map gestalten, noch sonderlich sauber oder schön arbeiten. Diese Übung soll in erster Linie die Arbeitsschritte und die Technik verdeutlichen.

Wichtig: Bedenkt, dass sich der Spieler und auch eure Events später trotzdem auf dem Raster im Maker bewegen werden. Damit man also nicht später fast ein ganzes Feld weit weg steht, von einem halben Baum blockiert wird, an dem die Figur locker vorbei könnte, usw, ist es ratsam sich ein passendes Raster im Grafikprogramm einzublenden und daran zu orientieren.

Hilfestellungen dazu:

Raster und Hilfslinien in Gimp

Raster und Hilfslinien in Photoshop

Grid-Plugin für paint.net

Denkt außerdem daran, dass ihr z.B. Türen oder Fackeln noch immer als Events auf eure Map setzen werdet.

Seid ihr zufrieden mit eurer Map, kommt nun der technische Abschnitt.

3) Aufbereitung für den Einsatz als Ebenen im Maker

Habt ihr eure Map im Grafikprogramm gemappt, kann es durchaus sein, dass ihr nun eine große Vielzahl an Ebenen mit einzelnen Bildelementen (Tiles) habt. Um so detailreicher ihr mappt, um so größer wird diese Zahl und auch so unübersichtlicher kann das ganze werden.

Für den Einsatz im Maker brauchen wir später 2 Bilder:

- ein Bild mit allem überhalb des Spielers im Pictures-Ordner des Spiels

- ein Bild mit allem auf gleicher Höhe und unterhalb des Spielers im Parallaxes-Ordners des Spiels

Sortiert alle Ebenen, fügt sie ggf. in Ordern oder als einzelne Ebenen zusammen. Blendet jeweils eine der Gruppierungen aus, um so ein Bild zu speichern, auf dem nur die gewünschten Teile der Map zu sehen sind.

Die Bilder müssen als png gespeichert werden. Besonders beim Bild für alles überhalb des Spielers muss darauf geachtet werden, dass das Bild einen transparenten Hintergrund hat.

Hier kann es nun helfen, wenn man sich eine ganzen Ebenen entsprechend sortiert und zusammen schließt. Letzteres sollte man aber nur machen, wenn man sich sicher ist, dass man die einzelnen Elemente nicht mehr später weiter bearbeiten möchte.

Wenn das Grafikprogramm es anbietet, können hier Ordner hilfreich sein. Die Ebenen passend zu benennen kann ebenfalls helfen.

Eine weitere Hilfe ist es, wenn man ein Raster hat, wie es in Punkt 2 auch schon erwähnt wurde. An diesem kann man sich orientieren und noch einmal klar machen, was genau liegt über dem Spieler und was nicht und Tiles so notfalls passend in Teile schneiden.

Eine besonders gute Hilfe kann es sein, wenn man einen Teil von Schritt 5) Begehbarkeiten durch Kollisionsmapping vor verzieht und sich auf einer Extra-Ebene mit Farben markiert, welche Tiles hinterher begehbar sein sollen und welche nicht.

So kann man z.B. darauf verzichten alle Baumkronen in einem Wald extra auszuscheiden, wenn der Spieler manche Bereiche gar nicht betreten können soll, in dem diese vorkommen.

Besonders an Stellen, wo der Spieler auf einem Feld steht und das Feld darüber den Spieler überlappen können soll, wie es z.B. bei den Baumkronen der Fall ist, kann es bei Chars, die größer als Tile sind (und auch beim normalen Versatz der Charsets um 8px nach oben | Näheres dazu: Aufbau der Character-Grafik) zu Überlappungsfehlern kommen.

Wenn man plant größere Charaktere zu nutzen, sollte man dies beim Schneiden der Tiles beachten und sich nicht nur am Raster orientieren.

4) Einbinden im Maker

Zurück im Maker öffnet nun die leere Map und ihre Karteneigenschaften.

Wählt hier im Bereich Parallaxen-Hintergrund im DropDown-Menü das Bild, das ihr zuvor gespeichert habt.

Aktiviert dabei die Option unten Im Editor anzeigen. Dies wird euch helfen, später die Begehbarkeiten zu erstellen.

Erstellt nun ein Event auf der Map (möglichst an einer Stelle, wo es nicht im Weg ist) mit dem Auslöser: Parallel und folgenden zwei Befehlen:

- Bild zeigen... Wählt hier das eben gespeicherte Bild aus dem Ordner Pictures

- Ereignis löschen (Mit diesem Befehl wird das Event bis zum Neustart der Map gelöscht)

Wenn ihr die Map nun testet, könnt ihr mit eurem Char ggf. bereits hinter der Dachkante und den Baumkronen entlang gehen. (Oder euch gar nicht mehr bewegen, je nach euren bisherigen Tileseteinstellungen) Doch es gibt noch keine korrekte Kollision mit Haus oder Baumstämmen. Diese folgen nun im nächsten Schritt.

5) Begehbarkeiten durch Kollisionsmapping

Die Begehbarkeit der Map kann über verschiedene Methoden erreicht werden, so gibt es Plugins, die dies übernehmen können, aber ich möchte euch eine sehr simple Methode näher bringen, die über das normale Mappen erfolgt.

Fügt folgende zwei Datein in den Tilesets-Ordner eures Projekts:

Erstellt ein Tileset in der Datenbank für das Parallax-Mapping, wenn ihr das nicht schon habt.

Stellt nun Begehbarkeit-1 für B ein.

An Stelle des Schriftzugs "Parallax Mapping Beghbarkeit 1" stellt ihr bitte einen ein. Dies ist nötig, damit sich der Spieler überhaupt bewegen kann. X und O sollten selbsterklärend sein. Die roten Linien sind für Richtungsbegrenzungen und die Symbole für Leiter-, Schadensboden- und Theken-Tag.

Nun könnt ihr die Begehbarkeit der Map ganz normal mappen und auch testen und dabei sehen, ob alles funktioniert.

Doch nun ist diese Kollisionsmap auch für den Spieler sichtbar und das ändern wir mit einem kleinen Trick:

Ändert in dem eben angelegten Tileset das Set in B von Begehbarkeit-1 auf Begehbarkeit-2, ohne etwas an den Einstellungen zu ändern.

Nun ist die Kollision unsichtbar, funktioniert aber noch genauso wie zuvor im Test.

Solltet ihr noch einmal etwas an der Kollision ändern wollen, könnt ihr einfach 2 wieder auf 1 tauschen und seht auch wieder, was ihr dort mappt.

Damit ist eure erste Parallax-Map fertig!

6) weitere Tipps

Dieses Tutorial kam jetzt komplett ohne Plugins aus. Dies funktioniert aber nur auf einer Minimal-Map so, weil auf dieser die Bewegung des Parallax und des Pictures nicht zum tragen kommen, wie das auf größeren Maps der Fall ist.

Für Overlay-Mapping erstellt man auf die gleiche Art die Ebenen für die Map, bindet sie aber je nach Plugin nicht über Parallax und Picture ein, sondern ggf. über einen eigenen Ordner, oder schlicht den Dateinamen.

Dabei gibt es Plugins, die noch etwas mehr in den Ebenen unterscheiden und teilweise auch erfordern, dass man das ganze noch weiter aufteilt, als nur über und unter dem Spieler.

Hier findet ihr verschiedene Plugins, die euch nützlich sein könnten:

http://mvplugins.com/search/parallax/page/1