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.

Вырезная анимация

Что это?

Традиционно вырезная анимация — это вид покадровой анимации, при котором куски бумаги (или другого тонкого материала) разрезаются на специальные формы и располагаются в двумерных пространстве, представляя собой персонажи и объекты. Тела персонажей обычно изготавливаются из нескольких частей. Кусочки располагают и фотографируют один раз для каждого кадра фильма. Аниматор перемещает и поворачивает детали с небольшими изменениями между каждым снимком, создавая иллюзию движения при быстром последовательном воспроизведении изображений.

Вырезная анимация теперь может быть создана с помощью программного обеспечения, как, например, в South Park и Jake and the Never Land Pirates.

В видеоиграх эта техника также стала популярной. Примерами этого являются Paper Mario или 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 и позволяют совершать UV анимации, деформации и т.д.

  • Системы частиц: Части вырезной анимации могут быть скомбинированы с системами частиц. Это может быть полезно для создания магических эффектов, реактивных ранцев и т.д.

  • Пользовательские коллайдеры: Установка коллайдеров и зон влияния в различных частях скелета; отлично подходит для боссов и файтингов.

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

И многое другое!

Делаем GBot-а

Для этого учебного пособия мы будем использовать в качестве демонстрационного контента фрагменты персонажа GBot , созданные Андреасом Исау.

../../_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

Узел 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

Полученный каркас будет легко анимировать. Выбирая узлы и вращая их можно эффективно выполнять анимацию с прямой кинематикой (FK).

Для простых объектов и каркасов это нормально, но есть ограничения:

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

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

Для решения этих проблем мы используем скелетоны 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 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.

Чтобы создать цепочку IK, выберите цепочку из костей от конечной точки до основания цепочки. Например, чтобы создать цепочку ИК для правой ноги, выберите следующее:

../../_images/tuto_cutout17.png

Затем включите эту цепочку в ИК. Перейдите в раздел Правка > Создать цепочку ИК.

../../_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

Советы по анимации

The following section will be a collection of tips for creating animation for your cutout rigs. For more information on how the animation system in Godot works, see Введение в возможности анимации.

Установка ключевых кадров и исключение свойств

При открытом окне редактора анимации на верхней панели инструментов появляются специальные контекстные элементы:

../../_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

Это позволит избежать создания нежелательных треков анимации для положения и масштаба.

ИК цепочки ключевых кадров

При редактировании ИК цепочек нет необходимости выбирать всю цепочку для добавления ключевых кадров. При выборе конечной точки цепочки и вставке ключевого кадра также автоматически вставляются ключевые кадры для всех остальных частей цепочки.

Визуальное перемещение спрайта позади родителя

Иногда во время анимации необходимо, чтобы узел изменял свою визуальную глубину относительно родительского узла. Подумайте о персонаже, обращенном лицом к камере, который вытаскивает что-то из-за спины и держит это перед собой. Во время этой анимации вся рука и объект в ней должны были изменить свою визуальную глубину относительно тела персонажа.

Чтобы помочь с этим, все узлы, наследованные от Node2D, имеют свойство «Behind Parent». При планировании каркаса подумайте о движениях, которые ему потребуется выполнить, и подумайте, как использовать «Behind Parent» и/или RemoteTransform2D узлов. Они обеспечивают функции перекрытия.

../../_images/tuto_cutout23.png

Настройка кривых замедления для нескольких ключей

Чтобы применить одну и ту же кривую замедления сразу к нескольким ключевым кадрам:

  1. Выберите соответствующие ключи.

  2. Щелкните значок карандаша в правом нижнем углу панели анимации. Откроется редактор переходов.

  3. В редакторе переходов щелкните нужную кривую, чтобы применить ее.

../../_images/tuto_cutout24.png

2D Деформация скелета

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

Этот процесс описан в отдельном учебном пособии.