Spine – це набагато більше, ніж звичайна двомірна анімація. Демонстрації нижче показують, як дизайнери, аніматори та програмісти можуть використовувати широкі можливості і вдосконалені робочі процеси Spine для створення приголомшливих ігор.
Всі демоверсії нижче – інтерактивні та використовують наше середовище виконання spine-ts для WebGL. Дізнайтеся, як ми використовуємо середовища виконання Spine, розглянувши вихідний код кожної демонстрації.
Звичайна анімація Sprite передбачає окреме зображення для кожного кадру анімації, через що виникають величезні аркуші Sprite. Кожна додаткова анімація значно збільшує дисковий простір, зайнятий грою, і підвищує вимоги до пам'яті, зокрема через високу частоту кадрів, необхідну для плавного відтворення. Через це у дизайнерів швидко виникає величезний обсяг роботи. Також страждає якість кінцевого продукту, оскільки доводиться скорочувати обсяг анімацій, щоб дотриматися обмежень розміру.
У Spine зберігаються тільки дані кісток, дані анімації та один набір окремих зображень, що використовуються повторно. Це дає змогу оживити ігри, наповнивши їх безліччю унікальних рухомих зображень. Крім того, анімація Spine інтерполюється, завдяки чому відтворення має ідеально гладкий вигляд незалежно від частоти кадрів.
Порівняйте вимоги до пам'яті та дискового простору Spine і аркуша Sprite.
Хоча в цілому Spine позбавляє необхідності в традиційній покадровій анімації, зображення все одно можна змінювати, якщо є така необхідність – наприклад, змінювати ракурс тулуба або крила, що махає, міміку обличчя або блиск пострілу.
Ячейки, нарощення і порядок малювання, передбачені в Spine, дають змогу легко інтегрувати покадрову анімацію в решту повністю динамічних зображень. Крім того, Spine дає змогу маніпулювати покадровими зображеннями, як видно на цій демонстрації, де змінюється розмір голови прибульця, що вибухає.
У 2D-іграх часто відчувається відсутність плавних переходів між кадрами зображень. У 3D-іграх ці переходи обчислюються під час виконання. Анімацію можна навіть змішувати, наприклад, ходьбу і біг. Якщо не використовувати Spine, у двомірній анімації змішання неможливе, а переходи, як правило, виходять «смиканими». Дизайнер може вручну створити кадри для всіх можливих переходів, але навіть це не допомагає, якщо анімація переривається під час відтворення.
Spine привносить переваги 3D у двомірну анімацію. Зображення в середовищі виконання Spine плавно і динамічно переходять від одного кадру до іншого, що надає персонажам вигляд природного руху. Накладення дає змогу одним зображенням відображатися поверх інших, наприклад, показувати постріл, поки персонаж біжить, або змушувати персонаж все більше кульгати, коли він зазнає поранень.
Персонаж, створений у Spine із жорстких двовимірних зображень, уже дає чудові результати, як видно на прикладі хлопчиська вище. Однак, щоб надати вашим героям ще більш природного вигляду, Spine пропонує додаткові можливості зі світу 3D-анімації – сітки та ваги. Завдяки сіткам, зображення набувають гнучкості та можуть деформуватися так, як вам потрібно. Ваги прив'язують сітки до кісток так, що, залежно від руху кісток, зображення автоматично деформуються.
Сітки також іноді збільшують швидкість роботи гри, оскільки відпадає необхідність малювати прозорі частини зображень і, як наслідок, використовувати заповнення. Це особливо важливо для мобільних пристроїв.
Дивовижна графіка для цієї демонстрації люб'язно надана Хвадоком (Hwadock, інший псевдонім — dugy). Читайте його на Twitter і підписуйтеся на його блог.
Функція оболонок Spine чудово підходить для того, щоб змінювати окремі деталі персонажів або урізноманітнити героїв, зводячи при цьому до мінімуму робоче навантаження. Завдяки оболонкам, анімацію потрібно робити лише один раз. Після цього можна надавати скелету різний зовнішній вигляд, повторно використовуючи вже готові напрацювання. Програма Spine універсальна, оскільки середовища виконання дають змогу поєднувати частини різних оболонок, охоплюючи в такий спосіб усі потреби індивідуального налаштування.
Оболонки дають змогу гравцям привнести щось своє у світ гри: вони можуть надати аватарам неповторного вигляду, поміняти їхній одяг, зброю та інші приналежності. Оболонки також розширюють можливості використання анімації: можна змішувати і підбирати графіку для злодіїв, предметів та інших об'єктів гри, збільшуючи різноманітність без особливих зусиль.
Графіку з цієї демонстрації можна знайти в пакеті персонажів 2D-анімації для Unity.
Оскільки Spine підтримує інверсну кінематику, рухи мають реалістичний динамічний вигляд. Крім того, стає можливим просунуте оснащення (rigging), коли складні пози легко контролюються невеликою кількістю кісток.
Оскільки в Spine не використовується запікання і плотинг, ІК проявляє свої переваги з усією силою. За динамічного позиціонування кісток у середовищі виконання, обмежувачі ІК дають змогу герою легко реагувати на навколишнє середовище, наприклад, цілитися у ворогів, змінювати положення ніг під час подолання нерівностей місцевості та робити багато іншого. У цій демонстрації хлопчисько балансує на контрольованому користувачем ховерборді і одночасно відтворюється анімація.
Спробуйте самі! Потягніть червоні крапки, щоб надати хлопчику бажаної динамічної пози. Кнопки «Стріляти» і «Підстрибнути», а також приціл накладаються поверх нерухомого зображення.
При відтворенні анімації на окремих доріжках зазвичай позиція нижніх доріжок перевизначається вищими доріжками. У випадку адитивної доріжки її поза додається до результату нижніх доріжок. Це дає змогу змішувати пози з кількох незалежних анімацій з різними значеннями, як-от різними виразами обличчя, наприклад, 50% — щасливе, 20% — зле і 30% —схвильоване.
Сова в цій демонстрації має 4 анімації, по одній для кожного напрямку. Окремі пози кожної з анімацій накладаються одна на одну залежно від положення курсору миші відносно центру полотна.
Часто певна частина персонажа рухається по замкнутій або незамкнутій траєкторії. Замість того щоб вручну вводити ключі для руху, можна використовувати передбачені в Spine обмежувачі, щоб кістки автоматично рухалися за потрібною траєкторією. Складова траєкторія Безьє містить низку взаємопов'язаних точок, які дають змогу згинати траєкторію і надавати їй необхідної форми. Траєкторія сама по собі може анімуватися і навіть бути прив'язана вагами до кісток, щоб вона автоматично деформувалася в міру руху кісток.
На цій демонстрації лозоподібна сітка прив'язана до кісток, які обмежені траєкторією. Що більше вершин у сітці, то плавніше вона згинається.
Обмежувачі траєкторії також можна дуже ефектно використовувати в середовищі виконання. Потягніть червоні контрольні точки і ви побачите, як слухняно буде рости лоза за новою траєкторією, що динамічно змінюється!
Обмежувачі траєкторії роблять можливим потужне оснащення, що наочно видно на прикладі гутаперчового чоловічка у цій демонстрації. Сітки рук і ніг прив'язані до багатьох дрібних кісток, які обмежені так, що переміщаються за простими траєкторіями кінцівок. Потім траєкторії вагами прив'язуються до кісток, які можна пересувати для маніпуляції кінцівками. Так безліч кісток можна контролювати за допомогою лише кількох. Це не тільки полегшує анімацію. У середовищі виконання потрібно відкоригувати лише кілька кісток для надання динамічної пози.
Пересувайте червоні контрольні точки так, щоб чоловічок затанцював!
Іноді частину анімації потрібно приховати, як у цьому прикладі, де хлопчисько з'являється з порталу. Відсікання, що досягається за допомогою обмеження візуалізації полігональною областю, дуже зручне в подібних випадках. Відображаються тільки ті частини скелета, які перебувають у заздалегідь заданій області анімації. Завдяки цьому стають можливими багато ефектів, як-от вікна, ефекти освітлення та багато іншого. Крім того, відсікання може застосовуватися для приховування тільки деяких частин скелета. Прикладом такої анімації може слугувати кадр, коли герой проходить через рентген-машину.
Анімація складних скелетів із безліччю взаємозалежних деталей може бути виснажливим завданням. Обмежувачі трансформи, передбачені в Spine, позбавляють таких труднощів, роблячи доступним більш ефективне оснащення. Після обмеження трансформи однієї кістки трансформою іншої, залишається тільки анімувати одну кістку, оскільки решта скоригуються автоматично. Хоча на перший погляд це здається дуже простим прийомом, розширене оснащення виявляється дуже корисним для автоматизації поведінки скелета під час надання йому певної пози.
Обмежувачі трансформи також чудово підходять для механічного обладнання, такого як танк на цій демонстрації. Замість того щоб вводити ключі для кожного окремого колеса, анімується одне колесо, тоді як рух інших обмежується трансформою. Зсув і змішування можуть надати «індивідуальності» обмеженим частинам.
Гусениці танка рухаються по колу за допомогою обмежувача траєкторії. Гусениці неможливо було би анімувати без траєкторій. Траєкторія прив'язана вагами до двох коліс, щоб вона автоматично згиналася відповідно до руху коліс вгору-вниз.
На цій демонстрації обертання двох менших коліс обмежене обертанням великого колеса. Крім того, перетворення великого колеса обмежене, тому воно зберігає своє положення між двома меншими колесами.
