Спрайти

Компонент спрайта (Sprite) — це просте зображення або покадрова анімація (flipbook animation), що відображається на екрані.

Компонент спрайта може використовувати атлас або джерело плиток як джерело графіки.

Властивості спрайта

Окрім властивостей Id, Position і Rotation, компонент має такі специфічні властивості:

Image

Якщо шейдер має один семплер, це поле називається Image. Інакше кожен слот має назву відповідного семплера текстури в матеріалі. Кожен слот задає ресурс атласу або джерела плиток, який використовуватиметься для спрайта з цим семплером текстури.

Default Animation

Анімація для спрайта. Інформація про анімацію береться з першого атласу або джерела плиток.

Material

Матеріал для рендерингу спрайта.

Blend Mode

Режим змішування для рендерингу спрайта.

Size Mode

Якщо встановлено Automatic, редактор задасть розмір спрайта. Якщо встановлено Manual, ви можете задати розмір самостійно.

Slice 9

Задайте, щоб під час змінення розміру спрайта зберігався розмір крайових ділянок його текстури в пікселях.

Текстурування Slice-9

Вузли Box у GUI та компоненти Sprite іноді використовують для елементів, розмір яких залежить від контексту: панелей і діалогових вікон, що мають змінювати розмір відповідно до вмісту, або індикаторів здоров’я, які мають змінювати розмір, щоб показувати залишок здоров’я ворога. Накладання текстури на вузол або спрайт зі зміненим розміром може спричинити візуальні проблеми.

Зазвичай рушій масштабує текстуру, щоб вона вписувалася в прямокутні межі, але, визначивши крайові ділянки slice-9, можна обмежити частини текстури, які масштабуватимуться:

Властивість Slice9 вузла Box складається з 4 чисел, що задають у пікселях ліве, верхнє, праве й нижнє поля, які не слід масштабувати звичайним способом:

Поля задаються за годинниковою стрілкою, починаючи з лівого краю:

• Кутові сегменти ніколи не масштабуються.
• Крайові сегменти масштабуються вздовж однієї осі. Лівий і правий крайові сегменти масштабуються по вертикалі. Верхній і нижній крайові сегменти масштабуються по горизонталі.
• Центральна ділянка текстури масштабується по горизонталі й вертикалі за потреби.

Описане вище масштабування текстури Slice9 застосовується лише тоді, коли ви змінюєте розмір вузла Box або спрайта:

Піраміди текстур і slice-9

Через особливості роботи пірамід текстур (mipmaps) у рендерері масштабування сегментів текстури іноді може спричиняти артефакти. Це трапляється, коли ви зменшуєте сегменти відносно початкового розміру текстури. Тоді рендерер вибирає для сегмента рівень піраміди текстур із нижчою роздільністю, що призводить до візуальних артефактів.

Щоб уникнути цієї проблеми, переконайтеся, що сегменти текстури, які масштабуватимуться, достатньо малі: їх має бути потрібно лише збільшувати, а ніколи не зменшувати.

Режими змішування

Властивість Blend Mode визначає, як графіка компонента (component) змішується з графікою позаду нього. Доступні такі режими змішування з відповідними формулами:

Alpha

Звичайне змішування: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Освітлює тло значеннями кольорів відповідних пікселів компонента: src.rgb + dst.rgb

Multiply

Затемнює тло значеннями відповідних пікселів компонента: src.rgb * dst.rgb

Screen

Протилежність Multiply. Освітлює тло та значення відповідних пікселів компонента: src.rgb - dst.rgb * dst.rgb

Керування під час виконання

Ви можете керувати спрайтами під час виконання за допомогою різних функцій і властивостей (про їх використання див. у документації API). Функції:

• sprite.play_flipbook() — відтворює анімацію на компоненті спрайта.
• sprite.set_hflip() і sprite.set_vflip() — задають горизонтальне й вертикальне віддзеркалення анімації спрайта.

Спрайт також має низку властивостей, якими можна керувати за допомогою go.get() і go.set():

cursor

Нормалізований курсор анімації (number).

image

Зображення спрайта (hash). Його можна змінити за допомогою властивості ресурсу атласу або джерела плиток і go.set(). Приклад див. у довіднику API.

material

Матеріал спрайта (hash). Його можна змінити за допомогою властивості ресурсу матеріалу й go.set(). Приклад див. у довіднику API.

playback_rate

Швидкість відтворення анімації (number).

scale

Нерівномірний масштаб спрайта (vector3).

size

Розмір спрайта (vector3). Його можна змінити, лише якщо властивість спрайта Size Mode має значення Manual.

Константи матеріалу

Стандартний матеріал компонента sprite має такі константи, які можна змінювати за допомогою go.set() або go.animate() (докладніше див. у посібнику з матеріалів). Приклади:

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

Колірний відтінок спрайта (vector4). Тип vector4 використовується для подання відтінку, де x, y, z і w відповідають червоній, зеленій, синій та альфа-складовим відтінку.

Атрибути матеріалу

Спрайт може перевизначати атрибути вершин поточного призначеного матеріалу, які передаватимуться з компонента до вершинного шейдера (докладніше див. у посібнику з матеріалів).

Атрибути, задані в матеріалі, відображатимуться як звичайні властивості в інспекторі, і їх можна задавати для окремих компонентів спрайтів. Якщо якийсь атрибут перевизначено, він відображатиметься як перевизначена властивість і зберігатиметься у файлі спрайта на диску:

Налаштування проєкту

У файлі game.project є кілька налаштувань проєкту, пов’язаних зі спрайтами.

Спрайти з кількома текстурами

Коли спрайт використовує кілька текстур, слід враховувати кілька особливостей.

Анімації

Наразі дані анімації (частота кадрів, назви кадрів) беруться з першої текстури. Називатимемо її «керівною анімацією».

Ідентифікатори зображень керівної анімації використовуються для пошуку зображень в іншій текстурі. Тому важливо, щоб ідентифікатори кадрів збігалися в усіх текстурах.

Наприклад, якщо у вашому diffuse.atlas є така анімація run:

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

Тоді ідентифікатори кадрів матимуть вигляд run/hero_run_color_1, і їх навряд чи вдасться знайти, наприклад, у normal.atlas:

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

Тому для їх перейменування використовуємо Rename patterns в атласі. Задайте _color= і _normal= у відповідних атласах, і ви отримаєте такі назви кадрів в обох атласах:

run/hero_run_1
run/hero_run_2
...

UV-координати

UV-координати беруться з першої текстури. Оскільки є лише один набір вершин, ми не можемо гарантувати належний збіг, якщо додаткові текстури мають більше UV-координат або іншу форму.

Це важливо враховувати, тому переконайтеся, що зображення мають достатньо подібну форму, інакше може виникнути просочування сусідніх текстур.

Розміри зображень у кожній текстурі можуть відрізнятися.