Субпиксельная анимация

Что это такое

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

Субпиксельная анимация обходит это. Вместо того чтобы двигать форму, вы меняете цвет пикселей вдоль ее края. Если краевой пиксель переходит от цвета фона к полутону, а затем к полному цвету формы, край словно ползет наружу на треть пикселя, затем на две трети. Глаз читает плавное мелкое движение.

Зачем художники это делают

• Мягкие анимации ожидания. Дыхание, парение и покачивание выглядят спокойно, а не дергано.
• Маленькие спрайты. При 16 или 32 пикселях нет места для крупных движений, поэтому важны доли.
• Плавность без лишних пикселей. Это добавляет движению кажущееся разрешение без перерисовки в большем размере.

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

• Слишком много промежуточных цветов. Если добавлять новые цвета только для краев, палитра разрастается, а спрайт выглядит размытым. Используйте цвета, которые уже есть в ваших рампах.
• Использование для крупных движений. Цикл бега или взмах мечом лучше читаются с четкими позами на целых пикселях.
• Несогласованные края. Если одна сторона формы использует субпиксельные шаги, а другая прыгает, форма словно растягивается.
• Мерцание. Пиксель, который меняется туда-обратно между кадрами без ясного направления, выглядит как шум, а не как движение.

Как сделать это вручную

1. Нарисуйте начальную и конечную позы, сдвинутые на один пиксель.
2. Между ними добавьте один-два кадра, в которых меняются только краевые пиксели.
3. Каждый краевой пиксель, который будет перекрыт сдвигом, проведите через промежуточный цвет из рампы.
4. Проиграйте цикл на игровой скорости и при увеличении 1×. Настройте тайминг, прежде чем добавлять кадры.
5. Все остальные пиксели спрайта держите неподвижными, чтобы изменение читалось как движение края.

Место Pixor

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

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

Похожее

• Миксели: почему перемещения должны оставаться на пиксельной сетке
• Пре-рендеренные спрайты
• Анимация, Aseprite и руководство по экспорту