Der ultimative Kurs für Unity 2D Games in Pixel Art

Anhand des Beispiels einer einfachen Grasfläche betrachten wir in diesem Video die grundsätzliche Arbeitsweise von Aseprite sowie einige der essentiellen Werkzeuge.

Die visuelle Wirkung von Pixel-Art lässt sich durch die bewusste Auswahl einer Farbpalette stark beeinflussen. Aseprite enthält bereits eine Sammlung typischer Gruppen aufeinander abgestimmter Farben.

Aseprite bietet verschiedene Werkzeuge, um ein Bild einzufärben.

Unter MacOS verwendet Aseprite das Systemmenü. Das Erscheinungsbild unter Windows lässt sich über die Einstellungen auch auf dem Mac aktivieren.

Zunächst legen wir ein neues Unity-Projekt und eine Basis-Ordnerstruktur an.

Infos zur Verwendung einer neueren Unity-Version.

In diesem Video besprechen wir Aseprite-Optionen, die sich auf das Speichern und Exportieren beziehen. Unsere Gras-Kachel wird dabei für Unity exportiert.

Wir importieren binden unsere Gras-Textur nun in das Tilemap-System ein und erstellen die notwendigen Bestandteile, um die Grasfläche mit grafischen Werkzeugen bearbeiten zu können.

Die Import-Einstellungen für Grafiken beeinflussen die Schärfe der Pixelgrafik.

Wenn die Auflösung des Bildschirms und der Szenengröße nicht aufeinander abgestimmt werden, kommt es zu unschönen Verzerrungen der Grafik.

Die Hardware-Synchronisation schränkt die Darstellung der Inhalte zwangsläufig ein. Mit dem Problem kann auf zwei Arten umgegangen werden.

Als Arbeitsgrundlage für den weiteren Aufbau des Spiels legen wir jetzt eine sichtbare Kachelanzahl fest.

Um die Szene interessanter zu gestalten, lassen sich weitere Pinselfarben der Kachelpalette hinzufügen.

Ausgereiftere Designs erfordern die Überlagerung von Elementen, um komplexere Hintergründe zu darzustellen. Für diesen Effekt lassen sich Kachel-Ebenen nutzen.

Damit sich wiederholende Elemente wie das auf dem Boden liegende Laub abwechslungsreich aussehen, können mehrere Varianten erstellt und über ein einheitliches Sprite-Sheet verwaltet werden. 

Anhand einer dritten Variation des Laubs werden in diesem Video die Arbeitsschritte bei der Verwendung von Spritesheets als Quelle für statische Kacheln wiederholt.

Mithilfe eines Plugins ist es möglich, die vom Pinsel gezeichnete Kachel zufällig auszuwählen. Damit lassen sich Variationen und Streuungen sehr leicht realisieren.

Durch die Sort Order lässt sich die Zeichenreihenfolge der Kachel-Ebenen unabhängig von der Objektreihenfolge festlegen.

Mit den Ebenen, Frames und Animationswerkzeugen wie dem Zwiebelschichteffekt und Verbundenen Frames zeichnen wir zunächst eine animierte Blume in Aseprite.

In diesem Video sehen wir uns die automatisierte Sprite-Aufteilung sowie die Erstellung animierter Kacheln an.

Sowohl Kachelebenen als auch Animierte Kacheln selbst haben Eigenschaften, die die Animationsgeschwindigkeit beeinflussen.

Der ungenutzte Platz in der Blumen-Kachel wird durch Duplizieren und Verschieben der Ebene nun aufgefüllt.

Unitys eigene Optimierungseinstellungen können bei PixelArt Bildstörungen verursachen, so dass Pixel die falsche Farbe haben oder komplett verloren gehen.

Zur Ausdekoration der Kachel ergänzen wir nun Grashalme, die wir dank Aseprites Frame-Verknüpfung nur einmal für die gesamte Animation zeichnen müssen.

Zu Beginn zeichnen wir sehr einfache Bilder für horizontale und vertikale Wege, sowie eine Kreuzung.

Mittels der einfachen Wege-Grafiken sehen wir uns das Grundprinzip der regelbasierten Kacheln an. Es wird ein Pinsel entstehen, der die Grafik automatisch anhand der Strichrichtung auswählt.

Wir ergänzen die regelbasierte Kachel nun um Eckstücke und sehen uns dabei Möglichkeiten der Wiederverwendung von Grafiken durch automatische Spiegelung und Rotation an.

Zur Komplettierung unseres dynamischen Pinsels ergänzen wir abschließend T-Stücke bei denen zwei Wege rechtwinklig aufeinander treffen.

Sobald sich Kacheln durch Details wie eine Schattenkante unterscheiden, funktioniert die Spiegelfunktion nicht mehr wie gewünscht und es müssen individuelle Kacheln erstellt werden.

Zunächst sehen wir uns an, wie sich regelbasierte Kacheln auch dazu eignen, Flächenränder zu verschönern. 

Nachdem der Grundaufbau der Graskanten fertig ist, können wir mit der grafischen Ausgestaltung beginnen.

An einem ersten Beispiel sehen wir uns an, wie die noch fehlende Gestaltung konvexer Ecken ergänzt werden kann.

Im Zeitraffer kannst Du hier nachverfolgen, wie ich die restlichen drei Ecken nach dem in der vorherigen Lektion vorgestellten Vorgehen ergänze.

Da mir die hintere Graskante noch nicht gefällt, kannst Du Dir in diesem Video ansehen, wie ich sie noch verändert habe.

Der Clip enthält keine essentiellen Neuerungen und kann auch übersprungen werden.

Zunächst legen wir die Grundform des Baumes in Aseprite auf verschiedenen Ebenen an.

Um der Baumkrone ein plastisches, kugelförmiges Aussehen zu verleihen, fügen wir nun Farbstufen ein.

Die Ausgestaltung der Wurzeln vervollständigt nun den Baum.

In diesem Video lernst Du den Unterschied zwischen Ebenentransparenz und transparenter Pinselfarbe in Aseprite anhand der Gestaltung des Baumschattens kennen.

Dieses Video demonstriert die Ausrichtungsprobleme, die beim Einsetzen der übergroßen Kachel in Unity entstehen und gibt eine Vorschau auf zwei Lösungsmöglichkeiten.

In diesem Video erfährst Du, wie Du die Ausrichtung mittels Anpassung der Ankerpunkte korrigierst.

In diesem Video erfährst Du, wie Du das Ausrichtungsproblem durch Segmentieren des Sprites sehr einfach lösen kannst.

Ein Vorteil des segment-basierten Weg 2 ist, dass sich auch Teilstücke gut austauschen lassen. In diesem Video erfährst Du, wie dies konkret funktioniert. Dazu erzeugen wir einen dichten Wald durch Überlappung von Bäumen - ohne zusätzliche Ebenen.

Dieses Video erklärt die beiden Sortierebenen, mithilfe derer sich festlegen lässt, welche Elemente im Vordergrund und welche im Hintergrund erscheinen.

Wir legen zunächst ein einfaches Platzhalterobjekt an, um die bewegliche Spielfigur vorzubereiten. Eine separate Sortiergruppe bietet sich in diesem Zusammenhang an, um die Zeichenreihefolge zu verwalten.

Ein einfaches C#-Script bewegt die Figur auf Tastendruck nun zur Seite.

Mithilfe der Berücksichtung anfallender Rechenzeiten ist es möglich, ein Spiel so zu programmieren, dass es unabhängig von der Hardware läuft. Diese Präsentation erläutert die Grundlagen und den mathematischen Ansatz hinter diesem Prinzip.

Die im vorangehenden Vortrag kennengelernten Grundlagen werden jetzt im Projekt angewendet, um den Platzhalter per Tastendruck in alle vier Richtungen zu bewegen.

Mittels Unitys Physik-System bewirken wir, dass der Held nicht mehr über Bäume und andere Hindernisse läuft, sondern davor stehen bleibt.

Zur Optimierung des Codes sehen wir uns in diesem Video die Bedeutung von FixedUpdate an und setzen dieses in unserem Projekt ein.

Durch geschickten Einsatz von Segmentierung und Ebenen lassen sich auch im 2D-Spiel interessante räumliche Wirkungen erzielen.