Как сделать пиксельную анимацию: оживляем персонажа за 4 кадра

Чтобы оживить пиксельного персонажа, не нужно рисовать десятки кадров. На холсте 32×32 достаточно поднять тело на один пиксель, слегка сжать тень и ненадолго задержать верхнюю позу.

Цель урока — собрать цикл анимации покоя из четырёх кадров без заметного скачка. Такой принцип подходит для игровых спрайтов, аватаров, стикеров и GIF в стиле пиксель-арт.

Постоянство важнее количества кадров

Во всех кадрах сохраняйте размер холста, положение персонажа, толщину контура и палитру. Меняйте только то, что действительно движется. В маленьком спрайте один пиксель — большое расстояние, поэтому небольшая ошибка превращается в дрожание.

Сначала задайте сетку и якорную точку. Для стоящего персонажа это центр стоп, для парящего — центр тени.

Настройки первого упражнения

• Холст: начните с 32×32; простой значок можно сделать в 16×16.
• Палитра: оставьте 4–6 цветов для контура, основы, тени и блика.
• Масштаб: увеличивайте в 2×, 3× или 4× методом ближайшего соседа.
• Действие: опишите одной фразой, например «персонаж спокойно дышит». Не добавляйте одновременно прыжок, взмах и моргание.

Схема цикла из четырёх кадров

Кадр	Изменение	Что остаётся на месте
1	Средняя опорная поза	Центр стоп и размер холста
2	Тело выше на пиксель и немного вытянуто	Расстояние между глазами и палитра
3	Короткая пауза в верхней точке	Центр тени
4	Возврат с небольшим сжатием	Вес не уходит в стороны

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

1. Проверьте одноцветный силуэт

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

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

2. Дублируйте базовый кадр

Скопируйте первый кадр трижды и двигайте только нужные пиксели. Если перерисовывать всё, легко изменить ширину головы, положение глаз и толщину линии.

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

3. Зафиксируйте якорь

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

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

4. Сохраните палитру и контур

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

При увеличении проверьте, не стала ли линия толщиной в один пиксель двухпиксельной. Исключение — намеренное сжатие или растяжение.

5. Настройте ритм в предпросмотре

Сначала проигрывайте медленно, найдите скачки, затем ускорьте. Единственного правильного FPS нет: движение должно читаться, а четвёртый кадр — мягко возвращаться к первому.

Проверьте экспортированный GIF: браузеры и платформы могут немного менять ощущение ритма.

6. Добавьте одно вторичное движение

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

На 32×32 лишние движения скрывают главную идею. Добавляйте по одному и сразу проверяйте.

Частые ошибки

• Дрожание в стороны: координаты стоп или тени меняются.
• Мерцание контура: пропали пиксели или изменилась толщина.
• Тело «плавится»: всё деформируется, нет стабильной части.
• Слишком быстро: ключевые позы показываются недолго.
• Размытое увеличение: используйте ближайшего соседа и целый множитель.
• Скачок в цикле: кадры 4 и 1 слишком разные.

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

1. Посмотрите в масштабе 100% и с увеличением.
2. Запустите десять циклов, отдельно следя за стопами, глазами и контуром.
3. GIF удобен для публикации, PNG — для чётких кадров. Для игры подготовьте последовательные PNG или лист спрайтов в специальном редакторе.
4. Не храните исходник в JPG: сжатие создаёт грязь на краях.

Вопросы

Сколько кадров нужно новичку?

Начните с 2–4. Дыхание, моргание и небольшой прыжок помещаются в этот диапазон. Если движение непонятно, усилите ключевые позы, а не добавляйте кадры.

16×16 или 32×32?

32×32 сохраняет характер и остаётся достаточно маленьким для контроля каждого пикселя. 16×16 подойдёт для тренировки максимально простого силуэта.

Пиксельная анимация нужна только играм?

Нет. Она подходит для аватаров, стикеров, элементов сайтов и GIF. Направления, хитбоксы и лист спрайтов — следующий этап.