Eigene Parallax-Himmel-Hintergründe erstellen

  • Schwierigkeit: Mittel

    Vorraussetzung: Grundkenntnisse in Photoshop / Gimp


    Die Maker haben alle ganz nette Parallax-Hintergründe (nachfolgend MPB), aber für mehr Pepp & Abwechslung bietet sich dieses Tutorial an. Das besondere an MPB’s ist, dass diese sich nahtlos kacheln und unendlich häufig im Hintergrund duplizieren lassen. Für die meisten Fälle reicht es, wenn das Bild sich nur nach links und rechts kachelt (bei Gebirgen etwa), allerdings sind Himmel schon praktischer in alle vier Richtungen.




    Links: Standard Rechts: Upgrade



    Zunächst benötigen wir ein Foto vom Himmel, also schnappt euch eure Kamera und knippst los! Zur Nebenbeibeschallung eignet sich übrigens prima der Game Dev Podcast

    Ihr könnt natürlich auch mein Foto verwenden zum üben :D



    Als nächstes öffnet ihr das Himmelsfoto und ein Maker Parallax-Hintergrundbild in ein Fotobearbeitungsprogramm eurer Wahl. Ich benutze hier im Beispiel Photoshop aber mit Gimp klappt das genauso gut. Das Maker-Parallax-Bild ist nicht unbedingt nötig und ihr könnt auch einfach nur die Maße davon nehmen, ich persönlich finde es angenehmer, eine Orientierung zu haben.


    Protip:

    Meistens müsst ihr den Modus des MPB zunächst von indizierter Farbe auf RPG umstellen, um das Bild bearbeiten zu können.




    Und jetzt geht’s los!




    1)Markiert mit dem Makier/Ausschneidetool den Himmel des Fotos und dann geht’s an die Shortcuts, strg+c und schon habt ihr den Himmel kopiert




    2) Ebene Wechseln und das Ganze mit strg+v in das MPB Bild einfügen.




    3) Anschließend Strg+T, um das Bild zu vergrößern und ans Fenster anzupassen. (optional: Strg gedrückt halten, um das Bild gleichmäßig zu vergrößern).



    Wenn wir jetzt beide Bilder mithilfe des Zuschneidetools nebeneinander packen, sieht man, dass es sehr harte Schnittkanten gibt und das Bild sich keinesfalls gut duplizieren lässt. Am Ende müssen also links und rechts und oben und unten nahtlos ineinander übergeben.



    4) Ihr schneidet nun etwas vom linken Rand ab und kopiert es auf den rechten, dann spiegelt ihr die Ebene horizontal.



    5) Anschließend nehmt ihr einen weichen Radierpinsel, verringert die Radierdeckkraft und blendet über.





    Jaaa… sieht schon ganz gut aus, aber wir haben immer noch das Problem, dass oben und unten harte Übergänge sind.




    Also zurück zum Anfang.




    6) Wir markieren unser Ausgangsfoto und ziehen es deutlich über die Schnittkante nach oben hinaus.



    7) Wir schneiden den überstehenden Teil oben ab und fügen ihn am unteren Ende wieder an.



    8) wir pinseln wieder drauf los, damit der Übergang stimmt aber ACHTUNG! Links und rechts sollten gleich ausgepinselt werden (hier könnt ihr die Ebene nochmal spiegeln, dann müsst ihr keine Milimeterarbeit leisten)




    Und dann ist es ein Immerwährendes ausprobieren :D



    So könnten dann verschiedene Zwischenschritte aussehen.


    Wenn ihr endlich einen zufriedenstellenden Himmel habt, dessen Übergänge in allen vier Richtungen überall smooth sind, kommt jetzt der spaßige Teil.

    Ladet euch verschiedene Brushes runter (cloud brush, star brush, galaxy brush o.ä.) und verziert euren Himmel nach Lust und Laune. Spielt mit der Sättigung und dem Farbton herum.

    Der Einfachheit halber und für den Anfang empfehle ich euch diese Brushes nur in der Mitte des Bildes zu platzieren, sonst müsst ihr da ähnlich vorgehen wie mit dem Himmelsbild selbst - sprich alle Wolken müssen sich kacheln lassen.


    Please login to see this content.


    Und so sieht das Ganze dann im Spiel aus :)



    Falls etwas unklar sein sollte, schreibt das ruhig, ich hab noch nie schriftliche Tutorials verfasst :D

    Ich freu mich auf euer Ergebnis!

  • Ui, das ist aber Mal eine tolle Idee und gute Erklärung zum Umsetzen!

    Solche eigenen Grafiken machen zwar natürlich mehr Arbeit, aber man merkt doch meist recht schnell, was noch vom RTP herrührt und wo sich die Kreativität der Entwickler dann richtig entfaltet.

    Die weitere Bearbeitung mit den Brushes war dann wohl das i-Tüpfelchen auf der Buchstabentorte (oder so)! :D


    Da Du Photoshop/Gimp und Brushes bereits im Einsatz hattest. Hättest Du vielleicht noch Lust ein Tutorial zu selbst gepinselten Himmelsbildern (beispielsweise mit Gradient für Farben + Nachbearbeitung) als kleinen Zusatz zu machen? Es ist ja immer wieder erstaunlich was es alles an praktischen Brushes gibt und ich glaube Du steckst da echt super in der Materie drinnen. :)


    Danke jedenfalls für diesen tollen Thread! :]

    Meine Projekte:

    Hauptprojekt:Village Siege (Arbeitstitel)Tower-Defense Spiel mit kleinem TwistPrototyp: ~ 30%GDevelop
    Nebenprojekt:Misty Hollow: Makabere Abenteuer (Arbeitstitel)klassisches RPG mit einer Mischung aus Witz und GruselDemo: ~ 5%RPG Maker MZ
  • Gefällt mir sehr gut. :) Das Resultat kann sich auch sehen lassen. Die Liebe zu solchen und anderen Details hat euer Spiel nach meinem Gefühl sehr wertig gemacht.


    Profitipp vom Grafikdesigner: Für das bequeme Spiegeln in Photoshop den Filter "Verschiebungseffekt" nutzen.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!