Sprites

Eine Sprite-Komponente (sprite component) zeigt ein einfaches Bild oder eine Flipbook-Animation auf dem Bildschirm an.

Die Sprite-Komponente kann für ihre Grafik entweder einen Atlas oder eine Kachelquelle (tile source) verwenden.

Sprite-Eigenschaften

Neben den Eigenschaften Id, Position und Rotation gibt es die folgenden komponentenspezifischen Eigenschaften:

Image

Wenn der Shader nur einen Sampler hat, heißt dieses Feld Image. Andernfalls ist jeder Platz nach dem Textur-Sampler im Material benannt. Jeder Platz legt die Atlas- oder Kachelquellenressource fest, die das Sprite für diesen Textur-Sampler verwendet.

Default Animation

Die Animation, die für das Sprite verwendet werden soll. Die Animationsinformationen werden aus dem ersten Atlas oder der ersten Kachelquelle übernommen.

Material

Das Material, das zum Rendern des Sprites verwendet werden soll.

Blend Mode

Der Mischmodus, der beim Rendern des Sprites verwendet werden soll.

Size Mode

Bei Automatic legt der Editor die Größe des Sprites fest. Bei Manual kannst du die Größe selbst festlegen.

Slice 9

Lege hier fest, dass die Pixelgröße der Sprite-Textur an den Rändern erhalten bleibt, wenn du die Größe des Sprites änderst.

Texturierung mit Neun-Segment-Skalierung

GUI-Box-Knoten (box nodes) und Sprite-Komponenten (sprite components) stellen manchmal Elemente dar, deren Größe vom jeweiligen Kontext abhängt: Bereiche und Dialogfelder, deren Größe an den enthaltenen Inhalt angepasst werden muss, oder eine Lebensanzeige, deren Größe die verbleibende Gesundheit eines Gegners widerspiegeln muss. Dabei können Darstellungsprobleme entstehen, wenn du den in seiner Größe angepassten Knoten oder das Sprite mit einer Textur versiehst.

Normalerweise skaliert die Engine die Textur so, dass sie in die rechteckigen Grenzen passt. Durch das Festlegen von Randbereichen für die Neun-Segment-Skalierung (9-slice) kannst du jedoch einschränken, welche Teile der Textur skaliert werden sollen:

Die Einstellung Slice9 des Box-Knotens besteht aus 4 Zahlen. Sie geben jeweils die Anzahl der Pixel für den linken, oberen, rechten und unteren Rand an, die nicht auf die übliche Weise skaliert werden sollen:

Die Ränder werden im Uhrzeigersinn festgelegt, beginnend am linken Rand:

• Ecksegmente werden niemals skaliert.
• Randsegmente werden entlang einer einzelnen Achse skaliert. Die linken und rechten Randsegmente werden vertikal skaliert. Die oberen und unteren Randsegmente werden horizontal skaliert.
• Der mittlere Texturbereich wird nach Bedarf horizontal und vertikal skaliert.

Die oben beschriebene Texturskalierung mit Slice9 wird nur angewendet, wenn du die Größe des Box-Knotens oder des Sprites änderst:

Mipmaps und Neun-Segment-Skalierung

Aufgrund der Funktionsweise von Mipmapping im Renderer können beim Skalieren von Textursegmenten manchmal Artefakte auftreten. Das geschieht, wenn du Segmente gegenüber der ursprünglichen Texturgröße verkleinerst. Der Renderer wählt dann für das Segment eine Mipmap mit geringerer Auflösung aus, was zu sichtbaren Artefakten führt.

Um dieses Problem zu vermeiden, stelle sicher, dass die zu skalierenden Segmente der Textur klein genug sind, sodass sie niemals verkleinert, sondern nur vergrößert werden müssen.

Mischmodi

Die Eigenschaft Blend Mode legt fest, wie die Grafik einer Komponente (component) mit der dahinterliegenden Grafik gemischt wird. Dies sind die verfügbaren Mischmodi und ihre Berechnungen:

Alpha

Normale Mischung: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Hellt den Hintergrund mit den Farbwerten der entsprechenden Pixel der Komponente auf: src.rgb + dst.rgb

Multiply

Dunkelt den Hintergrund mit den Werten der entsprechenden Pixel der Komponente ab: src.rgb * dst.rgb

Screen

Gegenteil von Multiply. Erhöht die Helligkeit des Hintergrunds und die Werte der entsprechenden Pixel der Komponente: src.rgb - dst.rgb * dst.rgb

Änderungen zur Laufzeit

Du kannst Sprites zur Laufzeit mit verschiedenen Funktionen und Eigenschaften ändern (Hinweise zur Verwendung findest du in der API-Dokumentation). Funktionen:

• sprite.play_flipbook() - Spielt eine Animation auf einer Sprite-Komponente ab.
• sprite.set_hflip() und sprite.set_vflip() - Legen die horizontale und vertikale Spiegelung der Animation eines Sprites fest.

Ein Sprite hat außerdem verschiedene Eigenschaften, die du mit go.get() und go.set() ändern kannst:

cursor

Die normalisierte Wiedergabeposition der Animation (number).

image

Das Bild des Sprites (hash). Du kannst es mit einer Ressourceneigenschaft für einen Atlas oder eine Kachelquelle und go.set() ändern. Ein Beispiel findest du in der API-Referenz.

material

Das Material des Sprites (hash). Du kannst es mit einer Ressourceneigenschaft für ein Material und go.set() ändern. Ein Beispiel findest du in der API-Referenz.

playback_rate

Die Wiedergabegeschwindigkeit der Animation (number).

scale

Die ungleichmäßige Skalierung des Sprites (vector3).

size

Die Größe des Sprites (vector3). Sie kann nur geändert werden, wenn Size Mode des Sprites auf Manual gesetzt ist.

Materialkonstanten

Das Standardmaterial für sprite hat die folgenden Konstanten, die du mit go.set() oder go.animate() ändern kannst (weitere Details findest du im Handbuch zu Materialien). Beispiele:

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

Die Einfärbung des Sprites (vector4). Der vector4 stellt die Einfärbung dar, wobei x, y, z und w dem Rot-, Grün-, Blau- und Alphaanteil entsprechen.

Materialattribute

Ein Sprite kann Vertex-Attribute des aktuell zugewiesenen Materials überschreiben. Die Komponente übergibt diese Attribute an den Vertex-Shader (weitere Informationen findest du im Handbuch zu Materialien).

Die im Material angegebenen Attribute erscheinen als reguläre Eigenschaften im Inspektor und können für einzelne Sprite-Komponenten festgelegt werden. Wenn eines der Attribute überschrieben wird, erscheint es als überschriebene Eigenschaft und wird in der Sprite-Datei auf dem Datenträger gespeichert:

Projektkonfiguration

Die Datei game.project enthält einige Projekteinstellungen für Sprites.

Sprites mit mehreren Texturen

Wenn ein Sprite mehrere Texturen verwendet, gibt es einige Dinge zu beachten.

Animationen

Die Animationsdaten (Bildrate, Einzelbildnamen) werden derzeit aus der ersten Textur übernommen. Wir nennen diese die „steuernde Animation“.

Die Bild-IDs der steuernden Animation werden verwendet, um die Bilder in einer anderen Textur zu finden. Daher musst du sicherstellen, dass die Einzelbild-IDs zwischen den Texturen übereinstimmen.

Wenn dein diffuse.atlas beispielsweise eine Animation run wie diese enthält:

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

Dann lauten die Einzelbild-IDs etwa run/hero_run_color_1, was beispielsweise in einem normal.atlas wahrscheinlich nicht zu finden ist:

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

Deshalb verwenden wir Rename patterns im Atlas, um sie umzubenennen. Trage in den jeweiligen Atlanten _color= und _normal= ein, und du erhältst in beiden Atlanten Einzelbildnamen wie diese:

run/hero_run_1
run/hero_run_2
...

UV-Koordinaten

Die UV-Koordinaten werden aus der ersten Textur übernommen. Da es nur einen Satz von Vertices gibt, können wir ohnehin keine gute Übereinstimmung garantieren, wenn die weiteren Texturen mehr UV-Koordinaten oder eine andere Form haben.

Das musst du beachten: Stelle sicher, dass die Bilder hinreichend ähnliche Formen haben, da es sonst zum Übergreifen benachbarter Texturpixel (texture bleeding) kommen kann.

Die Abmessungen der Bilder in den einzelnen Texturen können unterschiedlich sein.