Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Анімація вирізок

Що це таке?

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

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

У відеоіграх ця техніка також стала популярною. Прикладами можуть бути Паперовий Маріо, або Rayman Origins .

Анімація вирізок в Godot

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

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

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

• Власні форми елементів: Свої фігури можна створити за допомогою Polygon2D, що дозволяє анімацію текстурних координат, деформації тощо.

• Системи частинок: Конструкція анімованих вирізок може бути поєднана з системами частинок. Це може бути корисно для магічних ефектів, реактивних рюкзаків і т. д.

• Власні форми зіткнень: Можна підігнати форми зіткнень і зони впливу в різних частинах скелетів; відмінно підходить для босів і бойових ігор.

• Дерево анімації: Дозволяє складні комбінації та змішування між кількома анімаціями, так само, як в 3D.

Та багато інших можливостей!

Створення GBot-а

У цьому підручнику ми використаємо як демонстраційний вміст фрагменти персонажа GBot, створеного Андреасом Ісау.

Отримайте свої ресурси: cutout_animation_assets.zip.

Налаштування скелета

Створіть порожній вузол Node2D в якості кореня сцени:

Першим вузлом моделі є стегно. Як правило, як в 2D, так і в 3D, стегно є коренем скелета. Це полегшує анімацію:

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

Виглядає добре. Давайте подивимося, як працює наша конструкція при обертанні тулуба. Ми можемо зробити це натисканням E, щоб увійти в режим обертання, і порухати мишку з затиснутою лівою кнопкою. Щоб вийти з режиму обертання, натисніть ESC.

Центр обертання неправильний і потрібує регулювання.

Цей маленький хрестик посередині Sprite2D є центром обертання:

Налаштування центра

Опору можна налаштувати, змінивши властивість offset у Sprite2D:

Поворот також можна регулювати візуально. Наводячи курсор на потрібну точку опори, натисніть V, щоб перемістити туди опору для вибраного Sprite2D. На панелі інструментів також є інструмент із подібною функцією.

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

З лівою рукою є проблема. У 2D дочірні вузли розміщуються поверх предків:

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

Примітка

Ви також можете виправити цю проблему впорядкуванням глибини, регулюючи властивість Z будь-якого вузла, що успадковується від Node2D.

Вузол RemoteTransform2D

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

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

Створіть вузол RemoteTransform2D в якості нащадка тулуба. Назвіть його remote_arm_l. Створіть інший вузол RemoteTransform2D всередині першого і назвіть його remote_hand_l. Використовуйте властивість Remote Path двох нових вузлів для націлювання на спрайти arm_l та hand_l спрайти відповідно:

Переміщення вузлів RemoteTransform2D тепер переміщує спрайти. Таким чином, ми можемо створювати анімації, регулюючи перетворення RemoteTransform2D:

Завершення скелета

Завершіть побудову скелета, виконавши ті ж кроки для решти частин. Отримана сцена повинна виглядати так:

Отриманий скелет буде легко анімувати. Вибравши вузли і обертаючи їх, ви можете ефективно анімувати пряму кінематику.

Для простих об'єктів і скелетів це нормально, але є обмеження:

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

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

Для вирішення цих проблем ми будемо використовувати скелети Godot.

Скелети

В Godot є помічник для створення «кісток» між вузлами. Вузли, зв'язані кістками, називаються скелетами.

Як приклад, давайте перетворимо праву руку в скелет. Для створення скелета необхідно вибрати ланцюжок вузлів зверху вниз:

Потім натисніть на меню «Скелет» і виберіть Make Bones.

Це додасть руці кістки, але результат може здивувати.

Чому у руці відсутня кістка? У Godot кістка з'єднує вузол з його предком. І в даний час вузлу руки не хватає ще одного нащадка. Знаючи це спробуємо ще раз.

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

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

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

Створіть кінцеві точки для всіх важливих кінцівок. Створіть кістки для всіх частин вирізки, з стегном в якості кінцевого зв'язку між усіма ними.

Ви можете помітити, що під час з'єднання стегна та тулуба створюється зайва кістка. Godot з'єднав вузол стегна з коренем сцени за допомогою кістки, а нам це не потрібно. Щоб виправити це, виберіть корінь та вузол стегна, відкрийте меню «Скелет», натисніть clear bones.

В результаті ваш скелет має виглядати приблизно так:

Можливо, ви помітили другий набір кінцевих точок на руках. Це отримає сенс найближчим часом.

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

Ланцюжки IK

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

Примітка

Ланцюжки IK у Godot наразі працюють лише в редакторі, а не під час виконання. Вони призначені для полегшення процесу встановлення ключових кадрів і наразі не корисні для таких методів, як процедурна анімація.

Щоб створити ланцюжок ІК, виберіть ланцюжок кісток від кінцевої точки до основи ланцюга. Наприклад, щоб створити ланцюжок ІК для правої ноги, виберіть наступні вузли:

Потім увімкніть цей ланцюжок для IK. Перейдіть до Редагувати > Створити ланцюжок IK.

В результаті основа ланцюжка пожовтіє.

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

Поради щодо анімації

У наступному розділі буде колекція порад щодо анімування скелетів вирізок. Для отримання додаткових відомостей про те, як працює система анімації в Godot, дивіться Вступ до функцій анімації.

Встановлення ключових кадрів і виключення властивостей

Спеціальні контекстні елементи з'являються на верхній панелі інструментів, коли відкривається вікно редактора анімації:

Кнопка ключа вставляє ключові кадри розташування, обертання та масштабування для вибраних об'єктів, або кісток, у поточному положенні точки відтворення.

Кнопки перемикання "loc", "rot" і "scl" ліворуч від кнопки ключа змінюють її функцію, дозволяючи вказати, для яких з трьох властивостей будуть створені ключові кадри.

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

Створення пози спокою

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

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

2. Створіть нову анімацію, перейменуйте її на "rest".

3. Виберіть усі вузли у вашого скелета (можна скористатися вибором коробкою).

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

Зміна лише обертання

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

Таким чином, при вставці ключів вам може бути зручно більшу частину часу мати активним тільки перемикач "rot":

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

Ключові кадри ланцюжків ІК

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

Візуальне переміщення спрайта позаду його батька

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

Щоб допомогти з цим, на всіх вузлах, що успадковуються від Node2D, є властивість "Behind Parent", яку можна використовувати з ключовими кадрами. Плануючи свою установку, подумайте про рухи, які вона повинна виконувати, та про те, як ви будете використовувати вузли "Behind Parent" та/або RemoteTransform2D. Вони забезпечують функціональність, що перекривається.

Встановлення кривих пом'якшення для кількох ключів

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

1. Виберіть відповідні ключі.

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

3. У редакторі натисніть на потрібну криву, щоб застосувати її.

2D деформація скелета

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

Цей процес описаний в окремому уроці.