Lieber Besucher, herzlich willkommen bei: RPG Studio - Make your World real. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Daylen

Ritter

  • »Daylen« ist der Autor dieses Themas

Motto: First comes smiles, then comes lies. Last is gunfire.

  • Nachricht senden

1

Freitag, 15. November 2013, 00:36

Platformer Tiles - Felsen

Hallo Gast!
Nach langer Abstinenz in diesem Unterforum habe ich mal wieder ein Tutorial geschrieben.
Ich verliere gar nicht zu viele Worte, sondern lege direkt los. Ich zeige euch heute, wie ich Felsen pixle.

Schritt 1

Bild

Es geht gaz einfach los. Dunkelste Farbe unten, Ebene auf der der Charakter laufen soll und ein Hintergrund.


Schritt 2

Bild

Ich hab mir eine schöne Palette zurechtgelegt und erste glatte Flächen der Steine vorgezeichnet. Damit ist die Fläche gemeint, die später nach oben zeigen soll. Da wir schräg von oben auf die Tiles schauen sind sie im Normalfall eher breit als hoch. Wie sich die Palette zusammensetzt sprengt hier den Rahmen. Kleiner Tipp: Palette Generator


Schritt 3

Bild

Die Oberflächen werden jetzt grob auf der Lauffläche angeordnet. Dabei sollen nicht zu große Zwischenräume entstehen, aber auch nicht zu kleine. Es muss noch Platz bleiben, um später weitere Farben einsetzen zu können. Außerdem habe ich am oberen Rand eine Kontur gezeichnet. Diese folgt nur grob dem ursprünglichen Konturverlauf, um die Struktur ein wenig zu variieren. Übrigens kopiere ich das Tile immer links und rechts neben das Tile an dem ich arbeite. So kann ich erkennen, wo die Übergänge nicht sauber sind und das Tilesetraster später sichtbar wäre.


Schritt 4

Bild

Bei mir kommt das Licht im Normalfall von Links oben. Deswegen setze ich die nächste Farbe am linken Rand der kleinen Steinvorsprünge. Hier gibt es keine exakte Vorgehensweise, wie diese beleuchteten Stellen gepixelt werden. Sie sollten einfach nicht nur vertikal verlaufen, aber auch nicht willkürlich platziert werden. Eine gute Mischung ist das Erfolgsrezept. Sollte es am Ende irgendwo zu zufällig oder einfach merkwürdig aussehen, könnt ihr immer nochmal drüber gehen. Das habe ich im Verlauf des Tutorials auch gemacht, weswegen sich die Bilder leicht unterscheiden können.


Schritt 5

Bild

Das gleiche Prinzip wie beim vorherigen Schritt, allerdings mit einer dunkleren Farbe als der Grundfarbe. Mit dieser Farbe lassen sich auch gut Zwischenräume füllen, wo in der Originalansicht große Pixelcluster (einfarbige Flächen) deutlich sichtbar sind. Auch hier vertikal, aber nicht zu geradlinig. Auch bei der oberen Konturlinie habe ich diese Farbe eingesetzt, um die ganze Struktur aufzulockern und "natürlicher" zu gestalten.


Schritt 6

Bild

Abschließen habe ich den Farbverlauf zu der dunkelsten Farbe geglättet. Ich habe die Farbe aus Schritt 5 verwendet, um die Stellen zu verdecken, bei denen die Grundfarbe und die dunkelste Farbe ineinander fließen. Außerdem habe ich die Felsstrukturen nach unten verlängert und mit Dithering (Schachbrettmuster) in den Hintergrund fließen lassen.


Das wars auch schon. Pixeln ist einfach, man muss nur üben :P
Zum Abschluss gibts noch ein Bild aus einem meiner Projekte, wo ich diese Technik angewendet habe.

Bild

Bild

Avery

Dinoritterin mit Herrschaft über die Contests und Ressourcen

  • Nachricht senden

2

Samstag, 16. November 2013, 18:59

Schönes, gut verständliches Tutorial, das sicher einigen helfen wird!
Für meinen Geschmack wirkt der obere Rand über die recht wahhlos wirkenden hellen Punkte in der Kontur aber irgendwie bröslig.

Daylen

Ritter

  • »Daylen« ist der Autor dieses Themas

Motto: First comes smiles, then comes lies. Last is gunfire.

  • Nachricht senden

3

Samstag, 16. November 2013, 23:41

Das kommt nur vom Hintergrund :I
Gegenbeispiel gefällig?

Bild

Bild

Social Bookmarks