Kategorien
Tools Webdesign

Animationen und Pixel-Art mit Pixelorama erstellen

Pixelgrafiken sind beliebt. Sie sind einfach zu erstellen, schnell ladbar und vermitteln eine ganz besondere Atmosphäre. Ob es nun um den Retro Stil der 80er und frühen 90er Jahre geht oder auch um aktuelle Animationen.

Wer so eine Pixelgrafik mit heutigen visuellen Editoren erstellen will, stolpert erstaunlicherweise über viele Probleme. Es ist gar nicht so einfach mit High-Tech Software Low-Tech Grafiken zu erzeugen. Ausserdem ist man anfangs ein wenig verwirrt, wie man denn perspektivisch zeichnen soll, wenn so wenige Pixel zur Verfügung stehen.

Pixelorama ist ein kostenloser und quelloffener Pixelgrafik-Editor, der mit der Godot Engine von der Firma Orama Interactive entwickelt wurde. Egal, ob du animierte Pixelgrafiken, Spielgrafiken, Kacheln oder jede andere Art von Pixelgrafik erstellen möchtest, Pixelorama bietet dir eine Vielzahl von Tools und Funktionen.

Für alle Neulinge auf dem Gebiet von Pixelgrafiken, hier ein paar einleitende Informationen.

Pixelgrafik

So grundsätzlich gibt es zwei Arten von Pixelgrafiken. Die mit isometrischer Projektion und die mit nicht isometrischer Projektion.

Die isometrische Ansicht wird in einem bestimmten Winkel zur Horizontalen gezeichnet. Dabei wird keine der Kanten verküzt gezeichnet.

Die nicht isometrische Projektion kann perspektivisch sein, mit einem oder mehreren Fluchtpunkten oder eine Ansichten von oben, unten oder den Seiten.

Isometrisch
nicht isometrisch
Isometrische Pixelgrafik
Perspektivische Darstellung mit verkürzten Kanten

Die isometrische Darstellung versucht eine 3-dimensionale Ansicht zu erreichen. Die Ansicht ist aber real unmöglich, denn das Auge sieht ja perspektivisch. Die hinteren Bildelemente sind kleiner, die vorderen grösser.

Interessanterweise „versteht“ dein Auge, bzw. dein Gehirn isometrische Darstellungen, beispielsweise bei Bauplänen von Häusern, oft leichter als perspektivisch korrekte Darstellungen mit Grössenveränderungen. Wer jemals versucht hat einen Bauplan, Grundriss oder ähnliches zu erzeugen wird vermutlich verstehen, was ich meine.

Leicht zu verstehender isometrischer Bauplan

Eine Herausforderung bei der isometrischen Darstellung von Pixelgrafiken ist die Fixierung auf bestimmte Winkel (z.B. 45° oder 30°). Wer einfach so Linien zieht, stellt fest, dass es bei einer kleinen Pixelauflösung nicht gut aussieht. Die Linien sind unregelmässig.

„unregelmässige“ Linien bei etwa 30°-Winkel
Linien im 45° Winkel sehen gleichmässiger aus

Die 45° Linie entsteht, wenn man einfach ein Pixel nach oben und ein Pixel nach rechts geht (1 Pixel Versatz). Viele isometrische Zeichnungen nutzen einen Pixel nach oben und zwei Pixel nach rechts. Das sieht irgendwie besser aus und ergibt einen Winkel von etwa 26° (2 Pixel Versatz).

Ein „2 Pixel Versatz“ erzeugt einen „glaubwürdigen“ Eindruck

Wenn man so etwas professionell betreibt, kann ein Ergebnis der isometrischen „zwei Pixel Versatz Technik“ dann so aussehen.

Hier ist das Original zu bewundern https://www.eboy.com/spritebox/egrP7FAoSFYctobLt

Animationen von Pixelgrafiken

Wenn man mehrere Pixelgrafiken „übereinander“ legt und Kleinigkeiten am Bild verändert erhält man eine Art Trickfilm.

Auch hier ein Beispiel der Künstlergruppe eBoy.

Andy Warhol Loop GIF by Polygav https://giphy.com/gifs/artist-andy-warhol-gavin-reed-l0K4lgP9P64cKRtZe

Es ist schon faszinierend, was man mit dieser Technik „anstellen“ kann 🙂

Pixel-Art der Gruppe eboy https://www.eboy.com/spritebox/6Re4AB6YzqR6oHCgv

Ein ganzes Universum an Tutorials sowie unterschiedlichen Arten und Weisen wie man am besten so ein Pixelbild zeichnet steht zur Verfügung.

Die erste gute Nachricht ist: Ist ist gar nicht so schwer, es macht Spass.

Die zweite gute Nachricht ist: Es gibt dieses Open Source Tool namens Pixelorama, mit dem man solchen Pixelgrafiken und Animationen erstellen kann.

Das Programm läuft auf allen Plattformen und nach einem Blick in die Doku versteht man durchaus, was wie funktioniert. Wer jemals mit einem Bildeditor gearbeitet hat, ist natürlich im Vorteil. Eine recht ausführliche Dokumentation findest du unter https://www.oramainteractive.com/Pixelorama-Docs/

Eine sehr einfache, deutschsprachige Einführung bieten vier kurze YouTube Tutorials: eins, zwei, drei und vier.

Ein paar interessante Einblicke in das Entwicklerteam und dessen Technik ein Bild zu erstellen, wird in diesem Video gezeigt: Orama Interactive MiniDebConf Online Talk.

Ich habe etwa eine Stunde benötigt um grob zu verstehen, wie die Zusammenhänge in der Oberfläche sind – es lohnt sich durchzuhalten 🙂

Erste Schritte in Pixelorama

Fazit

Pixelgrafiken lassen dich nicht mehr los, wenn du einmal damit angefangen hast. Es ist etwa so wie mit Legosteinen spielen. Der Pixelorama Editor ist einfach genug um frustrationsfrei zu beginnen und leistungsfähig genug um professionell zu arbeiten.

Links


tl;dr:

Von hagengraf

Ich erstelle bequeme und benutzerfreundliche Orte in virtuellen und physischen Umgebungen.

6 Antworten auf „Animationen und Pixel-Art mit Pixelorama erstellen“

Reposts

  • hagengraf
  • PixelArt Bot
  • Animators Pal

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert