Реалізація анімації спрайтових аркушів

Сторінка оновлюється :
Дата створення сторінки :

Середовище верифікації

Вікна
  • Вікна 11
Редактор Unity
  • 2020.3.25f1
Вхідні системні пакети
  • 1.2.0

Передумови для цієї поради

Наведені нижче параметри попередньо налаштовані як обов'язкова умова для пояснення цих порад.

Що таке анімація спрайтових аркушів?

У сучасних іграх персонажі та ефекти анімуються за допомогою переміщення 3D-моделей, обчислення вибухів у реальному часі та відображення ефектів. Це стало можливим завдяки тому, що обчислювальна потужність ігрових консолей зросла, але оскільки старі ігрові консолі не мали такої потужності, анімація спрайтових аркушів, яка постійно перемикала зображення, щоб здавалося, ніби воно рухається, була мейнстрімом. Принцип такий самий, як і в аніме, що грають по телевізору. Анімація спрайтових аркушів використовується меншою кількістю ігор, ніж у минулому, але вони все ще часто використовуються, оскільки навантаження, необхідне для обчислень, набагато нижче.

Анімація аркуша спрайту перемикає та відображає кілька зображень поспіль. Рідко вдається підготувати стільки файлів зображень, скільки є, і в основному всі шаблони відображення включаються в одне зображення. Це полегшує керування файлами зображень і зменшує навантаження на завантаження файлів зображень. Файл зображення, який узагальнює цю анімацію, називається «аркушем спрайтів».

Створення таблиці спрайтів

Спрайт-лист - це, по суті, просто файл зображення. Оскільки він не має нічого спільного з Unity, будь ласка, створіть його за допомогою інструменту редагування зображень. Остаточним форматом файлу буде файл PNG, з яким може працювати Unity.

Крім того, існують наступні правила створення спрайт-листів.

  • Уніфікуйте розмір зображення для всіх кадрів. Наприклад, якщо перше зображення має розмір 32x32 пікселів, друге та наступні зображення матимуть розмір 32x32 пікселів. Наприклад, якщо підготувати спрайт-лист формату «3х2» з 6 кадрами, то розмір спрайт-листа складе 96х64 пікселів.
  • Ви можете вільно вирівняти зображення, наприклад «6x4» або «2x8», але обов'язково створюйте його, виходячи з припущення, що всі кадри будуть заповнені. Якщо це "6х4", то це 24 кадри і так далі. Якщо це 13-кадрова анімація, підготуйте її за допомогою «1x13» або «13x1».
  • Оскільки це анімація, вона правильно вирівняна, щоб не було зміщень у кадрах до і після.
  • Напрямок анімації починається з верхньої лівої комірки і йде вправо, а при переході в крайню праву сторону починається зліва на одну сходинку вниз і знову йде вправо.

Насправді, вам не обов'язково робити вищеописане строго в Unity, але набагато простіше визначитися зі специфікаціями заздалегідь.

Цього разу я буду використовувати спрайт-лист, щоб поміняти місцями наступні числа. Один квадрат має розмір 32х32 пікселів. Він складається з 24 кадрів "6х4", тому розмір зображення становить 192х128 пікселів.

Налаштування таблиці спрайтів у редакторі Unity

Після того, як ви створили свій проект, додайте файл спрайт-аркуша до нього. Тут передбачається, що ім'я файла дорівнює NumberAnimation .

NumberAnimation Вибираємо файл і заповнюємо інспектор наступним чином:

Значення елемента
Тип текстури Спрайти (2D та UI)
Режим спрайту множина

Є багато інших параметрів, які можна налаштувати, але залишимо поки що все як є. Після налаштування натисніть кнопку «Редактор спрайтів».

Якщо з'явиться діалогове вікно нижче, натисніть кнопку «Застосувати». По суті, налаштування цього інспектора потрібно зберегти, а якщо прокрутити донизу, то є кнопка «Застосувати», тому потрібно зберегти налаштування за допомогою цієї кнопки. Він також буде збережений за допомогою кнопки «Застосувати» у діалоговому вікні, тому не має значення, яким способом ви його збережете.

З'явиться редактор спрайтів. У цьому розділі ми попрацюємо над відокремленням спрайту від аркуша спрайту.

У лівому верхньому кутку є кнопка під назвою «Зріз», натискаємо на неї і міняємо тип на «Сітка за розміром комірки». На цьому аркуші спрайтів один розмір спрайту становить «32x32» пікселів, тому введіть 32 для кожного розміру пікселя. Коли все буде готово, натисніть кнопку «Фрагмент».

Це зображення складне для розуміння, тому що воно начебто чітко розділене з самого початку, але воно розділене на 1 спрайт 32px. Натисніть клавішу «Ctrl» і лінія розділення з'явиться зеленим кольором.

Після розбиття збережіть його кнопкою «Застосувати».

Якщо натиснути на трикутник у файлі зображення проєкту, щоб розгорнути його, то можна побачити, що спрайт розділено.

Розміщення спрайтів та анімація

Перетягніть спрайт набору в область перегляду і розмістіть його.

Після цього з'явиться діалогове вікно, отже збережіть NumberAnimation його як . Цей файл містить налаштування анімації.

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

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

Запобігання зацикленню анімації

Виберіть файл анімаційного кліпу (NumberAnimation.anim) з вашого проекту.

В інспекторі є прапорець "Час циклу", тому зніміть з нього галочку.

Якщо ви запустите гру, то побачите, що анімація зупиняється на 24. Він ефективний при одноразових ефектах вибуху.

Зміна швидкості анімації

Виберіть спрайт, який ви хочете анімувати, з ієрархії.

Потім виберіть вкладку «Анімація». Якщо у вас немає вкладки Анімація, виберіть у меню Вікно > Анімація > Анімація.

Існує число, яке називається «вибірка», яке є кількістю разів для перемикання зображень за одну секунду. У цьому зразку анімація становить 24 кадри, тому анімація повторюється кожні 2 секунди.

Якщо зменшити це число, швидкість анімації буде повільнішою, а якщо збільшити, то швидкість збільшиться.

Про інші розширені налаштування анімації

Різні параметри анімації пояснюються окремо у підказках щодо анімації. Ці налаштування не є ексклюзивними для спрайт-анімацій, але не є винятковими для Це те ж саме, що і налаштування інших анімацій руху та 3D-анімації.

У цій підказці ми пояснимо, як перейти від спрайт-листа як анімації.