Tutorial | Pixel-Art nachzeichnenBevor wir Zugang zu großartiger Vektorgrafik-Software hatten...Und sogar noch bevor es 640x480 Computer-Monitore gab......spielte man Computerspiele mit kunstvoll gestalteten Pixel-Bildern auf Monitoren mit niedrigen Auflösungen.Die Kunstrichtung, die in dieser Zeit entstanden ist, nennt man „Pixel-Art“.Inkscape nutzt die Fähigkeiten von libdepixelize, um diese „besonderen“ Pixel-Art-Bilder automatisch zu vektorisieren. Man kann die Funktion natürlich auch mit anderen Arten von Bildern ausprobieren, aber: Das Ergebnis wird wahrscheinlich nicht so gut werden. Daher empfehlen wir, für solche Bilder doch lieber den anderen Vektorisierer – potrace – von Inkscape zu verwenden.Schauen wir uns die Fähigkeiten dieses Vektorisierprogrammes einmal an einem Beispielbild an. Unten links sehen Sie ein Beispiel einer Rastergrafik (aus einer Einreichung beim Wettbewerb „Liberated Pixel Cup“), rechts davon das Ergebnis der Vektorisierung.libdepixelize verwendet den Kopf-Lischinski-Algorithmus, um Bilder zu vektorisieren. Dieser Algorithmus nutzt verschiedene IT-Techniken und mathematische Konzepte, um ein gutes Ergebnis für Pixel-Art-Bilder zu erzielen. Was auffällt, ist, dass der Alpha-Kanal vom Algorithmus komplett ignoriert wird. libdepixelize verfügt zur Zeit nicht über Funktionen, die dieser Art von Bildern gerecht werden, jedoch lassen sich mit allen Pixel-Art-Bilder, die über einen Alpha-Kanal verfügen, ähnlich gute Ergebnisse erzielen wie mit Bildern, für die der Kopf-Lischinski-Algorithmus gedacht ist.Das Bild oben hat einen Alpha-Kanal und das Ergebnis ist vollkommen in Ordnung. Wenn Sie irgendwann einmal über ein Pixel-Art-Bild stolpern sollten, das sich hiermit nicht gut vektorisieren lässt, und Sie außerdem glauben, dass der Grund dafür der Alpha-Kanal sein könnte, dann melden Sie dies dem Entwickler von libdepixelize (d.h. erstellen Sie einen Fehlerbericht auf der zugehörigen Projekt-Webseite) – falls nötig, wird er den Algorithmus dann entsprechend anpassen. Das kann er jedoch nur, wenn er auch ein Bild zur Verfügung hat, das beim Vektorisieren Probleme macht.Das Bild unten zeigt den Pixelkunst-Dialog auf Englisch. Der Dialog kann über das Menü mit Pfad⇒Bitmap nachzeichnen⇒Pixelkunst oder durch einen Rechtsklick auf eine Rastergrafik und Auswahl des Befehls Bitmap nachzeichnen geöffnet werden.Der Dialog gliedert sich in zwei Abschnitte: „Heuristik“ und „Ausgabe“. „Heuristik“ bietet Einstellungen für fortgeschrittene Benutzer. Die Standardeinstellungen sind jedoch meist gut geeignet – um diese sollten Sie sich erstmal keine Gedanken machen. Heben wir uns das also für später auf und beginnen wir stattdessen mit der Erklärung für die Einstellungen unter „Ausgabe“.Der Kopf-Lischinski-Algorithmus funktioniert (grob betrachtet) wie ein Compiler. Er wandelt die Bilddaten nacheinander in verschiedene Formate um. Bei jedem Schritt hat der Algorithmus die Möglichkeit, die Berechnungen, die mit diesem Datenformat möglich sind, auszutesten. Einige dieser Zwischenformate können grafisch korrekt abgebildet werden (wie die Umgeformte-Zellen-Darstellung in der Voronoi-Ausgabe), einige auch nicht (wie z.B. der Ähnlichkeitsgraph). Als libdepixelize entwickelt wurde, äußerten Nutzer immer wieder den Wunsch, eine Möglichkeit einzubauen, diese Zwischenschritte mit libdepixelize ausgeben zu können, und der Autor ist diesem Wunsch nachgekommen.Die Standardeinstellung für die Ausgabe sollte das beste Ergebnis liefern und ist daher wahrscheinlich genau das, was Sie möchten. Sie haben bereits die Standardausgabe für die oben gezeigten Beispiele dieses Tutorials gesehen. Wenn Sie es selbst ausprobieren möchten, öffnen Sie einfach den Bitmap nachzeichnen-Dialog und klicken auf OK, nachdem Sie ein Rasterbild auf der Zeichenfläche ausgewählt haben.Unten können Sie die Voronoi-Ausgabe sehen. Es handelt sich dabei um ein „umgeformtes Pixel-Bild“, bei dem die Zellen (zuvor Pixel) so umgeformt wurden, dass Pixel, die zusammen einen bestimmtes Merkmal der Zeichnung bilden, miteinander verbunden sind. Es werden keine Kurven erstellt und das Bild besteht weiterhin nur aus geraden Linien. Den Unterschied sieht man, wenn man das Bild vergrößert. Zuvor konnten Pixel keine gemeinsame Kante mit einem diagonal liegenden Nachbarpixel haben, selbst wenn dieser zum gleichen Bildelement gehörte. Nun ist es jedoch möglich (dank des Farbähnlichkeitsgraphen und der Heuristiken, die Sie noch einstellen können, um ein besseres Ergebnis zu erzielen), dass zwei diagonal aneinander grenzende Zellen eine gemeinsame Kante haben (zuvor hatten sie nur einen Eckpunkt gemeinsam).Die Standardausgabe mit B-Splines liefert Ergebnisse mit weichen Kurven, da hierfür die Voronoi-Ausgabe aus dem vorigen Schritt in quadratische Bézier-Kurven umgewandelt wird. Die Umwandlung erfolgt jedoch nicht 1:1, da weitere Heuristiken darüber entscheiden, welche Kurven miteinander verschmolzen werden sollen, wenn der Algorithmus auf eine Verzweigung bei den sichtbaren Farben trifft. Ein Hinweis zu den Heuristiken in diesem Schritt: Sie können sie nicht beeinflussen.Der letzte Schritt von libdepixelize (aktuell nicht über die Inkscape-Oberfläche verfügbar, da er noch experimentell und unvollständig ist) ist „Kurven optimieren“, um die Treppeneffekte der B-Spline-Kurven zu entfernen. Dieser Schritt setzt auch Kantendetektion ein, um zu verhindern, dass die falschen Bildmerkmale geglättet werden, und eine Triangulationstechnik, die dafür sorgt, dass die Position der Knoten nach der Optimierung dieselbe bleibt. Wenn diese Ausgabe von libdepixelize (hoffentlich bald) nicht mehr im experimentellen Stadium ist, werden Sie diese Funktionen einzeln (de-)aktivieren können.Der Abschnitt „Heuristik“ in der Bedienoberfläche erlaubt Einstellungen für die Heuristiken, die libdepixelize verwendet um zu entscheiden, was zu tun ist, wenn es auf einen 2x2 Pixel großen Block trifft, bei dem beide Diagonalen ähnliche Farben haben. „Welche Verbindung soll ich erhalten?“ fragt libdepixelize. Es versucht, alle Heuristiken auf die im Widerspruch stehenden Diagonalen anzuwenden und behält schlussendlich die Verbindungen des Gewinners bei. Wenn beide gleichauf liegen, werden beide Verbindungen gelöscht.Wenn Sie die Auswirkungen der einzelnen Heuristiken ausprobieren und mit den Einstellungen spielen möchten, ist die die Voronoi-Ausgabe dafür am geeignetsten. Man kann hier leichter die Auswirkungen der Heuristiken sehen - und wenn man mit der Ausgabe zufrieden ist, kann man einfach den Ausgabetyp ändern.Unten sehen Sie jeweils das Originalbild und die B-Spline-Ausgabe nebeneinander. In jeder Reihe ist nur jeweils eine der Heuristiken aktiviert. Achten Sie auf die Unterschiede zwischen den Heuristiken, die mit den pinkfarbenen Kreisen hervorgehoben wurden.Beim ersten Versuch (ganz oben) haben wir nur die Kurven-Heuristik aktiviert. Diese Heuristik versucht, lange Kurven zu erhalten. Das Ergebnis ähnelt dem in der letzten Reihe, in der die Heuristik für verstreute Pixel angewandt wurde. Ein Unterschied besteht darin, dass die „Stärke“ gerechter wirkt und die Kurven-Heuristik nur einen hohen Wert für ihr „Votum“ vergibt, wenn es wirklich wichtig ist, die Verbindungen zu erhalten. Das Konzept für „gerecht“ basiert hier auf der „menschlichen Intuition“ für die analysierte Pixelbilddatenbank. Ein weiterer Unterschied ist, dass diese Heuristik sich nicht entscheiden kann, was sie tun soll, wenn die Verbindungen große Blöcke anstelle von langen Linien zusammen gruppieren (denken Sie hier zum Beispiel an ein Schachbrett).Im zweiten Versuch (in der mittleren Reihe) haben wir nur die Inseln-Heuristik aktiviert. Diese Heuristik versucht ausschließlich, Verbindungen zu erhalten, die anderenfalls zu mehreren, isoliert liegenden Pixeln (Inseln) mit einer konstanten Gewichtung führen würden. Diese Situation kommt nicht so häufig vor wie die Situationen, für die die anderen Heuristiken gedacht sind, aber diese Heuristik ist irgendwie cool und sie hilft dabei, noch bessere Ergebnisse zu erzielen.Im dritten Versuch (unterste Reihe) haben wir nur die Heuristik für verstreute Pixel aktiviert. Dieser Heuristik versucht, die Verbindungen der Linien in der Vordergrundfarbe zu erhalten. Um herauszufinden, welche denn die Vordergrundfarbe ist, analysiert die Heuristik einen Ausschnitt („Fenster“) mit umgebenden Pixeln der Kurven, die im Widerspruch zueinander stehen. Für diese Heuristik lässt sich nicht nur die „Stärke“ (Gewichtung) einstellen, sondern auch die Größe des Ausschnitts. Bedenken Sie, dass eine Vergrößerung des Ausschnitts dazu führt, dass auch die maximal mögliche Gewichtung für diese Heuristik ansteigt und sie daher vielleicht den Multiplikator für diese Heuristik anpassen möchten. Der Originalautor von libdepixelize findet diesen Algorithmus zu „gierig“ und verwendet daher gern einen niedrigen Wert von 0,25 für den Multiplikator.Selbst wenn die Kurven- und die Verstreute-Pixel-Heuristik ähnliche Ergebnisse bringen, möchten Sie möglicherweise beide aktiviert lassen, da die Kurven-Heuristik zusätzlich sicherstellt, dass die wichtigen Kurven der die Kontur bildenden Pixel erhalten bleiben, und da es Fälle gibt, in denen nur die Verstreute-Pixel-Heuristik eine Lösung bietet.Hinweis: Alle Heuristiken können deaktiviert werden, indem ihr Multiplikator / ihre Gewichtung auf Null gesetzt wird. Eine Heuristik kann dazu gebracht werden, entgegen ihrer Bestimmung zu handeln, indem man negative Werte für ihren Multiplikator / ihre Gewichtung eingibt. Warum sollte man jemals ein Verhalten, das dafür erfunden wurde, die Qualität zu verbessern, ins Gegenteil verkehren? Weil man es kann... oder vielleicht möchten Sie ein „künstlerisch wertvolles“ Ergebnis... wie auch immer... es ist möglich.Das war's! In dieser ersten Version von libdepixelize sind dies alle Einstellungsmöglichkeiten, die es gibt. Wenn die Forschungen des Autors von libdepixelize und des kreativen Mentors der Bibliothek Erfolg haben, gibt es vielleicht bald zusätzliche Optionen, die es sogar ermöglichen könnten, noch mehr Bildertypen mit libdepixelize zu vektorisieren. Wünschen Sie Ihnen Glück!Alle verwendeten Bilder stammen aus dem „Liberated Pixel Cup“-Wettbewerb, wodurch Copyright-Probleme vermieden werden sollten. Die Links hierzu sind:•http://opengameart.org/content/memento•http://opengameart.org/content/rpg-enemies-bathroom-tilesVinícius dos Santos Oliveira; Nicolas Dufour; Kris De Gussem; Gellért GyurisMaren Hachmann — 2015Esteban Capella — 2019