In diesem Tutorial versuch ich mal einen kurzen Einblick (kurz? jaja,
ich kenn mich doch...) zu geben, wie man Gebäude/Geschenkpakete/Sinnloswürfel
und ähnliches in isometrischer Perspektive pixelt. Dabei rauskommen
kann zum Beispiel so etwas:
Zunächst mal was allgemeines üer gepixelte Linien... dazu
eine kleine Grafik:
Das Kästchen zeigt natürlich die oben (4x vergrößert
dargestellten) Linien in ihrer Originalgröße.
Die schwarzen Linien sind eigentlich ideal und werden am meisten benutzt,
die grünen sind grenzwertig und die rote ist DER TOD. Wenn man sich
die Linie mal anschaut sieht man dass sie einfach nur unregelmäßig
und verwackelt aussieht.
Deswegen: System in die Linien bringen! Eine "gerade" Linie folgt immer
einem gewissen Schema, z.B. zwei Pixel hoch, einen nach rechts, zwei hoch,
einen nach rechts... etc. Die Grafik sollte das was ich auszudrücken
versuche eigentlich erklären ;)
Gut... soviel zu Linien. Nun zur Isometrie.
Genrell heißt Isometrie dass man auf eine Ecke des dargestellten
Objektes schaut. Dazu wieder ein tolles Beispielbild:
Wenn man isometrische Gebilde auf Papier zeichnet folgt man diesem
Schema, d.h. man hat immer eine Grundseite, zu der die Linien des Objektes
senkrecht bzw. im 30°-Winkel stehen. Auf Papier ist das wunderbar zu
lösen, mit Pixeln ist der 30°-Winkel allerdings eine echte Herausforderung
wenn's exakt werden soll :)
Und gelöst wird das Problem so:
Wer jetzt verrückt genug ist kann gerne nachmessen: Die Linien
bilden KEINEN 30°-Winkel zur Grundseite (die im übrigen in dieser
Darstellung fehlt...), aber es kommt der Sache schon nahe und wir haben
schöne, gleichmäßige Linien.
Für die Eckpunkte gibt es zwei verschiedene Arten der Darstellung:
Ich persönlich benutze immer die 1. Variante, allerdings kann
es da bei komplizierteren Gebilden zu kleinen Problemen mit den Linien
kommen, d.h. wenn man alles gleichmäßig und perfekt haben will
sollte man wohl die 2. nehmen. Ich finde aber die erste deutlich schöner.
Wir haben also jetzt die Outlines für einen Würfel, und wer
Spaß daran hat kann den gleichen Würfel einfach mal nachpixeln.
Kopieren ist uncool, ihr sollt euch ja auch einprägen wie man die
Ecken macht an denen die Linien zusammentreffen xD
Aber hey, Outlines kann jeder, Schattieren ist anspruchsvoller. Selbst
bei Würfeln.
Als erstes muss man sich im Klaren sein, wo man die Lichtquelle platzieren
will, sonst hat man nachher total chaotische Schatten und Highlights.
Im Beispiel kommt das Licht von rechts oben, dazu wieder eine tolle
Grafik:
Angeblich hilft es, wenn man sich die Lichtquelle immer einzeichnet.
Man muss dafür auch keine so hübsche Glühbirne pixeln, ein
Punkt und ein paar Lichtstrahlen tun's auch ;)
An dieser Stelle ist dann ein bisschen logisches Denken gefragt - wenn
das Licht von rechts oben kommt, ist natürlich die obere Fläche
am hellsten. Die Fläche rechts ist etwas dunkler, und die Fläche
links kriegt am wenigsten Licht ab, ist also noch einen Tick dunkler.
Damit wäre der Würfel genau genommen schon fertig schattiert
- vorrausgesetzt man will einen Würfel mit schwarzen Outlines und
sehr einfachem Shading. Aber weil ich Spaß dran habe, zeige ich da
noch ein paar Varianten.
Nunja, diese Variante hatten wir schon... schwarze Outlines, einfaches
Shading. Nur nochmal für die Statistik.
Das Shading selbst ist hier nicht verändert, aber die Outlines
sind 1. farbig und 2. dem Lichteinfall angepasst.
Das heißt so viel wie: Wo das Licht direkt hinfällt, sind
die Outlines heller als der Würfel selbst, an den Schattenseiten dunkler.
Dadurch wirkt der Würfel eher realistisch.
Und noch ein Unterschied: Hier sind die Seiten, auf die Licht fällt,
noch einmal in sich schattiert. Dabei fällt mir allerdings auf, dass
die dunklen Outlines vielleicht eine Ecke zu dunkel sind - egal, das bleibt
jetzt so.
Gut, Würfel können wir jetzt also pixeln. Das ist schonmal
wundervoll, weil man es auf alle mehr oder weniger eckigen Gebilde übertragen
kann, das Schema bleibt das selbe.
Wenn es aber um Kreise und Kugeln geht... stehen wir vor einem kleinen
Problem. Oder vielleicht auch nicht.
Um einen Kreis (z.B. als Grundfläche für eine Säule)
isometrisch darzustellen muss man erst einmal versuchen sich den Kreis
selbst zu verdeutlichen. Dazu nimmt man ein Quadrat und pixelt es erst
normal, und dann nochmal isometrisch.
Dann setzt man in das normale Quadrat einen Kreis - dabei fällt
auf, dass man eigentlich nur beim Quadrat die Ecken abrunden muss um einen
Kreis zu bekommen. Das stimmt natürlich geometrisch nicht wirklich,
ist aber für kleinere Dimensionen eine durchaus brauchbare Hilfe.
Was macht also der logisch denkende Mensch? Richtig, er rundet auch beim
isometrischen Quadrat die Ecken ab und bekommt einen Kreis. Dabei hilft
wohl wieder ein Bild mehr als meine Erklärungen:
Aus dem so entstanen Kreis kann man jetzt nach Belieben Zylinder machen,
und auch hier hilft ein Bild wohl am besten:
Kugeln sind noch eine Ecke einfacher. Man braucht eigentlich nur einen
Kreis und eine Vorstellung von der Lichtquelle.
Je nach Lichteinfall verändert sich die Position der Schatten,
wenn das Licht direkt von vorne kommt ist demnach der Glanzpunkt direkt
in der Mitte.
Soweit zu den Grundlagen - mehr wollte ich eigentlich gar nicht erklären, aber ein paar kleine Anwendungsbeispiele schaden ja nie xD
Man kann mit dieser Technik/Perspektive Häuser und Räume wunderbar
darstellen, und zwar sowohl von außen als auch von innen. Im Beispiel
habe ich einen Quader gepixelt und anschließend einmal horizontal
gespiegelt - das zweite Gebilde sieht (wenn man die Schattierungen noch
etwas ändert) aus wie ein Raum, in den man von einer der oberen Ecken
hinein schaut.
Um zu verdeutlichen dass es sich um das gleiche Objekt aus verschiedenen
Blickwinkeln handelt, hab ich zuerst einmal eine Tür eingefügt
Das gleiche Spiel mit zwei Fenstern:
Fenster und Türen sind ein gutes Stichwort - man sollte dabei immer
beachten dass eine normale Hauswand nicht papierdünn ist, d.h. nicht
einfach nur ein viereckiges Loch in die Wand machen, sondern mit Berücksichtigung
der Perspektive noch die Wand weiter pixeln. Ungefähr so:
Das gleiche sollte man eigentlich auch bei den Rändern der Wand
machen, sonst sieht es so komisch aus wie in meinem Beispiel. Aber hey,
ich kann ja nicht an alles denken.
Wenn man die Grundform gepixelt hat war das natürlich noch nicht
alles - beim Haus von außen kann man z.b. noch Türen, Fensterscheiben/-läden,
sowie irgendeine Art von Textur für die Flächen hinzufügen.
Außerdem kann man noch (wie oben beim Würfel erklärt) am
Shading und an den Outlines rumbasteln.
Letztendlich sieht mein Haus dann so aus:
Wer sich das ganze vergrößert angucken will klickt einfach
mal hier =)
Die Änderungen waren folgende:
~ Umfärbung in braun
~ Anpassung der Outlines
~ Trennung des Hauses in zwei Teile, von denen der obere eher rötlich
eingefärbt wurde
~ Textur im oberen Teil [parallele helle Linien]
~ Fensterscheiben
~ grün strukturierte Tür
Und abgesehen davon dass das Haus vom Stil her etwas seltsam aussieht macht es so schon etwas mehr her als der grüne Klotz ;)
Kommen wir nochmal zur Innenansicht: das umfärben und Details einfügen
schenk ich mir in dem Fall, aber ich will noch kurz auf Einrichtungsgegenstände
eingehen.
Es hilft wenn man sich erstmal einen Plan macht, welches Möbelstück
im Raum wo platziert ist. In meinem Fall soll an der linken Wand ein Stuhl
und wahllos mitten im Raum ein Tisch stehen - das ganze hab ich leuchtend
grün und sehr schief skizziert:
[Man beachte den ersten buckligen
Tisch der Weltgeschichte!]
Das ganze wird in der altbekannten Perspektive ordentlich nachgepixelt,
dabei sollte man genau wie bei der Hauswand bedenken dass auch Tischplatten
u.ä. nicht einfach nur Striche in der Landschaft sind.
Das ganze mal schön bunt:
Beim Pixeln bietet es sich an alles erstmal in so schönen grellen
Farben (nun ja, schön ist Ansichttsache) zu machen, damit man den
Überblick behält. In meinem Fall sind die Tisch-/Stuhlbeine blau
und die Outlines der Flächen lila. Die pinken Linien stellen die Breite
der Tischplatte und der Sitzfläche des Stuhls dar.
Danach werden die Möbel nur noch in eine ordentlichen Farbe umgefärbt,
es bietet sich dabei an auch eine passende Farbe zu nehmen und nicht so
eine seltsame wie im Beispiel *g*
Und danach kann man sich weiter austoben - Farben ändern (grüne
Wände sind vielleicht nicht so passend xD), Bilder an die Wand, Teppiche,
weitere Möbel... das schenk ich mir wie gesagt jetzt ;)