Как создать базовый цикл ходьбы в пиксель-арте без знания анатомии
Если анатомия пока кажется сложной, постройте походку как цикл из простых форм и четырёх повторяемых поз. Начните с персонажа с видом сбоку, наметьте ноги и торс контрастными цветами и анимируйте восемь кадров: контакт, опускание (down), прохождение (passing) и подъем (up), а затем ту же последовательность с другой ногой впереди. Проверьте зацикленность в небольшом масштабе, прежде чем добавлять одежду, тени или детали. Это позволит сосредоточиться на читаемости движения, а не на тонкостях прорисовки.
Задайте небольшую фиксированную отправную точку
Выберите холст, подходящий под уже имеющегося персонажа; 32 × 32 пикселя — один из практических примеров из руководств по циклу ходьбы в пиксель-арте, но не строго обязательный размер. Сохраняйте размер холста, а также общую ширину и высоту персонажа неизменными во всех кадрах. Проведите горизонтальную направляющую линии земли под ногами и отметьте стабильную точку привязки, например центр торса. Эти ориентиры помогут быстрее заметить нежелательное смещение.
На первом этапе обозначьте голову овалом или блоком, торс — одной компактной фигурой, а руки и ноги — толстыми линиями или узкими формами. Используйте разные временные цвета для ближних и дальних конечностей, чтобы различать их при перекрытии. Это рабочий чертёж, а не заявление о точных пропорциях. Пиксель-художник Рэймонд Шлиттер описывает использование манекена с цветовой маркировкой для разделения головы, шеи, торса, рук и ног перед детализацией более крупного спрайта. SLYNYRD: «Pixelblog - 50 - Human Walk Cycle»
Спланируйте четыре позы перед прорисовкой деталей
Удобная база для цикла ходьбы состоит из четырёх поз: контакт, опускание (down), прохождение (passing) и подъём (up). Нарисуйте их для одного шага, затем повторите последовательность, ведя противоположной ногой. В фазе контакта передняя нога выносится вперёд, а задняя отводится назад. В фазе опускания передняя нога принимает вес персонажа, и тело опускается ниже. В фазе прохождения проекции ног пересекаются, пока задняя нога выносится вперёд, а тело поднимается. В фазе подъёма шагающая нога махом устремляется вперёд к следующему контакту.
Для восьмикадрового цикла расположите рисунки в следующем порядке: левый контакт, опускание, прохождение, подъём, правый контакт, опускание, прохождение, подъём. Во второй половине ведущая нога меняется; она должна ощущаться естественной парой для первой половины, а не дублированным изображением. В подробном руководстве по пиксель-арту эти ключевые моменты обозначены наглядно, а восемь кадров используются как баланс между экономичностью и плавностью; для других стилей спрайтов может подойти иное количество кадров. SLYNYRD: «Pixelblog - 50 - Human Walk Cycle»
Постройте ноги из простых форм
Нарисуйте первую контактную позу с ногами, расставленными достаточно широко, чтобы поза считывалась в реальном масштабе спрайта. Держите стопы на линии земли. На следующем кадре слегка согните опорную ногу и немного опустите торс. В позе прохождения сведите стопы ближе и переместите маховую стопу под тело. В позе подъёма приподнимите пятку или всю стопу, движущуюся вперёд, пока другая нога держит вес тела. Затем перейдите к противоположному контакту и продолжите последовательность.
Воспринимайте каждую конечность как цельную фигуру от бедра до стопы. Не нужно переносить каждый сустав в пиксели: следите за общей стабильностью длины ноги и покажите сгиб колена за счёт изменения направления или контура. На крошечном спрайте для этого может потребоваться сдвиг всего на один-два пикселя. Если ноги сливаются в сплошной нечитаемый блок, разведите их шире или используйте временные цвета для ближней и дальней ноги, чтобы пояснить, какая из них проходит спереди. В руководстве по низкодетализированным спрайтам отмечается, что четырёхкадровые циклы подходят для маленьких персонажей, а чередование теней на ногах помогает различить ведущие ноги в таком коротком цикле. Manning Leonard Krull: «Tutorial: Walking animation for low-res sprites»
Сохраняйте читаемость торса и рук
Удерживайте торс и голову вокруг одного общего центра от кадра к кадру. Позвольте телу опускаться ближе к позе «down» и подниматься в фазе прохождения или подъёма шага, но сдерживайте покачивание: изменение даже в один пиксель на маленьком холсте может быть весьма заметным. Что касается рук, попробуйте отводить вперёд руку, противоположную выставленной ноге. Если правая нога идёт вперёд, то левая рука движется вперёд; поменяйте пару для следующего контакта. Рисуйте кисти рук и стопы достаточно простыми, чтобы они не сливались с конечностями.
Это лишь начальные формы для тестирования, а не универсальные правила. Тепло одетый персонаж, очень маленький спрайт или нарочито стилизованный дизайн могут потребовать меньшего размаха ног или более сдержанного взмаха рук. Практическое руководство по пиксель-арту также советует упрощать кисти и стопы, менять тон дальней конечности для создания глубины и подбирать пропорции в соответствии с задуманным стилем персонажа. Clip Studio Tips: «Tips and Configuration for Creating a Walking Cycle - PixelArt»
Добавляйте пиксельные детали только после отладки движения
Воспроизведите черновой цикл анимации, прежде чем добавлять лицо, складки, блики или аксессуары. Обратите внимание на четкую разницу между двумя контактными позами, понятное движение ног под торсом и положение головы, которая должна оставаться на одной линии, а не дергаться из стороны в сторону. Если спрайт выглядит так, будто он марширует на месте или пинается, сначала скорректируйте базовые формы конечностей. Детали могут скрыть проблему с движением, при этом существенно замедляя любые исправления.
Как только силуэты заработают правильно, верните персонажу исходную цветовую палитру и дорабатывайте элементы по одному. Делайте изменения локальными: если только дальняя нога меняет глубину, измените её цвет или область перекрытия, не сдвигая голову и торс. Волосы, свободный рукав или мелкий аксессуар могут слегка двигаться вместе с телом, но это необязательно. В упражнении по четырёхкадровому пиксель-арту Pinnguaq показывает, как добавлять легкое движение мелким деталям, таким как волосы и украшение на шляпе, уже после построения базового цикла. Pinnguaq: «Pixel Art 4A: Animation Basics In GraphicsGale»
Проверьте зацикливание, затем настройте тайминг
Просматривайте анимацию в постоянном цикле, а также проверяйте её покадрово. Сначала сравните восьмой кадр с первым: торс, голова, положение на земле и общий силуэт должны стыковаться без заметного скачка. Затем убедитесь, что две контактные позы соответствуют противоположным шагам, а опорная стопа не подпрыгивает по высоте. Если персонаж слишком сильно качается вверх-вниз, уменьшите вертикальное смещение; если ноги сливаются воедино, увеличьте расстояние между ними или скорректируйте перекрытие.
Вносите по одному изменению за раз, затем запускайте воспроизведение заново. Задержка кадров на таймлайне определяет, как долго каждый рисунок остаётся на экране, поэтому проверяйте скорость именно при воспроизведении, а не оценивайте рисунки только как статичные кадры. В руководстве от Pinnguaq рекомендуется проверять как анимированное превью, так и отдельные кадры, регулируя скорость с помощью задержки кадров. Pinnguaq: «Pixel Art 4A: Animation Basics In GraphicsGale»
Когда стоит использовать меньше или больше кадров
Восемь кадров дают достаточно пространства, чтобы показать четыре основные позы для обеих сторон. Если спрайт совсем крошечный, двух- или четырёхкадровый цикл может считываться лучше, поскольку требует меньше микроскопических правок; если переходы кажутся резкими, а размер холста позволяет, добавьте промежуточные кадры между ключевыми позами. Универсального количества кадров не существует. В руководстве от Adafruit описывается простая игровая ходьба примерно на шесть кадров и более плавные варианты — вплоть до двенадцати, тогда как в руководстве по спрайтам низкого разрешения рассматриваются варианты из двух, четырёх и восьми кадров. Adafruit: «Pixel Art for LED Matrix Displays», Manning Leonard Krull: «Tutorial: Walking animation for low-res sprites»
Завершайте работу, когда походка отчетливо читается в целевом размере, а переход от последнего кадра к первому выглядит непрерывным. Сохраните эту черновую версию, прежде чем добавлять лишние кадры или вторичное движение: так у вас останется четкая основа, к которой можно вернуться, если добавленные детали ухудшат читаемость движения.