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

Что это?¶

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

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

В видеоиграх эта техника также стала популярной. Примерами этого являются Paper Mario или Rayman Origins .

Вырезная анимация в Godot¶

Godot предоставляет инструменты для работы с вырезанными частями и идеально подходит для следующих задач:

Анимационная система полностью интегрирована с движком: Это означает, что анимация может управлять гораздо больше, чем просто движением объектов. Текстуры, размеры спрайта, оси вращения, непрозрачность, цветовая модуляция и многое другое могут быть анимированы и смешаны.
Объединение стилей анимации: AnimableSprite позволяет использовать традиционную анимацию наряду с вырезной анимацией. В традиционной анимации различные кадры используют совершенно разные изображения, а не одни и те же части, расположенные по-разному. С другой стороны, в вырезной анимации традиционная анимация может использоваться выборочно для сложных частей, таких как руки, ноги, изменение мимики и т.д.
Пользовательские формы: Пользовательские формы могут быть созданы с помощью Polygon2D и позволяют совершать UV анимации, деформации и т.д.
Системы частиц: Части вырезной анимации могут быть скомбинированы с системами частиц. Это может быть полезно для создания магических эффектов, реактивных ранцев и т.д.
Пользовательские коллайдеры: Установка коллайдеров и зон влияния в различных частях скелета; отлично подходит для боссов и файтингов.
Дерево анимации: Позволяет выполнять сложные комбинации и смешение между несколькими анимациями так же, как и в 3D.

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

Делаем GBot-а¶

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

Загрузите ресурсы: gbot_resources.zip.

Setting up the rig¶

Создайте пустой Node2D как корень сцены, мы будем работать в нём:

Первый узел модели - бедро. Как правило, как в 2D, так и в 3D бедро является корнем скелета. Это упрощает анимацию:

Дальше будет туловище. Туловище должно быть потомком бедра, поэтому создайте дочерний спрайт и загрузите текстуру туловища, чтобы потом его правильно разместить:

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

Точка вращения неверна и нуждается в настройке.

Этот маленький крестик в середине спрайта является точкой вращения:

Настройка точки вращения¶

Точку вращения можно настроить путем изменения свойства offset в Sprite:

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

Продолжайте добавлять части тела, начиная с правой руки. Убедитесь, что каждый спрайт помещен на правильное место в иерархии, чтобы его вращения и перемещения были относительно родителя:

С левой рукой есть проблема. В 2D дочерние узлы располагаются поверх родительских:

Мы хотим, чтобы левая рука располагалась за бедром и туловищем. Можно было бы переместить узлы левой руки за бедро (над узлом бедра в иерархии сцены), но тогда левая рука больше не будет находиться на своем правильном месте в иерархии. Это значит, что на неё не будет влиять движение туловища. Мы исправим эту проблему с помощью узла RemoteTransform2D.

Примечание

Можно также исправить проблемы упорядочения глубины, настроив свойство Z любого узла, наследующего от Node2D.

Узел RemoteTransform2D¶

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

Это позволяет нам корректировать порядок видимости наших элементов, независимо от расположения этих частей в иерархии вырезок.

Создайте узел RemoteTransform2D в качестве дочернего элемента туловища. Назовите его remote_arm_l. Создайте другой узел RemoteTransform2D внутри первого узла и назовите его remote_hand_l. Свойство Remote Path двух новых узлов используется для назначения спрайтов arm_l и hand_l соответственно:

Перемещение узлов RemoteTransform2D теперь перемещает спрайты. Таким образом, мы можем создавать анимации, настраивая трансформации RemoteTransform2D:

Завершение создания скелета¶

Завершите построение скелета, выполнив те же действия для остальных деталей. Получившаяся сцена должна выглядеть примерно так:

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

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

Selecting sprites in the main viewport can become difficult in complex rigs. The scene tree ends up being used to select parts instead, which can be slower.
Обратная кинематика (IK), полезная для анимации конечностей, таких как руки и ноги, не может использоваться с нашим каркасом в его текущем виде.

Для решения этих проблем мы используем скелетоны Godot.

Скелеты¶

В Godot есть помощник для создания «костей» между узлами. Связанные костями узлы называются скелетонами.

В качестве примера давайте превратим правую руку в скелетон. Чтобы создать скелетон, необходимо выбрать цепочку узлов сверху вниз:

Затем, щелкните по меню Скелетон и выберите пункт Создать кости.

Это добавит кости, покрывающие руку, но в результате нас ждёт сюрприз.

Почему в руке не хватает костей? В Godot кость соединяет узел со своим родителем, и в настоящее время у нас нет потомка узла руки. Теперь зная это, давайте попробуем еще раз.

Первый шаг — создание узла конечной точки. Будет работать любой узел, но Position2D является более предпочтительным, так как он виден в редакторе. Узел конечной точки обеспечит ориентацию последней кости.

Теперь выберите всю цепочку от конечной точки до руки и создайте кости:

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

Создайте конечные точки для всех важных конечностей. Создайте кости для всех суставных частей вырезок, с бедром в качестве конечной связи между всеми остальными.

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

В итоге ваша сцена должна выглядеть примерно так:

Возможно, вы заметили второй набор конечных точек на руках. Скоро это обретёт смысл.

Теперь, когда вся фигура покрыта каркасом, следующим шагом является настройка цепочек ИК. Цепочки ИК позволяют более естественно управлять конечностями.

Цепочки ИК¶

ИК означает инверсную кинематику. Это удобная техника для анимации положения рук, ног и других конечностей каркасов, подобных тем, что мы сделали. Представьте, что вы хотите поставить ногу персонажа в определенное положение на земле. Без цепочек ИК каждое движение стопы потребует вращения и позиционирования некоторых других костей (голень и бедро, по крайней мере). Это будет довольно сложно и приведёт к неточным результатам.

ИК позволяет двигать стопу непосредственно, а голень и бедро сами примут необходимое положение.

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

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

В результате, основание цепи станет жёлтым.

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

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

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 Введение в возможности анимации.

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

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

Клавиша с ключом вставляет ключевые кадры положения, поворота и масштаба для выбранных объектов или костей в текущей позиции точки воспроизведения.

Кнопки переключения «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»:

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

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

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

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

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

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

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

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

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

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

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

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