Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

2D скелети

Вступ

When working with 3D, skeletal deforms are common for characters and creatures and most 3D modeling applications support it. For 2D, as this function is not used as often, it's difficult to find mainstream software aimed for this.

Одним з варіантів є створення анімації в сторонньому програмному забезпеченні, такому як Spine, або Dragonbones. Однак, починаючи з Godot 3.1, ця функціональність є вбудованою.

Чому варто робити скелетну анімацію безпосередньо в Godot? Відповідь полягає в тому, що в цьому є багато переваг:

  • Краща інтеграція з рушієм, тому менше клопоту з імпортом і редагуванням.

  • Здатність керувати системами частинок, шейдерами, звуками, викликами скриптів, кольорами, прозорістю тощо в анімації.

  • Вбудована скелетна система в Godot дуже ефективна і розроблена для продуктивності.

Тому, наступний урок дасть основи деформації 2D скелета.

Налаштування

Дивись також

Перед початком ми рекомендуємо вам переглянути урок Анімація вирізок, щоб отримати загальні уявлення про анімацію в Godot.

Для цього уроку ми будемо використовувати одне зображення для побудови нашого персонажа. Завантажте його з gBot_pieces.png, або збережіть зображення нижче.

../../_images/gBot_pieces.png

Також рекомендується завантажити остаточне зображення персонажа gBot_complete.png, щоб мати зразок для наслідування при складанні різних частин разом.

../../_images/gBot_complete.png

Створення полігонів

Create a new scene for your model (if it's going to be an animated character, you may want to use a CharacterBody2D). For ease of use, an empty 2D node is created as a root for the polygons.

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

../../_images/skel2d1.png

Виділіть його та призначте текстуру частин персонажа, яку ви завантажили раніше:

../../_images/skel2d2.png

Малювати полігон безпосередньо не рекомендується. Замість цього відкрийте діалогове вікно UV для полігона:

../../_images/skel2d3.png

Перейдіть до режиму Точки, виберіть олівець і намалюйте багатокутник навколо потрібної частини:

../../_images/skel2d4.png

Дублюйте вузол полігона і дайте йому власне ім'я. Потім знову відкрийте вікно UV і замініть старий багатокутник на інший обвівши новий потрібний фрагмент.

Коли ви дублюєте вузли і наступна частина має схожу форму, ви можете редагувати попередній полігон замість того, щоб малювати новий.

After moving the polygon, remember to update the UV by selecting Edit > Copy Polygon to UV in the Polygon 2D UV Editor.

../../_images/skel2d5.png

Продовжуйте робити це, поки не зіставите всі частини.

../../_images/skel2d6.png

Ви помітите, що частини тіла для вузлів з'являються в тому ж місці, що і в оригінальній текстурі. Це тому, що за замовчуванням, коли ви малюєте полігон, UV і точки однакові.

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

../../_images/skel2d7.png

Ой, візуальний порядок частин ще не правильний, оскільки деякі з них перекривають неправильні частини. Впорядкуйте порядок вузлів, щоб виправити це:

../../_images/skel2d8.png

Ось ви і завершили! Безумовно, це було набагато простіше, ніж у урок з вирізок.

Створення скелета

Створіть вузол Skeleton2D в якості нащадка кореневого вузла. Це буде основа нашого скелета:

../../_images/skel2d9.png

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

../../_images/skel2d10.png

Продовжуйте створювати ієрархію кісток і називати їх відповідним чином.

../../_images/skel2d11.png

В кінці цього ланцюжка з'явиться вузол jaw (щелепа). Він, знову ж таки, дуже короткий і вказує праворуч. Це нормально для кісток без нащадків. Довжину кінцевих кісток можна змінити за допомогою властивості в інспекторі:

../../_images/skel2d12.png

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

Продовжуйте рухатися і будувати весь скелет:

../../_images/skel2d13.png

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

../../_images/skel2d14.png

Попередження зникнуть. Якщо ви зміните скелет (додасте/видалите кістки), вам потрібно буде встановити позу спокою знову.

Деформація полігонів

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

../../_images/skel2d15.png

Клацніть властивість, виділену вище, і виберіть вузол скелета:

../../_images/skel2d16.png

Знову відкрийте редактор UV для полігона і перейдіть до розділу Кістки.

../../_images/skel2d17.png

Поки ви не можете малювати вагу. Для цього потрібно синхронізувати список кісток скелета з полігоном. Цей крок виконується лише один раз і вручну (якщо ви не зміните скелет, додавши / видаливши / перейменувавши кістки). Це гарантує, що ваша інформація про каркас зберігатиметься в полігоні, навіть якщо вузол скелета випадково буде втрачено, або скелет зміниться. Натисніть кнопку Синхронізувати кістки з полігоном, щоб синхронізувати список.

../../_images/skel2d18.png

Список кісток з'явиться автоматично. За замовчуванням ваш полігон не має ваги, призначеної кісткам. Виберіть кістки, яким потрібно присвоїти вагу, і розфарбуйте їх:

../../_images/skel2d19.png

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

../../_images/skel2d20.gif

Після фарбування ваг, анімація кісток (НЕ полігонів!) буде змінювати і згинати полігони. Так як в такому підході вам потрібно анімувати тільки кістки, робота стає набагато простішою!

Проте не все так просто. Спроби анімувати кістки, які згинають полігон, часто дають несподівані результати:

../../_images/skel2d21.gif

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

Внутрішні вершини

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

../../_images/skel2d22.png

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

../../_images/skel2d23.png

Як тільки ви почнете малювати, оригінальний полігон зникне, і ви зможете вільно створювати свій власний:

../../_images/skel2d24.png

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

Примітка: Не забувайте, що ваші нещодавно додані внутрішні вершини також потребують фарбування ваги! Перейдіть до розділу Кістки ще раз, щоб присвоїти їх потрібним кісткам.

Після налаштування, ви отримаєте набагато кращі результати:

../../_images/skel2d25.gif