Перейти к содержанию

2D-анимация костей

В этом учебнике вы научитесь создавать 2D пиксель-арт анимацию костей в PixelOver.
Мы начнём с одной иллюстрации, разделим её на части, снабдим ригом из костей, анимируем и экспортируем итоговую анимацию спрайта.

Требования

Для этого учебника вам нужна иллюстрация для анимации.
Я использую иллюстрацию от Smiley-Fakemon.

Speck

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

Далее мы используем PixelOver, чтобы пикселизировать иллюстрацию и анимировать её с помощью костей.

1. Разделение и заполнение иллюстрации

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

Типичные части включают:

  • голову
  • туловище
  • крылья
  • лапы / ноги
  • хвост
  • аксессуары (если есть)

Speck split

Заполнить скрытые зоны (важно)

После разделения вы должны заполнить скрытые зоны за каждой частью.

Например:

  • крыло скрывает часть туловища
  • туловище скрывает часть основания крыла
  • лапы могут скрывать часть ног

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

Экспортировать каждую часть

Экспортируйте каждую отдельную часть в отдельный файл изображения.
Вы можете загрузить изображения этого примера:
Загрузить разделённые части (.zip)

2. Импорт изображений в PixelOver

Откройте PixelOver, затем перетащите все изображения частей в проект.

При импорте выберите импортировать их как отдельные изображения (не как анимированное изображение).

Также рекомендуется импортировать полную исходную иллюстрацию как эталонное изображение.

Parts imported

Совет

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

3. Изменить размер иллюстрации (необязательно, но рекомендуется)

При необходимости вы можете выбрать несколько изображений сразу (Shift + левый клик) и изменить их размер вместе.

Это удобно для быстрой подгонки нужного масштаба пиксель-арта перед применением шейдера.

Resize

4. Применить пиксель-арт-шейдер

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

Вы можете:

  • загрузить предустановленный шейдер из верхней строки
  • или настроить параметры шейдера на правой панели

Import shader

Shader settings

Совет

Легче риггировать и анимировать, когда пиксельный стиль уже применён, потому что вы сразу видите итоговые пропорции и читаемость.

5. Риггинг: создать структуру костей

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

Bone tool

Создать кости

Используйте клик + перетаскивание, чтобы создавать кости в виде.

Add bone

Создайте чистую иерархию (родитель → потомок), например:

  • Root
    • Bone_Torso
    • Bone_Head
      • Bone_Wing_L
      • Bone_Wing_R
      • Bone_Leg_L
      • Bone_Leg_R
      • Bone_Tail

Совет

Переименовывайте кости по мере их создания. Хорошее соглашение об именах сильно помогает при анимации: Root, Bone_Torso, Bone_Head, Bone_Wing_L, Bone_Wing_R и т. д.

Присоединить изображения под кости

На этом этапе кости не влияют на изображения автоматически.
Чтобы привязать часть спрайта к кости, просто присоедините изображение под костью в дереве сцены.

Пример:

  • Bone_Torso
    • Torso_Image
    • Bone_Head
      • Head_Image

Вы можете использовать вырезать/вставить или присоединение перетаскиванием в дереве сцены.

Reorder

Когда все части правильно присоединены, ваш риг должен выглядеть как полная иерархия:

All bones

Информация

Первая кость (часто называемая Root) может иметь длину 0px. Она служит стабильной точкой отсчёта и упрощает перемещение или масштабирование всего персонажа.

На этом этапе риггинг завершён.
Теперь мы можем начать анимировать.

6. Анимация

Откройте панель анимации в нижней части интерфейса.

Переименуйте свою анимацию, затем настройте:

  • длительность
  • FPS (кадры в секунду)

Animation panel

Создать первые ключи

Выберите все кости, затем нажмите значки ключей, чтобы создать ключи для:

  • Позиции
  • Поворота

Add keys

Это создаёт базовую позу для кадра 0.

Добавить больше поз

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

Если кнопка REC включена, ключи будут создаваться автоматически при изменении костей.

Add new key

Дублировать ключи для ускорения работы

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

Duplicate key

Сбросить кости к позе покоя

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

Reset rest

Пример анимации (прыжок)

Для этого примера персонаж выполняет прыжок:

Animation step1

Animation step2

Animation step3

Совет

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

Улучшить переходы

Чтобы сделать анимацию плавнее, вы можете:

  • настроить тайминг ключей
  • применить сглаживание на ключах
  • вручную доработать переходы

Key transitions

7. Экспорт

Перед экспортом:

  • убедитесь, что FPS вашей анимации правильные
  • скройте кости с помощью переключателя вверху справа при необходимости (лучший предпросмотр)

Hide bones

Затем откройте диалог экспорта:

Проект > Экспорт...

Export

Вы можете экспортировать как:

  • последовательность PNG
  • GIF
  • спрайт-лист

Вы также можете:

  • масштабировать размер пикселей
  • разделить анимации по папкам
  • предпросмотреть, сколько кадров будет сгенерировано

Export menu

Итоговый результат:

Speck animated result

Этот проект и другие примеры доступны в файлах загрузки PixelOver (включая demo):
https://deakcor.itch.io/pixelover#purchase