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.

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

Що це таке?

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

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

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

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

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

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

  • Combine animation styles: AnimatedSprite2D allows traditional cel animation to be used alongside cutout animation. In cel animation different animation frames use entirely different drawings rather than the same pieces positioned differently. In an otherwise cutout-based animation, cel animation can be used selectively for complex parts such as hands, feet, changing facial expressions, etc.

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

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

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

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

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

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

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

../../_images/tuto_cutout_walk.gif

Get your assets: cutout_animation_assets.zip.

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

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

../../_images/tuto_cutout1.png

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

../../_images/tuto_cutout2.png

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

../../_images/tuto_cutout3.png

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

../../_images/tutovec_torso1.gif

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

This small cross in the middle of the Sprite2D is the rotation pivot:

../../_images/tuto_cutout4.png

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

The pivot can be adjusted by changing the offset property in the Sprite2D:

../../_images/tuto_cutout5.png

The pivot can also be adjusted visually. While hovering over the desired pivot point, press V to move the pivot there for the selected Sprite2D. There is also a tool in the tool bar that has a similar function.

../../_images/tutovec_torso2.gif

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

../../_images/tuto_cutout6.png

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

../../_images/tuto_cutout7.png

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

Примітка

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

Вузол RemoteTransform2D

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

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

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

../../_images/tuto_cutout9.png

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

../../_images/tutovec_torso4.gif

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

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

../../_images/tuto_cutout10.png

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

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

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

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

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

Скелети

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

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

../../_images/tuto_cutout11.png

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

../../_images/tuto_cutout12.png

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

../../_images/tuto_cutout13.png

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

The first step is creating an endpoint node. Any kind of node will do, but Marker2D is preferred because it's visible in the editor. The endpoint node will ensure that the last bone has orientation.

../../_images/tuto_cutout14.png

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

../../_images/tuto_cutout15.png

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

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

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

../../_images/tuto_cutout15_2.png

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

../../_images/tuto_cutout16.png

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

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

Ланцюжки IK

IK stands for inverse kinematics. It's a convenient technique for animating the position of hands, feet and other extremities of rigs like the one we've made. Imagine you want to pose a character's foot in a specific position on the ground. Without IK chains, each motion of the foot would require rotating and positioning several other bones (the shin and the thigh at least). This would be quite complex and lead to imprecise results. IK allows us to move the foot directly while the shin and thigh self-adjust.

Примітка

IK chains in Godot currently work in the editor only, not at runtime. They are intended to ease the process of setting keyframes, and are not currently useful for techniques like procedural animation.

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

../../_images/tuto_cutout17.png

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

../../_images/tuto_cutout18.png

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

../../_images/tuto_cutout19.png

Once the IK chain is set up, grab any child or grand-child of the base of the chain (e.g. a foot), and move it. You'll see the rest of the chain adjust as you adjust its position.

../../_images/tutovec_torso5.gif

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

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

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

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

../../_images/tuto_cutout20.png

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

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

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

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

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

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

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

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

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.

../../_images/tuto_cutout21.png

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

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

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

../../_images/tuto_cutout22.png

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

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

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

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

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

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

../../_images/tuto_cutout23.png

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

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

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

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

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

../../_images/tuto_cutout24.png

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

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

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