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.
- Für diese simple Übung brauchen wir eine neue, leere Minimal-Map (17x13 Tiles) im Maker.
- Öffne ein Grafikprogramm und erstelle eine neue Datei mit der gleichen Größe, wie die Map (816x624px).
- Mappe im Grafikprogramm deine Map, denke dabei an das Raster des Makers und wie sich der Spieler und die NPCs auf der Map bewegen sollen. Auch dass du Türen usw per Event setzen wirst.
- Sortiere alle Ebenen mit Tiles die auf einer Höhe mit dem Spieler und darunter in einen Ordner oder füge sie zusammen. Zerschneide ggf. Tiles, bei denen Teile überhalb des Spielers liegen sollen.
Sortiere ebenfalls alle Ebenen mit Tiles, die überhalb des Spielers sein sollen, in einen Ordner oder füge sie zusammen.
- Blende alles andere als das was "unten/gleich auf" ist aus und speichere das was man noch sieht als PNG in den Parallax-Ordner deines Projekts.
- Blende dies nun aus und lasse nur noch alles anzeigen, was "über" dem Spieler ist und speichere dies als PNG in den Picture-Ordner deines Projekts.
- Öffne die Eigenschaften deiner Map im Maker über Bearbeiten... und stelle das eben erstellte Parallax als sichtbar ein.
- Erstelle ein Event auf der Map mit Parallel als Auslöser, rufe per Bild zeigen-Befehl das eben erstellte Bild auf. Füge den Befehl Ereignis löschen hinzu.
- Lade die beiden Tilesets/Kachelsets für die Begehbarkeit aus dem Tutorial (siehe Schritt 5) und erstelle in der Datenbank ein Tileset mit Begehbarkeit-1 auf B und den passenden Einstellungen.
- Mappe mit diesem Tileset auf deiner Map eine Kollisionsmap, welche die Begehbarkeit bestimmt.
- Tausche in der Datenbank im Tileset Begehbarkeit-1 mit -2 aus, ohne die Einstellungen zu ändern.
- Die Parallax-Map ist nun fertig für den Test.
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.
Möchtet ihr einen Screenshot erstellen, drückt die
Taste "Druck" auf eurer Tastatur, wenn das auf dem Bildschirm zu sehen ist, was ihr später als Bild haben wollt. Der PC speichert damit das aktuell dargestellte auf dem Bildschirm in den Zwischenspeicher.
Mit
Alt + Druck wird nur der Inhalt des gerade angewählten aktiven Fensters gespeichert.
Öffnet nun ein Grafik-Programm eurer Wahl und geht auf Datei
Neu...
Meistens wird hier bereits die Größe des im Zwischenspeicher befindlichen Bilds vorgeschlagen.
Als nächstes geht ihr auf Bearbeiten Einfügen und es erscheint euer
Shot vom Screen, den ihr zuvor gemacht habt.
Nun noch Datei Bild speichern unter... um euren Screenshot zu speichern.
Zu empfehlen ist das Dateiformat png. Jpg erzeugt zwar eine kleinere Dateigröße, dabei leidet aber meistens die Bildqualität und dies kann gerade bei dieser Form des Mappings zu sichtbaren Schnittkanten und anderen Problemen führen.
Es gibt auch andere Programme, mit denen ihr Screenshots erstellen könnt, um ggf. einige dieser Schritte zu umgehen.
Das bekannteste dürfte dabei das Snipping-Tool von Windows sein. Es gibt jedoch auch andere Alternativen.
Aufnehmen von Screenshots mithilfe des Snipping Tools
Liste weiterer Screenshot-Tools von Chip.de
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
normales Mapping |
Parallax-Mapping |
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
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: