Анимация Методом Перекладки + Скелетная

уроки и различная документация по Godot Engine

Сообщение Анимация Методом Перекладки + Скелетная
» 02 июл 2015, 11:30

Что это?

Анимация методом перекладки в 2D - это когда бумагу (или подобный материал) разрезают на специальные формы, накладывают друг на друга и создают анимацию перекладывая их кадр за кадром и фотографируют (подробнее здесь).

 От переводчика:
В русской википедии статьи о Cutout Animation нет. Перевод названия метода далеко не точный, но так уж повелось. Думаю смысл вам понятен. По факту это самый простой тип анимации. Само изображение не меняется, меняется только место расположения деталей изображения. Потому временные затраты очень сокращаются, ведь не нужно ничего перерисовывать. Этот метод во много похож на костную/скелетную анимацию. Прочитав урок до конца, вам станет совсем все понятно.


С наступление цифрового века, этот метод стал возможен и с использованием компьютера, что привело к увеличению количества анимационных телешоу, которые используют цифровой метод перекладки. Известные примеры South Park или Jake and the Never Land Pirates.

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

Метод Перекладки в Godot

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

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

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

Создадим GBot!

В этом уроке, в качестве демо-контента, мы будем использовать кусочки GBot'а, созданного Andreas Esau.

Изображение


Ассеты скачайте здесь.

Настройка Конструкции

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

Изображение


OK, первый нод модели, который мы создадим. будет бедро (hip). Вообще, как в 2D так и в 3D, бедро - корень скелета. Это облегчает анимацию:

Изображение


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

Изображение


Все выглядит хорошо. Давайте проверим, работает ли наша иерархия как скелет, вращая туловище:

Изображение


Ай, это выглядит не хорошо! Центр вращения не правильны, это значит, что нужно его скорректировать. Этот маленький небольшой крест по средине Sprite - центр вращения:

Изображение


Корректировка Центра

Центр можно скорректировать, изменив свойство offset в Sprite:

Изображение


Однако есть способ сделать это более визуально. Выберете объект и как обычно перемещайте его. После того как движение началось и левая кнопка мыши удерживается, нажмите клавишу "v", не отпуская кнопку мыши. дальнейшее движение переместит объект вокруг центра. Этот маленький инструмент позволит легко откорректировать центр. Наконец переместим центр в правильное место:

Изображение


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

Изображение


Это кажется легко, потому продолжите правую руку. Остальное должно быть просто! А может и нет:

Изображение


Право. Помни свои уроки, Люк. В 2D родительские ноды появляются ниже дочерних. Ну, это отстой. Кажется после всего этого Godot не поддерживает настройку персонажа как в перекладной анимации. Возвращайтесь в следующем году, возможно в 1.2... не ждите. Просто шучу! Все работает просто отлично.

Но как может быть решена эта проблема? Мы хотим чтобы рука появилась за бедром и туловищем. Для этого мы можем переместить ноды за бедро:

Изображение


Но тогда мы потеряем макет иерархии, который позволяет контролировать скелет, как... скелет. Есть ли надежда?.. Конечно!

Нод RemoteTransform2D

Godot предоставляет специальный нод - RemoteTransform2D. Этот нод преобразует ноды, которые находятся где-то в другом месте иерархии, копируя его преобразования к удаленному ноду. Добавим его, чтобы иметь порядок видимости, независящий от иерархии.

Просто создайте еще два нода, как дочерние к туловищу элементы, remote_arm_l и remote_hand_l и соедините их с фактическими спрайтами:

Изображение


Передвижение нодов RemoteTransform2D переместит спрайты, что позволяет легко анимировать и создавать позы персонажа:

Изображение


Завершение Скелета

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

Изображение


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

Это прекрасно для простых объектов и конструкций, однако следующие проблемы являются общими:

  • Из-за трудности щелчка по нужному спрайту, выбор нужного спрайта может быть трудным для больших конструкций и конца древа сцены.
  • Часто для конечностей желательна Инверсная кинематика.

Чтобы решить эти проблемы, Godot поддерживает простой метод скелетов.

Скелеты

На самом деле Godot не поддерживает полноценно скелеты. То что существует, является помощником для создания "костей" между нодами. Этого достаточно для большинства случаев, хотя способ настройки отличается от привычного.

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

Изображение


Затем, опция создать скелет расположена в Edit -> Skeleton -> Make Bones:

Изображение


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

Изображение


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

  • Почему у руки нет кости?
  • Почему плечо соединяется с телом?

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

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

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

Изображение


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

Изображение


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

Наконец, создайте конечные точки во всех значимых конечностях и соедините целый скелет с костями до бедра:

Изображение


Наконец! Весь скелет построен! При внимательном рассмотрении вы заметите, что есть второй набор конечных точек в руках. Скоро они нам понадобятся.

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

IK Цепочки

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

Что если бы мы могли просто переместить ступню и пусть остальная часть ноги приспосабливалась к новому положению ступни? Этот тип позиционирования называется IK (Инверсная кинематика).

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

Изображение


Затем включите эту цепочку для IK. Перейти к Edit -> Skeleton -> Make IK Chain

Изображение


В результате основа цепочки станет Желтой.

Изображение


Как только цепочка IK - установлена, просто захватите любую из костей в оконечности, любой дочерний элемент конечности основной цепи, постарайтесь ухватить и переместить его. Результат будет приятным, удовлетворение гарантировано!

Изображение


Анимация

Следующий раздел является сборником советов для создания анимаций ваших конструкций. Если вы не уверенно понимаете, как работает система анимации в Godot, обновите ваши знания пройдя соответствующий урок.

2D Анимация

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

Изображение


Кнопка ключа вставляет ключевые кадры местоположения(loc)/вращения(rot)/масштаба(scl) для выбранных объектов или костей. Это зависит от включенной маски. Зеленые детали будут вставлять ключи, а красные нет, поэтому измените основную маску вставки по вашему предпочтению.

Поза Отдыха

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

Просто сделайте следующие шаги:

  1. Убедитесь, что конструкция находиться в "покое" (не делайте каких либо конкретных поз).
  2. Создайте новую анимацию и назовите ее "rest".
  3. Выберите все ноды (окно выбора должно работать нормально).
  4. Выберите "loc" и "rot" в верхнем меню.
  5. Нажмите кнопку ключа. Ключи будут вставлены для всего, создавая позу по умолчанию.

Изображение


Вращение

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

Потому в большинстве случаев, при вставке ключа, все время нажатой должна быть только кнопка "rot":

Изображение


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

Ключевые кадры IK

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

Перемещение Спрайтов Выше и Позади Других

В большинстве случаев работает RemoteTransform2D, но иногда при анимации действительно необходимо иметь нод выше или ниже других. Чтобы помочь с этим, у каждого Node2D существует свойство "Behind Parent":

Изображение


Пакет Установки Кривых Перехода

При создании действительно сложных анимаций и вставки множества ключевых кадров, редактирование отдельных кривых для каждого ключевого кадра может стать бесконечной задачей. Для этого, Редактор Анимаций имеет небольшое меню, где легко меняются все кривые. Просто выберите каждый ключевой кадр и (в основном) примените "Out-In" кривые перехода, чтобы сгладить анимацию:

Изображение
Аватара пользователя

Участник
Сообщений: 229
Я тут с 09 апр 2015
Репутация 24 [ ? ]

Сообщение Анимация Методом Перекладки + Скелетная
» 06 сен 2016, 15:11

nighttrolley, не могли бы вы перезалить изображения?
Аватара пользователя

Участник
Сообщений: 1
Я тут с 06 сен 2016
Репутация 0 [ ? ]

Сообщение Анимация Методом Перекладки + Скелетная
» 09 сен 2016, 12:09

gerons, в официальной вики есть все эти статьи(англ), но картинки там на месте. Так что можете посмотреть все там! заодно оригинал почитать... :hii:
ссылка
Ваше нажатие кнопки "Поблагодарить" за помощь - нереально тешит мое ЧСВ и дает силы помогать остальным! ;)
Хватит выпрашивать исходники! Включайте мозг, если есть, конечно!.. :)
Отличие лицензий на контент!
Изображение
Аватара пользователя

Игродел + TDS
Сообщений: 2481
Я тут с 18 авг 2014
Репутация 316 [ ? ]

Сообщение Анимация Методом Перекладки + Скелетная
» 12 сен 2016, 15:28

gerons, лень/влом/не нужно оно.

Но помочь - помогу.

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

Участник
Сообщений: 229
Я тут с 09 апр 2015
Репутация 24 [ ? ]



Вернуться в Уроки по Godot Engine

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх