Імпорт Spine 2D анімації в Unity 3D і прив'язка ефектів до кісток з використанням 2D Toolkit

Імпорт Spine 2D анімації в Unity 3D і прив'язка ефектів до кісток з використанням 2D Toolkit

Тут буде описано, як можна спростити імпорт Spine анімації в Unity проект, і що потрібно зробити для прив'язки довільного об'єкта (візуальний ефект, колайдер тощо) до самої анімації або окремих її кісток.

Розглянемо на прикладі доступної в Unity редактора системи частинок.

Наприкінці статті додаються готова анімація та тестовий проект, результат в якому виглядатиме приблизно так:

Отже, що знадобиться для реалізації задуманого:

  1. Безкоштовна версія редактора Unity (v 4.5.3f3 на момент написання статті).
  2. 2D Toolkit (v 2.4.0 на момент написання статті).
  3. Редактор Spine анімацій.
  4. Csharp бібліотека, яку можна завантажити тут (але в доданому проекті вона вже є).

Імпорт анімації з редактора Spine, вручну, описаний в нескладній відео інструкції, однак у випадку, коли над проектом працюють кілька людей, це може викликати деякі труднощі. Тому було написано вікно для імпорту, в яке достатньо перетягнути теку експорту анімації з редактора Spine і натиснути «OK».

Сам процес створення анімації тут описуватися не буде, на сайті розробника є відмінна документація з цього приводу.

Почнемо з експорту

Кожен Spine проект, це власне тека з використовуваними зображеннями і файл з налаштуваннями проекту (* .spine файл). Нам крім цього знадобиться ще JSON файл, що генерується редактором при експорті. Параметри експорту показано на малюнку нижче. Важливо тут не забути вказати, що нам НЕ потрібен атлас при експорті (поле «Create atlas»). Далі як шлях вказуємо «[шлях до теки Spine проекту ]/Export», і тиснемо кнопку експорту.

У результаті маємо теку проекту Spine з тим, що там вже було, плюс необхідний JSON файл. Готова тека експорту з вихідцем є в архіві "necr_2.zip", який можна знайти в кінці цієї статті.

Якщо вихідець анімації з якоїсь причини не бажано передавати разом з папкою, то це не принципово, файл «* .spine» для імпорту не потрібен.

Тепер створюємо новий 2D проект в Unity, імпортуємо в нього пакет "2D Toolkit" і вміст файлу "spine_test.unitypackage", який теж можна завантажити в кінці даної статті.

У проекті можна відкрити і запустити вже готову сцену, вона лежить в папці «ExampleEffects». У цій сцені перед камерою літає анімований привид з прикріпленим до однієї з кісток рук ефектом, якщо його можна так назвати.

Але повернемося до імпорту анімації.

Щоб відкрити вікно імпорту в нашому проекті Unity, потрібно у верхньому меню знайти пункт «Window» і в спадному списку вибрати «Spine Import Window», як показано на малюнку нижче.

У підсумку побачимо подібне вікно:

Тепер нам знадобиться файл "necr_2.zip", він містить експорт анімації з проекту Spine. Розархівуйте його і перетягніть отриману теку у велике поле "> > Drag the folder export character here. < <" ". У підсумку бачимо згенерований атлас і пару налаштувань, як на малюнку нижче.

У полі «Pack method» вибираємо найбільш оптимальний варіант, тобто той при якому значення «Atlas size» менше. Поле «Padding» визначає проміжок між текстурами в атласі, при значенні 1 артефактів не виникало. «Max atlas size» існує тільки для зневадження, там завжди потрібно максимальне значення. А «Max texture size» визначає якість текстури в Unity, рекомендується так само максимальне значення.

Має значення і верхнє поле «Set person name». Оскільки всі імпортовані анімації будуть зберігатися в одному місці, ім'я повинно бути унікальним, в іншому випадку вікно покаже попередження внизу замість кнопки «OK». Натисканням цієї кнопки імпорт анімації і завершується.

До речі, для створення атласу використовувався скрипт MaxRec^ BinPack, з невеликою надбудовою.

У процесі створення і лінкування необхідних префабів, в консолі Unity може з'явиться кілька повідомлень про помилку, але вони ніяк не впливають на остаточний результат. А в результаті у нас є тека з вказаним при імпорті ім'ям, що містить ресурси і префаб з назвою «animation».

Витягуємо його на сцену, натискаємо «Play» і спостерігаємо анімованого привида. Правда, щоб анімація включалася автоматично, не забудьте у показаному на картинці нижче компоненті виставити схожі налаштування («Time Scale» зменшено для наочності).

Залишається прив'язка об'єктів до кісток

Для тесту можна скористатися префабами «fx1_pref» і «fx2_pref» з папки «ExampleEffects». Знаходимо в інспекторі об'єкта компонент «Spine Person» і виставляємо налаштування, як показано на малюнку нижче.

У полі «Prefab» вибирається об'єкт типу «GameObject», тобто практично будь-який ігровий об'єкт, у нашому випадку це контейнер, що містить Particle system.

Але головне поле тут, це «animation». Варіант «simple» означає звичайний вбудований об'єкт, не прив'язаний не до якої кістки. Вибравши «withbone», можна вибрати кістку зі списку, до якої буде прив'язаний об'єкт. У випадку з примарою назви кісток вельми не оригінальні, тому можна поекспериментувати.

Поле «Free Z pos» з'явилося внаслідок того, що в якості деяких ефектів використовувався двовимірний аналог освітлення, який завжди повинен був знаходитися між інтерфейсом і ігровим полем. Отже, якщо зняти цю галочку, z координата ефекту завжди дорівнює параметру fixed_z (який з'явиться в інспекторі).

Використовуючи поля «Pivot», «Rotation», «Scale» можна налаштувати положення, розворот і розмір ефекту відносно кістки (в нашому випадку масштабування значення не має).

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

Що з усього цього може вийти демонструє дане відео.

Релізний ролик проекту

У скрипті SpinePerson.cs є ще пара функцій, які можливо будуть корисні комусь:

SpinePerson.setSpineImageActive

SpinePerson.replaceSpineImage

За допомогою цих функцій можна приховати або показати або замінити конкретну текстуру в анімації.

Всі скрипти знаходяться в теці «SpceImport/scripts», при бажанні їх не складно змінити під потреби конкретного проекту.

Нижче доданий проект Unity і архів з анімацією:

— spine_test.unitypackage [updated, fix scale factor and rotate];

— necr_2.zip.