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.

2D-скелеты

Введение

When working with 3D, skeletal deforms are common for characters and creatures and most 3D modeling applications support it. For 2D, as this function is not used as often, it's difficult to find mainstream software aimed for this.

Один из вариантов решения — создание анимации в стороннем программном обеспечении, таком как «Spine» или «Dragonbones». Однако, начиная с Godot 3.1 и далее, этот функционал поддерживается «из коробки».

Зачем делать скелетную анимацию прямо в Godot? Ответ заключается в том, что в этом есть много преимуществ:

  • Лучшая интеграция с движком, и поэтому меньше проблем с импортом и редактированием из внешнего инструмента.

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

  • Встроенная скелетная система в Godot очень эффективна и ориентирована на производительность.

В следующем учебном пособии объясняются деформации 2D скелета.

Настройка

См.также

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

В данном учебном пособии для построения персонажа будет использоваться одно изображение. Загрузите его из gBot_pieces.png или сохраните изображение ниже.

../../_images/gBot_pieces.png

Также рекомендуется загрузить окончательное изображение персонажа gBot_complete.png, чтобы иметь хороший пример объединения различных частей.

../../_images/gBot_complete.png

Создание полигонов

Create a new scene for your model (if it's going to be an animated character, you may want to use a CharacterBody2D). For ease of use, an empty 2D node is created as a root for the polygons.

Начните с узла Polygon2D. Пока нет необходимости размещать его где-либо в сцене, так что просто создайте его так:

../../_images/skel2d1.png

Выберите его и назначьте текстуру с ранее загруженными частями тела персонажа:

../../_images/skel2d2.png

Рисование многоугольника напрямую не рекомендуется. Вместо этого откройте диалоговое окно «UV» для полигона:

../../_images/skel2d3.png

Перейдите в режим Точки, выберите карандаш и нарисуйте многоугольник вокруг нужной части тела:

../../_images/skel2d4.png

Скопируйте узел полигона и присвойте ему собственное имя. Затем снова откройте диалоговое окно «UV» и замените старый многоугольник другим в новой нужной части тела.

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

After moving the polygon, remember to update the UV by selecting Edit > Copy Polygon to UV in the Polygon 2D UV Editor.

../../_images/skel2d5.png

Продолжайте делать это со всеми остальными частями.

../../_images/skel2d6.png

Можно заметить, что части тела для узлов отображаются в той же компоновке, что и в исходной текстуре. Это происходит потому, что по умолчанию при построении многоугольника UV и точки совпадают.

Передвиньте части тела и постройте персонажа. Это довольно быстро. Нет необходимости менять оси вращения, поэтому не беспокойтесь, чтобы оси вращения для каждой детали были правильными; можете пока их оставить.

../../_images/skel2d7.png

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

../../_images/skel2d8.png

А вот и ты! Это явно было намного проще, чем в учебном пособии по вырезкам.

Создание скелета

Создайте узел Skeleton2D как дочерний от корневого узла. Это будет основой нашего скелета:

../../_images/skel2d9.png

Создайте узел Bone2D как дочерний элемент скелета. Положите его на бедро (обычно здесь начинаются скелеты). Кость будет указывать вправо, но Вы можете пока это игнорировать.

../../_images/skel2d10.png

Продолжайте создавать кости в иерархии и присваивать им соответствующие имена.

../../_images/skel2d11.png

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

../../_images/skel2d12.png

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

Продолжайте строить весь остальной скелет:

../../_images/skel2d13.png

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

../../_images/skel2d14.png

Предупреждения исчезнут. При изменении скелета (добавления/удаления костей) будет необходимо снова задать позу покоя.

Деформация полигонов

Выберите ранее созданные полигоны и назначьте скелетный узел их свойству Skeleton . Это гарантирует, что они, в конечном счёте, смогут быть им деформированы.

../../_images/skel2d15.png

Щелкните на свойстве, выделенном выше, и выберите скелетный узел:

../../_images/skel2d16.png

Снова откройте UV редактор для полигона и перейдите в раздел Кости.

../../_images/skel2d17.png

Пока Вы еще не сможете рисовать веса. Для этого необходимо синхронизировать список костей из скелета с многоугольником. Этот шаг выполняется только один раз и вручную (если скелет не изменен путем добавления/удаления/переименования костей). Это гарантирует, что информация о настройках сохраниться в полигоне, даже если скелетный узел случайно потерян или скелет изменен. Нажмите кнопку «Синхронизировать кости с полигоном», чтобы синхронизировать список.

../../_images/skel2d18.png

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

../../_images/skel2d19.png

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

../../_images/skel2d20.gif

После рисования весов анимация костей (НЕ многоугольников!) будет соответственно изменять и изгибать многоугольники. Поскольку при таком подходе нам нужно только анимировать кости, работа становится намного проще!

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

../../_images/skel2d21.gif

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

Внутренние вершины

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

../../_images/skel2d22.png

Теперь перейдите к разделу Полигон и перерисуйте Ваши полигоны с более детально. Представьте, как Ваши многоугольники изгибаются, и убедитесь, что они деформируются как можно меньше, поэтому немного поэкспериментируйте, чтобы найти правильные настройки.

../../_images/skel2d23.png

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

../../_images/skel2d24.png

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

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

После того, как всё настроено, Вы получите гораздо более лучший результат:

../../_images/skel2d25.gif