Створення цікавих і привабливих анімацій простими функціями Spine (всередині важкі gif)



(Прим. пер.: 1. Spine — це патентований багатоплатформовий пакет для створення двовимірних скелетних анімацій з підтримкою різних ігрових тулкитов.
2. Обережно, в пості є близько 38 МБ gif'ок, всі вони заховані під кат.)


Як створити плавне перемикання або поворот спрайтів?
Створення плавного і природного перемикання і поворот спрайтів при роботі з Spine або будь-яким іншим інструментом інтерполяції анімації часто буває важким завданням. Воно може розвалити порядок анімації і зробити остаточний результат дергающимся або незграбним.

Я зазвичай використовую наступний підхід: маскирую момент повороту або перемикання з допомогою деформацій, наприклад, додаю ефект пружності до анімації протягом ключових кадрів (збільшуючи і зменшуючи масштаб спрайту), коли виконується поворот ассета або перемикається спрайт.

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

1. Два спрайтовых зображення: з закритим і відкритим ротом. Це ключові фази (key poses) анімації.



2. Просте перемикання: спочатку я намагався використовувати спосіб простіший: перемикав спрайт і додавав ефект наскрізного руху (follow-through), але результат виходив трохи різким, і виглядав непов'язаним з усієї анімацією, незважаючи на реакцію очей і волосся на загальний рух.

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

Прихований текст
3. Результат: у картинці нижче я додав трохи ефекту пружності між спрайтами, щоб вони виглядали більш гнучкими і природними.

Прихований текст
1. Горизонтальне розтягнення. 2. Вертикальне розтягування. 3. Перемикання спрайту.


4. Простий поворот: при повороті персонажа легко загубити повторювану плавність і привабливість анімацій персонажа. У прикладі нижче поворот виконується різким чином і без всяких переходів. При цьому втрачається індивідуальність персонажа і його комічний вигляд.

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

Прихований текст
6. Змазування: ще один хороший рада — симулювати ефект змазування (smear) Spine. При цьому не потрібно створення нового спрайту.

Мій персонаж повинен повернути голову і віддати наказ своїй команді, але для нього може використовуватися кілька скінів інших персонажів для повторного використання скелета і кісток. Гравець може створювати будь-які потрібні йому комбінації (варіації шоломів, кольору шкіри, екіпірування тощо). Якби я почав створювати всі можливі комбінації голів для генерації змащування, я б витратив купу часу і створив безліч необов'язкових зображень.

Тому я вирішив виконувати змазування Spine, деформуючи основну кістка голови при повороті і додаванні додаткових деталей, наприклад наскрізного руху шолома і носа.

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



Згинайте все, що можна!
Є два аспекти, яких я завжди дотримуюся для того, щоб створити певний стиль і зробити об'єкти забавними: це перебільшення і деформація. Часто для демонстрації індивідуальності персонажа, візуального впливу і зацікавленості гравця необхідно максимально перебільшувати руху.

Іноді при перебільшенні створюються досить дивні ключові кадри (keyframes), але вони забезпечують виразність анімацій. Нижче наведені приклади остаточних анімацій. З-за використання цих аспектів вони виглядають дуже динамічними.

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

Прихований текст
8. Подивіться на ці дивні, але дивовижні ключові кадри!



Додайте руху!
Намагайтеся пом'якшувати лінійний ефект анімації для поліпшення остаточного результату і «пожвавлення» об'єктів.

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

9. Намагайтеся вдихнути життя в кожен елемент персонажа. Додавайте захльост (overlapping) і наскрізне рух.

Один з основних елементів мого персонажа — це шолом, тому я хотів, щоб він виглядав незалежним елементом анімації.

  • У першому прикладі я прагнув, щоб він рухався разом з рухом голови (вперед і назад), але все одно мав трохи наскрізного руху.
  • У другому прикладі шолом слідує за рухами голови (вгору і вниз), але все одно має незалежний поворот.
  • У третьому прикладі (моєму улюбленому) шолом має повне і незалежне рух. Голова рухається вперед і назад, але шолом рухається з невеликою зустрічним рухом у напрямку проти основного руху. Схоже, що він бовтається на голові солдата.
  • є вторинне дію рук, що тримають зброю: незважаючи на загальний рух бігу, рух зброї трохи повільніше.
Прихований текст
10. Ще один аспект, якого я завжди намагаюся досягти — як можна більш нелінійний зовнішній вигляд об'єктів. При створенні персонажа я люблю думати про його рух, поведінці, вазі, індивідуальності і т. д. Це допомагає мені планувати експорт і створювати його скелет з правильною ієрархією шарнірів і кісток.

Наведений нижче персонаж досить простий. Його можна вважати простою фігурою з однією-двома кістками. Всі його частини рухаються разом, а анімація створюється близько години. Але це досить важливий персонаж, головна зірка «гри», і я хотів зробити його настільки цікавим, щоб діти захотіли взяти його додому.

У нас є три приклади анімації очікування:

  • Проста анімація руху з декількома кістками. Нічого особливого, виглядає як звичайне очікування з диханням.

    Прихований текст
  • Потім я спробував зробити її більш живою і ефектною.

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

Ніс розділений на два зображення: nose_back і nose_front.



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

Прихований текст
Ще один приклад звичайного і живого руху в анімації стрибка цього персонажа.

Прихований текст
Зліва — звичайний стрибок, просто переміщення і деформація головною кістки персонажа. Ця анімація не дуже приваблива, все виглядає дуже різким і плоским.

Права покращена анімація додаванням безлічі деталей: обличчя персонажа рухається в уповільненому русі разом з основним рухом, створюючи відчуття повороту при стрибку вгору-вниз. Застосовані перехльости і ефект змазування носа при стрибку вгору-вниз і загальна наскрізна реакція при ударі персонажа про землю, що додає йому ваги і позначає його вплив на землю.

Прихований текст
Цьому персонажу потрібна була спеціальна функція «нескінченного» розтягування його тіла вгору, але ігровий движок не підтримує сітки (meshes), і мені потрібен спосіб здійснити її. Персонаж був розділений на три частини: верхню, середню і нижню. Нижня частина фіксована, середня абсолютно розтягується, а верхня частина містить загальні елементи особи.

Прихований текст
Спасибі за прочитання статті. Сподіваюся, вона вам сподобалася! Пишіть, якщо у вас виникнуть питання або ви просто захочете поспілкуватися про 2D-анімація і Spine.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.