Oft ist es hilfreich, die Größe von Elementen in einem Spiel oder einer Anwendung dynamisch zu ändern. Dialogfelder, Porträts und andere Informationsanzeigen verwenden häufig denselben Rahmen, obwohl sie unterschiedlich groß sind. Anstatt doppelte Grafiken in verschiedenen Größen zu erstellen, kann Unity bestimmte Teile eines Sprites dynamisch strecken und kacheln, damit ein Sprite als Rahmen (und optimal als Hintergrund) für UI-Elemente in vielen Größen fungieren kann.
9-Slicing Scalable Sprites
Spiele wie Arkanoid oder Pong nutzen eine Plattform, um das Ziel vor dem Ball zu schützen. Abhängig vom Schwierigkeitsgrad des Levels und je nachdem wie die Power-ups verwendet werden, will der Designer die Plattformgröße während des Spiels ändern. Ein Sprite mit 9 Segmenten kann nach Bedarf skaliert werden, um Änderungen in Echtzeit zu berücksichtigen.
Die Bezeichnung von Rahmen im Sprite-Editor wird als „9-Slicing“ bezeichnet. Da sich die Kanten überlappen und Ecken bilden, ergibt die verbleibende Mitte des Sprites insgesamt neun Teile, in die das Sprite geschnitten wird. Das Zentrum ist der Boden, der Gipfel, linke und rechte Kante sowie das Zentrum des Sprites, wenn die Füllung in der Mitte aktiviert ist. Sie werden erweitert (im Sliced mode) oder gekachelt (in Tiled), während die Eckpunkte in der originalen Größe genutzt werden.
Wähle ein Sprite aus, welches den Hintergrund und den Rahmen darstellen soll. Ziehe das Sprite in dein Projekt und öffne es im Projektfenster. Setze den Mesh Type auf Full Rect.
Wähle Apply, um ggf. die Umstellung zu bestätigen. Öffne dann den Sprite Editor:
Ziehe entweder die grünen Linien an den Rändern des Sprite nach innen, oder legen Sie die Felder „Rahmen“ fest, um den oberen, unteren, linken und rechten Rand zu markieren.
Bestätige mit Apply, am oberen Fensterrand, die Änderungen.
Schließe dann den Sprite-Editor. Ziehe das Sprite ins Spiel bzw. Hierarchifenster.
Vom GameObject Dropdownmenü wähle UI>Panel aus.
Es öffnet sich das Panel Inspectorfenster:
Wähle als Soirce Image dein Sprite aus:
Standardmäßig wird das Sprite transparent. Stelle Bildfarbe und Transparenz ein, wenn gewünscht.
Durch Ändern der Werte in der Panels Rect Transform für die Offsets und Größe oder das Bearbeiten der Kanten und der Größe direkt mit dem Rect-Werkzeug, können die 9-sliced-Kanten und die Mitte gestreckt werden, um das Panel mit dem Quellbild zu füllen.
Im Image (Script) Inspectorfenster des Panels setze den Typ auf Tiled.
Passen Sie die Canvas-Einstellungen an deine Einstellungen an.
Sprite Importeinstellungen, ebenso wie Canvas UI-Scale-Mode-Einstellungen – je nachdem, wie sie für das Projekt benötigt werden – beeinflussen direkt die 9-sliced Sprites. Wie benötigt, lösst sich beispielsweise die Größe einstellen und die mit Skallierungen gearbeitet werden, damit das Sprite dem Bildschirm angepasst werden kann.
