Einfach vielfältige Tiles erstellen inkl. Pro-Tipp für nahtloses Zeichnen in GIMP (jetzt inkl. Tutorial-Video)

Liebe RPGMaker Freunde und Community,

ich hab mal wieder ein kleines Tutorial und einige Ressourcen für Euch. Viele von Euch werden die Methode zwar sicher schon kennen und auch anwenden aber ich möchte damit auch Pixel-Einsteigern zeigen dass man mit relativ wenig Aufwand tolle und abwechslungsreiche Tiles für den RPG-Maker kreieren und gestalten kann.

Das grundlegende Idee zu dem Tutorial kam mir in den Sinn da ich recht viel in 3D arbeite und mir überlegt habe ob man die 3D-Methode auch auf 2D (Pixeln) anwenden kann um damit etwas Zeit bei der Kreation der nahtlosen Tiles einsparen zu können. In 3D ist es ja grundsätzlich so das man erst das 3D-Model erstellt und danach dann erst mit der Texturierung (Einfärbung) der Objekte beginnt. Etwas Ähnliches funktioniert tatsächlich auch bei der Erstellung von Tiles für den RPG Maker.

Die Idee funktioniert folgendermassen: Zuerst einmal ein (nahtloses), graustufen-schattiertes "Struktur"-Tile erstellen (in der 3D Welt auch als Height-Map bekannt) und dann in GIMP (oder einem ähnlichem Pixel-Programm) eine Ebene im Modus: "Multiplikation" oder "Überlagern" mit einer Textur (Farbbild) darüber zu legen oder auch einfach darüber zu malen (ebenfalls im Modus: "Multiplikation" oder "Überlagern").

Der Vorteil bei dieser Methode liegt darin dass man das "graustufen-schattierte" Tile nur einmal zu erstellen braucht und danach beliebig viele Texturen (oder Farben) darüber legen kann um schnell verschiedene Variationen davon erstellen zu können. Wenn Ihr das "graustufen-schattierte" Struktur-Tile schon nahtlos gemacht habt, könnt Ihr es auch beliebig "verschieben" (Funktion: Versatz) um weitere Variationen davon erstellen zu können.

Ausserdem könnt Ihr auch mit verschiedenen Layer-Methoden arbeiten und experimentieren sowie natürlich auch den Kontrast, die Sättigung, usw. beliebig anpassen oder ändern.

Ein Bild sagt mehr als tausend Worte, deshalb hier mal in zwei Bildern die grundlegende Idee:

Die Vorgehensweise ist relativ einfach wobei der erste Schritt am aufwändigsten ist und auch am meisten Zeit benötigt:

1. Erstellt ein "Struktur"-Tile in in Grauschattierung. Dazu könnt Ihr Pixel-Tools oder auch 3D-Tools verwenden (ein Tutorial für 3D-Tools werde ich demnächst mal noch für Euch erstellen). WICHTIG: Das Struktur-Tile muss "nahtlos" erstellt werden. Das heisst, es muss sich an allen Kanten "wiederholen" können. Verwendet dazu den Pro-Tipp für GIMP unter Punkt 2.

Alternativ dazu könnt Ihr z.B. in GIMP den Befehl "Filter -> Abbilden -> Nahtlos machen" verwenden, allerdings eignet sich dieser Filter eher für Texturen.

Hinweis zur Erstellung des grau-schattierten Struktur-Tiles:

Alle Erhebungen werden heller schattiert, alle Vertiefungen werden dünkler schattiert. Je heller, bzw. je Dünkler ein Pixel ist, desto höher oder tiefer erscheint er dann im finalen Tile.

2. PRO-Tipp zur Erstellung der "nahtlosen" Struktur-Tiles in GIMP:

Um in GIMP nahtlos zeichnen zu können gibt es eine, leider etwas versteckte Funktion. Dazu findet Ihr im folgenden Bild eine Schritt-für-Schritt-Anleitung um die Funktion in GIMP aktivieren zu können. Mit dieser Funktion könnt Ihr über den "Bildrand" hinausmalen und der Strich wird auf der gegenüberliegenden Seite fortgeführt. Diese Funktion ist wirklich supernützlich beim Zeichnen und Erstellen der "nahtlosen" Struktur-Tiles.

3. In GIMP ladet Ihr dann das "grau schattierte" Tile als Ground-Layer und legt dann die Textur auf eine Ebene darüber und verwendet für diese Ebene den Modus: "Multiplikation" oder "Überlagern". Das erzeugt dann automatisch den gewünschten Effekt.

WICHTIG: Bei dem Layer-Modus "Multiplikation" wird das End-Bild meist etwas dunkler als das Original, was Ihr aber mit weiteren Effekten wie "Kontrast", "Sättigung", usw. wieder beheben könnt. Im Layer-Modus "Überlagern" wird das End-Bild meist etwas heller wobei Ihr dann natürlich auch mit den Effekten "Kontrast", "Sättigung", usw. arbeiten könnt um das Bild wieder etwas abzudunkeln.

Hier noch ein Screenshot von Gimp mit den eingestellten Effekten:

Dazu möchte ich noch Anmerken dass ich in den nächsten Tagen, Wochen und Monaten immer mal wieder ein paar "graustufen-schattierte" und auch nahtlose Struktur-Tiles hochladen werde die Ihr natürlich auch komplett kostenlos für Eure kommerziellen und nicht-kommerziellen Projekte verwenden dürft.

Braucht keine Credits oder dergleichen aber wenn Jemand mich in den Credits zu seinem Spiel erwähnen möchte, dann einfach "Luna" als Designerin angeben.

Viele liebe Grüsse,

Luna

Liebe RPGMaker Freunde und Community,

im angehängten Zip-File findet Ihr die nächsten zwei "Struktur-Tiles" inkl. Texturen zur freien Verwendung in Euren Projekten. Das Vorgehen funktioniert wieder gleich wie in der Anleitung im ersten Post.

Hier noch eine Übersicht über die zwei neuen "Struktur-Tiles":

Hier auch mal noch eine Preview wie das ganze dann gekachelt aussieht:

Und hier noch wie Versprochen das Zip-File mit den Struktur-Tiles und den Texturen.

Zip File mit 2 Struktur Tiles sowie 2 Texturen

Viele liebe Grüsse,

Luna

Hallo liebe RPG Maker Community,

ich habe heute mal ein kleines aber komplettes Video-Tutorial zu dem ganzen Thema mit den nahtlosen Struktur-Tiles und Texturen zusammen geschustert. Leider hat es an zwei oder drei Stellen im Video den Eingabe-Dialog von GIMP etwas abgeschnitten, was ich leider erst bemerkt habe als ich das Video schon zusammen geschnitten hatte. Trotzdem erkennt man (hoffentlich ) was ich tue und ich denke es sollte kein Problem sein da ich bei den wichtigen Schritten ja immer auch Erklärtext einblende.

Da ich leider momentan kein Headset bzw. Mikrofon zur Verfügung habe, habe ich das Tutorial, wie schon angetönt, mit einfachen, erklärenden Texten unterlegt. Ich hoffe das passt so. Bin natürlich auch immer offen für Kritik.

PS: Die Musik die ich unters Video gelegt habe, habe ich vor über 10 Jahren mal, für damals angedachte Gradius- und Castlevania Spinoff-Spiele erstellt. Leider ist aus diesen Spielen schlussendlich nichts geworden aber ich wollte halt die bereits erstellte Musik doch mal noch irgendwie verwenden können. Mir ist Bewusst dass diese Game-Musik nicht nach Jedermanns Geschmach ist und deshalb einfach das Video auf Stumm schalten wenns Jemandem nicht gefallen sollte. Wie gesagt, das Video hat ja keine Sprachausgabe sondern nur einfachen Erklärtext, deshalb verpasst man auch nichts wenn man das Video auf Stumm schaltet.

Ich hoffe das Video ist erstmal ausreichend um die Technik, die ich für die Erstellung der nahtlosen Tiles verwende, zu erläutern und bei weiteren Fragen oder auch Kritik, schreibt mich einfach hier im Forum an.

Anyway, genug geschwafelt, hier nun das Video:

Liebe Grüsschen,

Luna

Hier noch eine "Erweiterung der vorhergehenden Tutorials" da die Technik ein bisschen ähnlich ist. Aber anstatt die "grau-schattierten" Struktur-Tiles selbst zu zeichnen, nehmen wir diesmal ein Objekt von einem bereits existierenden Bild. (WICHTIG: Wenn Ihr solche Bilder verwendet, versichert Euch zuerst, dass Ihr die Bilder auch für Eure Projekte verwenden dürft, die Bilder also lizenzfrei sind)!

Eine gute Quelle für lizenzfreie Bilder ist "Pixabay", dort findet Ihr sehr viel Bildmaterial aus allen verschiedensten Sparten.

Anyway, hier nun zum Tutorial (Ein Bild sagt, wie immer, mehr als tausend Worte. Deshalb hier erstmal das Bild, dass die Technik zeigt und im Anschluss werde ich noch ein paar Bemerkungen dazu machen.

TIPP: Falls das Objekt, das Ihr freistellen wollt in Farbe ist (und nicht wie die Buddha-Statue hier in meinem Beispiel praktisch schon komplett in Graustufen ist), könnt Ihr das natürlich auch machen. Stellt das Objekt, wie bereits erklärt einfach frei und konvertiert das freigestellte (farbige) Objekt danach in ein Graustufen Bild. Dazu könnt Ihr z.B. einfach die Funktion "Saturation/Sättigung" verwenden.

WICHTIG: Alle Schritte ab Schritt 7 sind rein optional. Es kommt da ganz drauf an welchen Grafikstil Ihr da schlussendlich bevorzugt und auch am Besten zu Eurem Spiel passt. Auch noch wichtig, die Textur legt Ihr am Besten auf das Objekt, bevor Ihr es runterskaliert. Also die Textur am Besten direkt nach Schritt 6 auf das Objekt anwenden mit der bereits erläuterten Technig der "Layer-Multiplikation".

Noch ein wichtiger Hinweis: Beim runterskalieren gehen sehr schmale, (dunkle) Kanten manchmal etwas verloren was man beim obigen Beispiel beim (aus dieser Sicht) rechten Ohr gut sehen kann. Das Ohr wirkt ein bisschen als würde es aus dem Gesicht herauswachsen. Da müsst Ihr dann evtl. nach dem Skalieren doch noch mit einem Pinsel und einer dunkleren (halb-transparenten) Farbe etwas nachbessern.

Mithilfe dieser Technik könnt Ihr praktisch jedes Objekt, dass Ihr aus einem Bild ausschneidet bzw. freistellt, dazu verwenden um eine RPG-Maker-Grafik daraus zu erstellen. Natürlich müsst Ihr halt immer mal wieder etwas korrigieren oder nachbessern aber es ist denke ich, um ein Vielfaches einfacher auf diesem Wege. Einen Buddha-Statue, wie im obigen Beispiel, hätte mich vermutlich mehrere Stunden gekostet um sie auf "traditionelle" Weise zu zeichnen (wenn ich es überhaupt hingebracht hätte).

Natürlich schätze und bewundere ich jeden Künstler von ganzem Herzen, der solche Grafiken von Grund auf zeichnen kann aber gerade wenn man, wie wir hier im RPG-Maker-Forum, Alleine an einem Spiel arbeitet, dann kommt einem jede Arbeitserleichterung, bei der man grossen Aufwand und Zeit einsparen kann, sehr gelegen.

In diesem Sinne, Euch Allen weiterhin ganz viel Spass und Erfolg mit Euren Projekten und falls Ihr irgendwelche Fragen habt, dann schreibt mir doch einfach. Ich werde in Zukunft sicher weitere Tutorials veröffentlichen und natürlich demnächst auch wieder neue Ressourcen (Struktur-Tiles und Texturen) bereitstellen.

Viele liebe Grüsschen an Euch Alle,

Luna

Das Freistellen von Objekten hat seine Tücken und es braucht auch etwas Geduld. Meine Methode ist eigentlich ziemlich standard-mässig. Evtl. gibt es (bald) KI-Tools, die es erleichtern, Objekte in Bildern freizustellen doch bis dahin verwende ich, wie schon angedeutet, die "normale" Radierer-Methode. Hier noch ein kleines Tutorial zum Freistellen von Objekten.

Ich hoffe das "Freistellen"-Tutorial ist nützlich und hilft Dir und evtl. auch anderen Usern hier im Forum weiter um Objekte freistellen zu können.

Viele liebe Grüsschen,

Luna

Vulture Vielen Dank für Deine lieben Worte. Ich habe das Tutorial sehr gerne für die Community erstellt und hoffe das es für den Einen oder den Anderen nützlich sein kann. Wie ich ja geschrieben habe bewundere ich Leute, die von Grund auf supertolle (Pixel)-Grafiken zeichnen können aber gerade wenn mal Alleine an einem Spiel arbeitet ist man froh wenn man mit weniger Aufwand auch tolle Grafiken hinbekommt. Da bietet es sich an, bereits vorhandene Grafiken an die eigenen Bedürfnisse anpassen zu können. Wichtig dabei ist, immer auf die Copyright-Angaben zu achten. Bei Pixabay (alle Bilder sind copyright-free) habe ich aber bisher eigentlich meistens was passendes gefunden. Und ja, das Tutorial stammt noch aus dem alten Forum.

Jitsu Koan Danke auch Dir für Deine lieben Worte. Wenn ich weitere Tutorials gemacht habe, dann werde ich sie natürlich gerne hier der Community zur Verfügung stellen.

Wakudien Auch Dir vielen Dank für die lieben Worte. Es freut mich sehr dass Dir das Tutorial gefällt und Du evtl. auch gebrauch davon machen kannst. Wie ich im Tutorial geschrieben habe gibt es vermutlich schon einige KI-Tools (z.B. Adobe Firefly oder Ähnliche) welche das Freistellen von Objekten noch viel einfacher machen.

Nochmals Danke an Euch Alle für das Interesse an dem Tutorial.

Viele liebe Grüsschen

Luna

Wegen Hosting-Problemen waren die Tutorial- und Beispielbilder nicht mehr zu sehen. Ich habe die Bilder jetzt nochmals neu hochgeladen.

Viele liebe Grüsschen
Luna