Geordnet mit Bildern arbeiten - Spritesheets!

Sign in to queue

Description

Es ist langsam an der Zeit, mit der kleinen Tutorial-Reihe fortzufahren!

Heute möchte ich euch erklären, wie ihr mit einem Konzept von Grafikdateien arbeiten könnt, das euch immer mal wieder in der bunten Online- (und allgemeinen) Spieleentwicklungswelt begegnen wird: Spritesheets.

Spritesheets sind einzelne Grafikdateien, die mehrere Grafiken auf einmal beinhalten. Sehr oft sieht man das zum Beispiel im Zusammenhang mit einzelnen Spielfiguren, für die sämtliche Grafikdaten in einer Datei hinterlegt sind. Oft werden auch sämtliche Icons in eine Datei gelegt.

Dies spart euch zumindest Zeit, euch in den Dateistrukturen zurechtzufinden, aber es gibt sowohl starke Argumente dafür, Spritesheets zu verwenden, als auch Gegenargumente.

Der Unterschied ist vor allem der: Bei der Einzelgrafik-Variante werden zahlreiche einzelne Grafikdateien abgelegt (was wirklich sehr schnell sehr viel sein kann), bei den Spritesheets sind es wenige größere Grafikdateien.

Es gibt für beide Varianten definitiv gute Anwendungsfälle, daher ist es sinnvoll, sich einfach mal damit auseinanderzusetzen.

Spritesheets anlegen

Spritesheets anzulegen funktioniert sehr einfach. Angenommen ihr wollt vier Bilder in einer Datei zusammenfassen. Diese Bilder haben, der Einfachheit halber, eine Größe von ... sagen wir 60 x 100 pixel (Breite x Höhe).

Startet jetzt einfach das Grafikprogramm eurer Wahl und legt eine neue Grafikdatei an. Jetzt müsst ihr euch entscheiden, wie ihr die Grafiken sortieren wollt: alle nebeneinander? Alle untereinander? Oder vielleicht als Raster, 2 x 2 Bilder sozusagen?

Falls ihr euch für "nebeneinander" entscheidet, bleibt die Höhe gleich: 100 Pixel. Die Breite hingegen, muss entsprechend das Vierfache eines Bildes sein (oder besser gesagt, die Summe aller Werte für die Breite der Bilder)... also: 60 + 60 + 60 + 60 = 240. Einmal am Beispiel von MS Paint:

Generic Episode Image

Hier habe ich erst ein Bild angelegt und will die Größe via "Resize" ändern. Ihr könnt diese Funktion auch nutzen, wenn ihr euch bei der Einschätzung der notwendigen Bilddimensionen vertan habt. (wie ihr vielleicht erahnen könnt, ist mir genau das beim ersten Anlauf passiert, natürlich nur zu Demonstrationszwecken).

In diesem Bild könnt ihr dann die einzelnen Bilder einfach nebeneinander anlegen. Generic Episode Image

So ungefähr könnt ihr euch die Aufteilung vorstellen. Oder mal am Beispiel mit der Maskottchen-Katze (drei Bilder, jeweils 100 x 100 Pixel, untereinander angeordnet):

Generic Episode Image

 

Und so einfach habt ihr ein Spritesheet erstellt!

Spritesheets in Unity verwenden

Oft geht es aber vor allem nur darum, in Unity mit bereits fertigen Spritesheets zu arbeiten. Die eine Möglichkeit ist, die Aufteilung im Quellcode ausrechnen zu lassen; es geht aber auch einfacher - nämlich mit dem Sprite-Editor von Unity.

Ich habe mal die Katzen-Sprites von oben als Unity-Textur importiert (der Einfachheit halber mit weißem statt dem sonst üblichen transparenten Hintergrund). Markiert diese Textur in der Projektübersicht und werft einen Blick auf den Inspektor.

 

Generic Episode Image

 

Rot markiert findet ihr ein Dropdown, das aktuell "Single" ausgewählt hat.

Unity betrachtet die Grafik also als einzelne Grafik. Wenn ihr dort raufklickt, seht ihr noch eine zweite Option, "Multiple".

Generic Episode Image

Wählt ihr diesen Punkt, erkennt Unity, dass sich in der Datei mehrere verschiedene Texturen bzw. Bilder befinden. Gleichzeitig erscheint auch ein neuer Button, "Sprite Editor". Klickt ihr dort rauf, öffnet sich ein weiteres Fenster, das ungefähr so ausschaut:

Generic Episode Image

 

Auch in diesem Bild habe ich ein paar Dinge für euch rot hervorgehoben: Die Sprite-Arbeitsfläche in der Mitte sowie oben rechts die Buttons, um die Änderungen rückgängig zu machen ("Revert") oder zu speichern ("Apply"). Wichtig: bevor ihr auf "Apply" klickt, werden die Änderungen NICHT gespeichert. Des weiteren ist oben links ein Button, der mit "Slice" beschriftet ist. Ihr habt in diesem Fenster nämlich die Möglichkeit, eine Grafik automatisch "zerschneiden" zu lassen (wenn der Hintergrund transparent ist), oder die Bildchen manuell zurecht zu schneiden.

Automatisch sieht das ganze so aus:

Generic Episode Image

Spielt mit den Einstellungen und klickt auf "Slice", wenn Unity versuchen soll, die Grafiken selbstständig aufzuteilen. Meist macht es jedoch mehr Sinn, die Grafiken von Hand zu unterteilen.

Dazu klickt ihr mit der Maus einfach in die Sprite-Arbeitsfläche in der Mitte, haltet die Maustaste gedrückt und zieht das Viereck, dass sich dann zeigt, in die richtige Größe um den jeweiligen Bereich.

Hier könnt ihr sehr gut sehen, wie ich ein Quadrat um die oberste Katze gezogen habe - genau wie das Eigenschaftsfenster, das sich danach geöffnet hat:

Generic Episode Image

Um euch das Leben zu erleichtern, solltet ihr im rot markierten Bereich einen passenden Namen eingeben. Hier also statt "cats_0" lieber "Gamerkatze", zum Beispiel.

Wenn ihr fertig seid, dann klickt ihr - wie zuvor bereits beschrieben - auf "Apply" im Sprite-Fenster. Damit werden dann die Änderungen übernommen und eure Projektübersicht enthält dann die folgende Ansicht:

Generic Episode Image

Die einzelnen Bildchen könnt ihr jetzt genau so, wie ihr es zuvor gelernt habt, in die Hierarchie- oder Szenenansicht ziehen ... ebenso wie auf die entsprechenden Felder im Inspektor.

Praktisch, nicht?

The Discussion

Add Your 2 Cents