Neues Update: 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:


    Planks_Example01.jpg


    Stones_Example01.jpg


    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.


    GIMP_Seamless_Paint02.jpg


    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:


    GIMP_Workflow02.jpg


    Hier noch die zwei ersten Struktur-Tiles zum runterladen, experimentieren und natürlich zur freien Verwendung in Euren Projekten.

    Zip File mit 2 Struktur Tiles sowie 4 Texturen


    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,

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

    Dieser Beitrag wurde bereits 10 Mal editiert, zuletzt von 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":


    Structures_V2_Examples02.jpg

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


    Seamless_Tiles01.jpg


    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,

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Luna ()

  • Schöner Guide! Danke dafür! Glaube es müsste beim Skalieren downscaling heißen da etwas kleiner gemacht wird.
    Jedenfalls sehr nützlich!

  • Tolles Tutorial!
    Magst Du vielleicht passend zum Thema auch ein Tutorial zum In-einander-blenden machen? Dann könnte man Deine Bodentexturen beispielsweise auch fern von Parallax-/Overlay-Mapping verwenden.

    Generell finde ich es aber super, dass Du Dir überhaupt so viel Mühe gemacht hast um andere an Deinem Wissen teilhaben zu lassen! :)

  • Hallo alle Zusammen,


    erstmal vielen, vielen Dank für die Likes und die lieben Kommentare. Es bedeutet mir sehr viel wenn meine Tutorials dem Einen oder Anderen gefallen und auch helfen können, Eure Projekte gut voranbringen zu können.


    ChimaereJade , ja, klar. Kann ich gerne machen aber ich verstehe nicht ganz was Du genau meinst mit dem "In-einander-blenden". Grundsätzlich erklärt Punkt 3. im Tutorial die Vorgehensweise zum "ineinanber-blenden" des Struktur-Tiles mit der Textur. Ich werde wohl ein kleines Video machen indem ich den Workflow nochmals etwas detailierter zeigen werde. Das Video sollte in den nächsten Tagen bereit sein und ich werde es dann natürlich auch direkt hier verlinken.


    Liebe Grüsschen,

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

  • 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 :P) 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,

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

    Dieser Beitrag wurde bereits 5 Mal editiert, zuletzt von Luna ()

  • Hallo nochmal Luna ,

    Das Video hat mich jetzt überrascht _ finde ich super, da dadurch auch nochmal andere Lerntypen angesprochen werden!


    Was ich eigentlich meinte, ging mehr in den Bereich wenn man beispielsweise eigene Tiles für Autotiles kombinieren möchte. Persönlich bin ich da eher im PixelArt-Bereich bewandert und weiss deswegen nicht, ob Du für hochauflösende Texturen da den einen oder anderen Kniff kennst.

    Ich danke Dir auf jeden Fall für Deine beiden Tutorialformate!

  • Hallo ChimaereJade ,


    Danke für die liebe Rückmeldung. Leider versteh ich immer noch nicht ganz was Du meinst mit "Autotiles kombinieren", vorallem da Du ja später im Text "hochauflösende Texturen" erwähnst. Autotiles kenn ich nur aus dem RPG Maker aber hochauflösende Texturen können ja nicht direkt für Autotiles verwendet werden sondern wenn, dann eher nur für Parallax-Mapping. Könntest Du evtl. ein kleines, konkretes Beispiel machen dass Deine Fragestellung etwas verdeutlichen könnte?


    Jitsu ,

    Ohhh, ja, stimmt natürlich. Ich hab es wohl "upscaling" genannt, da ich es erst runterskaliert habe auf 48x48 Pixel aber dann, für das Beispiel wieder auf 512x512 Pixel hochskaliert habe damit man besser erkennen kann wie es im RPG-Maker (48x48 Pixel) aussehen wird.


    @Alle ,

    Nochmals vielen Dank für all Euer Feedback und Eure Likes. Ich werde wohl in Zukunft noch weitere Tutorial-Videos machen, sobald ich neue Tipps und Tricks für Euch habe.


    Liebe Grüsschen an Euch Alle und ich wünsche Euch Allen eine supergute Zeit und ganz viel Erfolg bei Euren Projekten

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

  • Hallo Luna , eigentlich interessiere ich mich nicht besonders für Art Tutorials, aber es ist mir ein Bedürfnis dir zu sagen, dass deine Tutorials sehr einleuchtend und universell verständlich sind und die Ergebnisse die du erzielst sind ästhetisch ansprechend und äußerst zweckdienlich. Ich würde aus bloßem Interesse gerne mehr davon sehen.:)

  • Hallo Moons.o.Kandar,


    vielen Dank für Deine motivierenden und lieben Worte. Wie ich im Eingangs-Post erwähnt habe, arbeite ich auch recht viel mit 3D-Objekten und Modellen und habe mir halt von daher überlegt, wie man das "3D-Vorgehen (mit Model-Erstellung und Texturierung)" in den 2D-Bereich umsetzen könnte. Grundsätzlich sind ja diese "Grau-schattierten" Tiles nichts Anderes als "Licht&Schatten"-Tiles über die man dann ein "Material" legt oder malt.


    Ich werde in Zukunft natürlich weiterhin Tutorials posten, btw. hier kommt schon mal ein Neues. Ich hoffe es ist nützlich und hilft dem Einen oder Anderen (vorallem Pixel-Anfänger) dabei, komplexe Objekte auf relativ einfache Art für den RPG-Maker umzusetzen. (Natürlich kann man die Methode auch mit hochaufgelösten Bildern und Designs verwenden).


    Liebe Grüsschen an Dich lieber Moons und an Alle, die hier schon fleissig geschrieben, geliked und gelernt haben.

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

  • 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.


    Statue_Tutorial_V2.png


    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,

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

    Dieser Beitrag wurde bereits 4 Mal editiert, zuletzt von Luna ()

  • Coole Anleitung, vielen Dank :)

    Zu meiner Schande muss ich jedoch gestehen, dass ich recht häufig schon an Schritt 2 (freistellen) scheitere. Meist ergeben sich unschöne Kanten, die einfach nur scheiße aussehen und ich kriege sie nicht weg. Gibt es in Gimp einen schnellen und einfachen Weg, ein Objekt freizustellen?

  • Zion

    Hallo liebe Zion,

    ja, 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. :)


    transparenz_tutorial_V3.jpg


    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,

    <3 Luna <3

    Gute Freunde und füreinander da sein und sich gegenseitig unterstützen sind das Wichtigste und Wertvollste auf der Welt!

    I support LGBTQIA+ worldwide!

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Luna ()