Sprite’y

Komponent Sprite to prosty obraz albo animacja poklatkowa (flipbook) wyświetlana na ekranie.

Komponent Sprite może jako źródło grafiki używać Atlas albo Tile Source.

Właściwości Sprite

Poza właściwościami Id, Position i Rotation komponent ma następujące właściwości specyficzne dla Sprite:

Image

Jeśli shader ma pojedynczy sampler, to pole nazywa się Image. W przeciwnym razie każde pole nosi nazwę zgodną z samplerem tekstury w materiale. Każde pole wskazuje zasób Atlas albo Tile Source używany przez sprite na danym samplerze tekstury.

Default Animation

Animacja używana przez sprite. Informacje o animacji są pobierane z pierwszego atlasu albo Tile Source.

Material

Materiał używany do renderowania sprite’a.

Blend Mode

Tryb mieszania używany podczas renderowania sprite’a.

Size Mode

Jeśli ustawisz Automatic, edytor sam ustawi rozmiar sprite’a. Jeśli ustawisz Manual, możesz ustawić rozmiar ręcznie.

Slice 9

Ustaw tę opcję, aby zachować rozmiar pikseli tekstury przy krawędziach sprite’a podczas zmiany jego rozmiaru.

Teksturowanie Slice-9

Węzły box GUI i komponenty Sprite czasami zawierają elementy zależne od kontekstu ich rozmiaru: panele i okna dialogowe, które trzeba przeskalować, aby dopasować je do zawartości, albo pasek życia, który trzeba przeskalować, aby pokazać pozostałą wartość zdrowia przeciwnika. Takie elementy mogą powodować problemy wizualne, gdy zastosujesz teksturowanie do przeskalowanego węzła lub komponentu Sprite.

Zwykle silnik skaluje teksturę tak, aby pasowała do prostokątnych granic, ale zdefiniowanie obszarów krawędzi Slice-9 pozwala ograniczyć, które części tekstury mają być skalowane:

Węzeł box Slice9 składa się z 4 liczb określających liczbę pikseli dla lewego, górnego, prawego i dolnego marginesu, które nie powinny być zwykle skalowane:

Marginesy ustawia się zgodnie z ruchem wskazówek zegara, zaczynając od lewej krawędzi:

• Segmenty narożne nigdy nie są skalowane.
• Segmenty krawędzi są skalowane tylko wzdłuż jednej osi. Lewy i prawy segment krawędzi są skalowane pionowo. Górny i dolny segment krawędzi są skalowane poziomo.
• Centralny obszar tekstury jest skalowany w poziomie i pionie w razie potrzeby.

Opisane powyżej skalowanie tekstury Slice9 jest stosowane tylko wtedy, gdy zmieniasz rozmiar węzła box albo komponentu Sprite:

Mipmapy i Slice-9

Ze względu na sposób działania mipmapowania w rendererze skalowanie fragmentów tekstury może czasem powodować artefakty. Dzieje się tak, gdy zmniejszasz fragmenty poniżej oryginalnego rozmiaru tekstury. Renderer wybiera wtedy dla segmentu mipmapę o niższej rozdzielczości, co skutkuje artefaktami wizualnymi.

Aby uniknąć tego problemu, upewnij się, że segmenty tekstury, które będą skalowane, są na tyle małe, by nigdy nie były zmniejszane, a jedynie powiększane.

Tryby mieszania

Właściwość Blend Mode określa, w jaki sposób grafika komponentu ma być mieszana z grafiką znajdującą się za nią. Poniżej przedstawiono dostępne tryby mieszania i sposób ich obliczania:

Alpha

Normalne blendowanie: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Rozjaśnia tło wartościami kolorów odpowiednich pikseli komponentu: src.rgb + dst.rgb

Multiply

Przyciemnia tło wartościami kolorów odpowiednich pikseli komponentu: src.rgb * dst.rgb

Screen

Odwrotność Multiply. Rozjaśnia tło i wartości kolorów odpowiednich pikseli komponentu: src.rgb - dst.rgb * dst.rgb

Manipulacja w czasie działania

Sprite’y można modyfikować w czasie działania za pomocą różnych funkcji i właściwości. Sposób użycia znajdziesz w dokumentacji API. Funkcje:

• sprite.play_flipbook() - Odtwarza animację na komponencie Sprite.
• sprite.set_hflip() i sprite.set_vflip() - Ustawiają poziome i pionowe odbicie animacji sprite’a.

Sprite ma też kilka właściwości, którymi można manipulować przy użyciu go.get() i go.set():

cursor

Znormalizowany kursor animacji (number).

image

Obraz sprite’a (hash). Możesz go zmienić za pomocą właściwości zasobu wskazującej Atlas albo Tile Source i funkcji go.set(). Przykład znajdziesz w referencji API.

material

Materiał sprite’a (hash). Możesz go zmienić za pomocą właściwości zasobu materiału i funkcji go.set(). Przykład znajdziesz w referencji API.

playback_rate

Tempo odtwarzania animacji (number).

scale

Niejednorodna skala sprite’a (vector3).

size

Rozmiar sprite’a (vector3). Można go zmienić tylko wtedy, gdy tryb rozmiaru sprite’a jest ustawiony na ręczny.

Stałe materiału

Domyślny materiał komponentu typu sprite posiada stałe, które można zmienić za pomocą funckji go.set() lub go.animate() (więcej szczegółów znajdziesz w instrukcji do materiałów). Przykłady:

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

Odcień koloru sprite’a (vector4). vector4 reprezentuje zabarwienie, a składowe x, y, z i w odpowiadają kolejno czerwieni, zieleni, niebieskiemu i alfie.

Atrybuty materiału

Sprite może nadpisywać atrybuty wierzchołków z aktualnie przypisanego materiału. Zostaną one przekazane z komponentu do vertex shadera. Więcej informacji znajdziesz w instrukcji do materiałów.

Atrybuty określone w materiale pojawią się w inspectorze jako zwykłe właściwości i można je ustawiać osobno dla każdego komponentu Sprite. Jeśli którykolwiek atrybut zostanie nadpisany, będzie widoczny jako nadpisana właściwość i zostanie zapisany w pliku sprite’a na dysku:

Konfiguracja projektu

Plik game.project zawiera kilka ustawień projektu związanych ze sprite’ami.

Sprite’y z wieloma teksturami

Gdy sprite korzysta z wielu tekstur, warto pamiętać o kilku rzeczach.

Animacje

Dane animacji, takie jak fps i nazwy klatek, są obecnie pobierane z pierwszej tekstury. Nazwijmy ją „animacją sterującą”.

Id obrazów z animacji sterującej są używane do wyszukiwania obrazów w kolejnej teksturze. Dlatego ważne jest, aby id klatek były zgodne pomiędzy teksturami.

Na przykład, jeśli diffuse.atlas ma animację run w takiej postaci:

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

to id klatek będą wyglądały tak: run/hero_run_color_1. Taki identyfikator prawdopodobnie nie zostanie znaleziony na przykład w normal.atlas:

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

Dlatego używamy Rename patterns w atlasie, aby zmienić te nazwy. Ustaw _color= i _normal= w odpowiednich atlasach, a w obu otrzymasz nazwy klatek w takiej postaci:

run/hero_run_1
run/hero_run_2
...

UV

Współrzędne UV są pobierane z pierwszej tekstury. Ponieważ istnieje tylko jeden zestaw wierzchołków, nie da się zagwarantować dobrego dopasowania, jeśli dodatkowe tekstury mają więcej współrzędnych UV albo inny kształt.

Warto o tym pamiętać i zadbać, aby obrazy miały wystarczająco podobne kształty, bo w przeciwnym razie może pojawić się przeciekanie tekstur.

Wymiary obrazów w poszczególnych teksturach mogą się różnić.