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

Що це таке?¶

Традиційна анімація вирізок це тип `покадрової (лялькової) анімації<https://en.wikipedia.org/wiki/Stop_motion>`__ в якому шматочки паперу (або іншого тонкого матеріалу) розрізають на спеціальні форми і формують з них двовимірних персонажів і об'єкти. Тіла персонажів зазвичай складаються з декількох частин. Частини розташовуються і фотографуються один раз для кожного кадру фільму. Аніматор рухає і обертає частини невеликими зміщеннями між кожним знімком, щоб створити ілюзію руху, під час швидкого відтворення послідовності світлин.

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

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

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

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

Повна інтеграція системи анімації з рушієм: Це означає, що анімація може контролювати набагато більше, ніж просто рух об'єктів. Текстури, розміри спрайтів, непрозорість, модуляція кольорів тощо, можуть бути анімовані та змішані.
Об'єднання стилів анімації: Вузол AnimatedSprite дозволяє використовувати традиційну анімацію малюнків на прозорому фоні разом із анімацією вирізок. В анімації малюнків різні кадри використовують абсолютно різні малюнки, а не одні й ті ж частини, розташовані по-різному. В випадку з анімація вирізок, анімація малюнків може бути вибірково використана для таких складних частин, як руки, ноги, зміна міміки тощо.
Власні форми елементів: Свої фігури можна створити за допомогою Polygon2D, що дозволяє анімацію текстурних координат, деформації тощо.
Системи частинок: Конструкція анімованих вирізок може бути поєднана з системами частинок. Це може бути корисно для магічних ефектів, реактивних рюкзаків і т. д.
Власні форми зіткнень: Можна підігнати форми зіткнень і зони впливу в різних частинах скелетів; відмінно підходить для босів і бойових ігор.
Дерево анімації: Дозволяє складні комбінації та змішування між кількома анімаціями, так само, як в 3D.

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

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

Для цього уроку ми будемо використовувати в якості демонстраційного вмісту фрагменти персонажа `GBot<https://www.youtube.com/watch?v=S13FrWuBMx4&list=UUckpus81gNin1aV8WSffRKw>`__, створені Андреасом Ісау.

Завантажте ресурси: gbot_resources.zip.

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

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

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

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

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

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

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

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

Центр обертання можна регулювати, змінивши властивість зсуву Offset в спрайті:

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

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

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

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

Примітка

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

Вузол RemoteTransform2D¶

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

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

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

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

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

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

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

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

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

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

Скелети¶

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

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

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

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

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

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

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

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

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

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

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

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

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

Ланцюжки IK¶

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

ІК дозволяє нам рухати одразу ногу, а гомілка і стегно розмістяться самі.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Створіть нову анімацію, перейменуйте її на "rest".
Виберіть усі вузли у вашого скелета (можна скористатися вибором коробкою).

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 не обов'язково вибирати весь ланцюжок для додавання ключових кадрів. Досить вибрати кінцеву точку ланцюжка та вставити ключовий кадр для неї, для всіх інших частин ланцюжка ключові кадри створяться автоматично.

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

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

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

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

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

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

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

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

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