Inkscape 207 – Vektor Isometric, Basics & Tips

Isometric Art kennt sicherlich jeder. Ob von Games oder Abbildungen in öffentlichen Verkehrsmitteln etc. findet man viele Beispiele. Bevor ich praktische Beispiele aufbaue, gebe ich hier erste Tips und Tricks die den Einstieg erleichtern.

Skills: Simple 1.7 out of 5 stars (1,7 / 5)
Plugin: Nein

 

Gibt man bei der Suchmaschine seiner Wahl den Begriff Isomertic Art ein, findet man eine Menge Beispiele für diese Kunstform. Erweitert man den Suchbegriff um Isomertic Art Bitmap (Pixelbilder) oder Isomertic Art Vector (Vektorgrafiken) unterscheiden sich die Ergebnisse schon voneinander, wobei da auch die Suchmaschinen schon einiges durcheinander würfeln. Auf jeden Fall dürften die Ergebnisse bei Vektorgrafiken (meist) glatter ausschauen.

 

Perspektivisch vs Isometrisch

Das menschliche Auge sieht perspektivisch. Der Vordergrund groß, alles was dahinter ist verkleinert sich (strahlenförmig). Das lässt sich sehr schön konstruieren. Die Beispielanimation zeigt eine solche Konstruktion.

Isometric vs Perspective

Perspektive Konstruktion

Verändert der Betrachter seine Position, geht beispielsweise nach links, muss das Strahlensystem, die Perspektive neu konstruiert werden. Das ist bei der isometrischen Ansicht nicht der Fall, dort orientiert sich alles an einem Raster!

Die isometrische Darstellung zeigt das Objekt auch 3 dimensional, jedoch ohne perspektivische Verkürzungen/Verzerrungen. Dabei ist diese Ansicht sogar noch leichter zu konstruieren, da es auf dem einen Raster basiert und sich alles danach ausrichtet. Daher können im Gegensatz zur Perspektive die gleichen Objekte in der Isometrie an jeden beliebigen Platz versetzt werden (siehe Animation unten).

Inkscape Isometric

Isometrische Darstellung

Das bringt es mit sich das isometrisch konstruierte Objekte an jedem Ort auf der Arbeitsfläche aneinander gesetzt und zusammengestellt werden können, um beispielsweise um Gebäude aufzubauen (siehe Animation unten).

Isometric Objects

Objekte zusammen setzen

Das wiederum eignet sich dann sehr schön für Games und als Grafiken. Inkscape bietet für diesen Anlass ein passendes Hilfslinien-Gitter an dem man sich orientieren und konstruieren kann.

Über Datei – Dokumenteinstellungen kann das Gitter eingestellt werden. Zuerst wählt man den Typ des Gitters: Axonometrisches. Dann den Button Neu drücken und das Finetuning für das Raster vornehmen  (siehe Animation unten).

Inkscape Grid Settings

Inkscape Gitter Einstellungen

Dieses Gitter ist sichtbar und die Linien magnetisch, wodurch sich Pfade und Objekte an den Eckpunkten ausrichten können (siehe Bild unten).

Inkscape magnetic Grid

Magnetisches Gitter

Interessant ist hierbei auch, das sich ein Würfel durch ein einziges Rauten-Element aufbauen lässt. Man versetzt einfach den Drehpunkt der Raute entsprechend, dupliziert diese Raute mit STRG-D und rotiert diese Kopie an die gewünschte Stelle. Mit gedrückter STRG-Taste beim Rotieren rastet der Vorgang in 15° Schritten ein, was die Arbeit nochmal erleichtert (siehe Animation unten).

Inkscape Isometric Rotation

Element rotieren

Ein so konstruierter Würfel besteht aus den Winkeln 30° und 60° Grad und nichts anderes. Diese Zahlen lassen sich schnell und sauber einstellen und es lässt sich gut damit rechen (siehe Bild unten).

Inkscape axonometrie 30° and 60°

Isometrisch 30° und 60°

Auch wenn isometrische Vektorgrafiken nicht sehr viel mit der Klötzchen Bauweise zu tun haben, ist der Aufbau dennoch interessant. Bei den Klötzchen wird alles, ganze Flächen, aus Würfeln gebaut. Bei den isometrischen Vektorgrafiken bestehen beispielsweise Häuser aus ganzen Rechteckflächen, wenn auch die Winkel an den Enden, oben und unten dem Raster folgen.

 

Exkurs – Andere Bauweise (…andere Baustelle)

Im Netz kursieren zur isometrischen Konstruktion noch andere Vorschläge. Beispielsweise lässt sich eine Raute auch über ein Quadrat konstruieren (siehe Animation unten).

Pixelart

Raute aus Würfel

Messe ich nun nach, beträgt der Winkel nicht mehr 30° Grad, sondern 26,56 Grad (siehe Bild unten).

Pixelart 26 Degrees

Keine 30 Grad!

Auch damit ließen sich Gebäude, Boden-Elemente und dergleichen zusammensetzen, aber diese Gradzahl basiert auf einer etwas anderen Technik (siehe Bild unten).

Inkscape Pixelart

Elemente Konstruktion

Die heutigen isometrischen Darstellungen sind aus der Pixel Art (Bilder aus reinen Pixeln, keine Flächen) entstanden. Pixel Art ist die klassische Kunstform, deren Darstellungen sich an die damaligen Anforderungen und Darstellungsformen, Anzahl der Farben etc. der Computer-Hardware ausgerichtet haben. Darauf basierend wurden solche Motive in der Vektorgrafik auf das isometrische System mit den Winkeln 30° und 60° Grad übernommen.

In der Pixelart verlaufen schräge Linien aus einzelnen Pixeln sauberer in einem Winkel von 26,x° Grad. Daher ist diese Bauweise beziehungsweise der Aufbau basierend auf der Gradzahl 26,x° Grad eine etwas andere Baustelle, nicht falsch, aber vordergründig im Game-Bereich angesiedelt. Wer das nachlesen möchte, kann das hier in englischer Sprache tun.

Wer sich für reine Pixel Art interessiert, Beispiele dazu sehen möchte, kann gerne die Kunstwerke im klassischen Pixel Art-Forum betrachten.

 

 

Isometrische Kreise und Grundflächen für Items

Nun möchte man natürlich gerne nicht nur quadratische Elemente bauen, sondern auch isometrische Ovale in seine Grafiken einbauen (Baumstämme, Säulen, Türme, Brunnen etc.). Die entsprechenden Rundungen lassen sich auf einfache Weise geometrisch konstruieren (siehe Bild unten).

Inkscape Isometric Circles

Isometrische Kreise

Isometric Circles Inkscape

Isometrische Kreise

In einem nächsten Teil werden dann verschiedene Elemente gestaltet die sich als Prototypen verwenden lassen. Auf diese Weise lassen sich diese Elemente zu ganzen Bauten, Flächen und vielen anderen Objekten zusammensetzen.

Das könnte Dich auch interessieren …

Translate »