• Главная
  •  > 
  • Красота
  •  > 
  • Как делать спрайты для игр. Введение в пиксельную графику (Pixel Art) для игр

Как делать спрайты для игр. Введение в пиксельную графику (Pixel Art) для игр

Здравствуйте, друзья! Эта статья изначально была написана как руководство по созданию спрайтов для ZX Spectrum на IBM PC в программе «Pro Motion». Чуть позже, по рекомендации редактора «Абзаца», я переписал ее, учитывая особенности самого удобного, на мой взгляд, графического редактора для ZX Spectrum - Burial Gfx Editor, на котором я создавал игровые спрайты в течение ряда лет, и до сих пор рисую в нем полноцветные картинки.

Процесс создания спрайта можно условно разделить на три этапа:

1. Рисование outline первого кадра.

2. Создание outline анимации всех движений персонажа методом «frame by frame» («кадр за кадром»).

3. «Раскраска» (dithering) готовой outline анимации, проработка теней и деталей.

Редактор BGE имеет два режима работы: полноэкранный и с увеличением. Основная работа будет проходить во втором режиме.


Этап 1. Outline

Outline, или обводка - это линии, которые ограничивают контур объекта и все его детали. Такую обводку можно наблюдать практически в любом мультипликационном фильме. Она служит для отделения персонажа от фона и акцентирования внимания на деталях самого героя. Проще говоря - это нераскрашенный персонаж.

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

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

Б. Наносить удар.

В. Использовать магию. (Если кому-то не нравится колдующий рыцарь, назовите его Палладин).

Г. Ставить блок.

Д. Попадать под влияние магии.

Е. Получать удар.

Ж. Как это ни грустно - умирать...

Неплохо для начала прикинуть, сколько кадров нужно для того или иного действия. Обычно программисты заранее задают количество кадров. Это плохо, так как для разных персонажей могут понадобиться различные количества кадров для выполнения одного и того же действия. Мудрым решением здесь является - задавать общее количество спрайтов на анимацию и использовать специальный файлик с номерами кадров и задержками.

Итак, расставим кадры: А - 2 (цикл), Б - 3, В - 3 (1 - подготовка, 2-3 - цикл), Г - 1, Д - 2 (цикл), Е - 2, Ж - 2.

Итак, начнем рисовать. Включаем режим увеличения и опцию «показывать границы знакомест» (можно включить отображение знакомест яркостью - кому как больше нравится).

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

Рисовать лучше в режиме OR.

Вот такой рыцарь (рис. 1). Коряво, но зато примерно видно, где что расположено.

Теперь начинаем улучшать рисунок, добиваясь правильных пропорций и расположения частей тела. Теперь работаем в режиме XOR (чтобы можно было ставить/удалять точки одной кнопкой мыши).

Здесь я исправил руку, перерисовал ноги, чтобы казались полусогнутыми и заменил меч на топор (потому что так будет легче рисовать, т.к. топор пол туловища закрывает, зрелищнее анимировать, да и вообще - люблю я топоры. Это у меня от «Golden Axe» пошло). Еще я пририсовал ему рога - чтобы заполнить пустое пространство вверху спрайта, и чтобы повнушительней парень смотрелся (рис. 2).

Ну и, наконец, готовая фигура (рис. 3). Проработаны руки, топор, рога, шлем и наплечники, и так, по мелочам…

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


Этап 2. Frame by frame

Есть два способа создания анимации - на основе ключевых кадров, и кадр за кадром. Ключевые кадры хороши, когда мы делаем крупного персонажа - тогда мы создаем его изображения в нужных нам позах, а промежуточные дорисовываем на «анимационном столе». Это такой столик, на который проецируется предыдущий и последующий кадры на котором, опираясь на них, удобно рисовать промежуточные кадры. Но для нашего случая такой метод непригоден, во-первых - из-за малого количества кадров, во-вторых - из-за размера: при «просвечивании» будет видна мешанина из пикселей, а в-третьих - BGE просто не поддерживает такую возможность. В общем - рисуем frame by frame.

А. Просто «стояние». Для начала нужно определиться, что же он в этих кадрах будет делать. Ну, например, пусть он поигрывает топориком и сгибает колени.

Создаем себе удобное рабочее место. Для этого переносим спрайт в левый верхний угол картинки (чтобы он отступал от верхней и левой границ экрана на знакоместо) копируем его рядом с самим собой, и копируем на второй экран (Paste+) в то же место. Т.е. новый кадр будет располагаться справа от исходного, и иметь на втором экране «под собой» копию исходного. Зачем это надо? Чтобы иметь возможность при рисовании в режиме увеличения контролировать качество, все время поглядывая на предыдущий кадр путем смены экранов (клавиша «L»).

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

Выделяем («B») топор и переносим вниз на пиксель. Можно, в принципе, перерисовывать попиксельно (не так уж там и много пикселей), но если можно сэкономить время - почему бы и нет?

На рис. 4 я перенес участок топора влево-вниз, чтобы показать выделение.

Контролируя анимацию («L»), перерисовываем (смещаем) древко топора на 1 пиксель, обрабатываем руку (заменяя кое-где пиксели, чтобы казалось, что она шевельнулась) и меняем положение пальцев.

Затем выделяем все туловище по коленки и переносим его вниз на пиксель. Смотрим нестыковки при помощи наших «волшебных» клавиш, и убираем их (нестыковки конечно). Рисуем коленки, стертые на предыдущем шаге, немного выступающими вперед. Контролируем качество.

Ура! У нас есть первые два кадра (рис. 3 и 5)! Чувачок забавно пританцовывает на месте, готовясь дать кому-то в репу. Хотя, с другой стороны - может он просто хочет в туалет?

Б. Удар! Нам нужно три кадра - замах (2) и удар (1). Добавляем еще один кадр в анимацию (как было описано выше).

Нам нужно поднять и повернуть топор. Ничего не поделаешь, BGE не поддерживает поворот на произвольный угол, поэтому перерисовываем вручную. Можно попробовать его перенести выделением, а потом уже на месте - повернуть.

Дорисовываем кадр. Мне пришлось слегка сместить топор вниз, потому что изначально я его неправильно расположил. Также я стер и заново нарисовал руку в новом положении, нарисовал открывшуюся часть брони сзади, переместил туловище на пиксель вниз, согнул колени и выдвинул левую ногу вперед (типа, для улучшения равновесия, хотя на самом деле - мне просто так захотелось). В конце я дорисовал открывшийся щит в левой руке персонажа (рис.6).

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

И, наконец, мой любимый, - последний кадр. Все вспоминаем «Golden Axe»:) Удаляем (либо просто методом AND, либо познакоместово) большую часть картинки (рис. 8).

После чего рисуем такую кривую (рис. 9) - «Путь топора». С первого раза может не получится - важно представить, как будет двигаться топор. Я переделывал кривую два раза. Тут помогает «контроль качества». Нормально нарисовать кривую я смог только когда понял, что топор в конце будет повернут плашмя.

Дальше делаем стандартную прорисовку. Мне пришлось даже скопировать «вниз» (на второй экран) опорный кадр и передвинуть там верхнюю часть, чтобы было видно (при нажатии «L», естественно), как прорисовывать части тела, скрытые рукой и топором на прошлых кадрах (рис.10).

С ударом разобрались. Теперь рыцарь может постоять за себя.

В. Колдуем. Сначала надо придумать, что же, собственно, он будет делать? Насколько я помню по играм и паре-тройке книжек - колдуны делают умное лицо и что-то там бубнят. У нашего героя лицо скрыто за шлемом, да и сомневаюсь, что лицо рыцаря можно сделать умным, поэтому пусть он просто разведет руки. А «бубнение» попробуем показать движением головы.

Копируем «опорный кадр» справа от готовых (если не влазит на экран - начинаем вторую линейку спрайтов).

Итак, топор. Начинаем с его перемещения. Так как правая рука идет к нам, топор должен «сжиматься» по законам перспективы. Это сделаем просто - выделим правую часть лезвия и придвинем ее к левой, затем выделим новое топорище и переместим его влево, ближе к кисти руки (рис. 11). Проверяем… Надо все-таки увеличить по вертикали, и сделать правый край выше. Но это уже будем делать ручками. Заодно проработаем кисть руки, древко топора и саму руку, чтобы казалось, что она разворачивается («L»!). Получилось великолепно! То есть так, как и задумывалось (рис. 12).

Теперь сделаем левую руку со щитом. Тут все просто - рисуем щит. Главное - попасть в размеры, чтобы зритель поверил, что его стало видно из-за топора, и не догадался, что его просто нагло пририсовали. Не забудьте и то, что буквально пару кадров назад он тоже был виден, так что имеет смысл проверить, как оно выглядит там.

Ну и теперь - голова. Никто не произносит заклинания смотря прямо (во всяком случае, про таких героев не пишут книжки и не снимают кино). Тут надо либо поднять голову к небу, либо бубнить себе под нос. Что же предпочтет наш рыцарь?

Перерисовываем голову, чтобы она смотрела вверх. Надо проконтролировать (какой клавишей?) реалистичность поворота - помните, что точка вращения находится не посередине черепа, а внизу, и смещена к затылку! Кстати, дальний рог необходимо переместить ниже и правее, ведь голова у нас находится в ракурсе, следовательно - подчиняется жестоким законам перспективы. Подкорректировав форму головы, получаем первый кадр «заклинания» (рис. 13).

Копируем его, и создаем второй кадр. Просто и жестко - опускаем топор на пиксель (я это сделал вручную), щит - тоже на пиксель (я сначала опустил, а потом поднял… и так и так - хорошо, но противоположные движения обычно смотрятся лучше), голову смещаем вправо на пиксель, и - вуаля (рис. 14)!

Правда, во время теста создается впечатления, что он читает рэп, поэтому добавим разных точечек/звездочек - мол магическая сила витает в воздухе.

Г. Блок. Снова добавляем в конце один кадр, копируем туда самый первый, и дублируем последний кадр.

Если при чтении заклинания рыцарь «раскрывался» на встречу магическим силам, то тут он должен «сжаться в комок», и закрыться от удара всеми доступными ему предметами. Реквизита мы ему выдали 2 штуки - щит и топор, ими он и попытается закрыться. Итак, начинаем!

Сначала выделим все туловище от рогов до коленок, и сдвинем его на пиксель влево и пиксель вниз (как будто приседает). Затем выделяем голову и смещаем на пиксель вниз - втягивает в плечи (рис. 15). Контролируем результат…

Выделяем лезвие топора, поворачиваем на 90 градусов против часовой стрелки, и ставим перед лицом. Вот что получилось (рис. 16).

Жмем «L». Несколько нереалистично… Ну да и понятно - топор получился наклоненным в сторону героя… Надо повернуть его вручную. Смотрите: я слегка развернул лезвие, уменьшил дальнюю часть, увеличил ближнюю (перспектива!), приблизил нижнюю часть к герою, чтобы древко оказалось наклоненным вперед. Удалил предплечье и нарисовал заново, изменив положение локтя и плеча (наплечник остался на месте!). Нарисовал древко и переместил коленки вперед (в который уже раз!) (рис. 17).

Далее - скопировал «вниз» кадр с персонажем, у которого открыт щит (второй кадр удара), и нарисовал щит здесь, ориентируясь на его положение в том кадре (не срисовал! Здесь щит приближен к телу, и слегка приподнят). Готово! Рыцарь «в домике» (рис. 18).

Д. На нашего рыцаря покусились при помощи мощного заклинания. Ему должно стать плохо… А давайте нарисуем, что он шатается туда-сюда?

Копируем и дублируем новый опорный кадр. Тело персонажа должно «расслабиться» и «осесть» под влиянием чар, поэтому - опустим голову и руки. Можно голову повернуть, чтобы было реалистичней, но мне лень, поэтому просто сдвинем ее на пиксель вниз. Топор же выделим и повернем чуток по часовой стрелке, чтобы потом древко располагалось параллельно земле. Также сместим его немного вниз и влево (рис. 19).

Далее - рисуем древко горизонтально (не забываем сместить его немного назад), меняем положение руки, дорисовываем детали… После контроля обнаружилось вот что: не похоже, что ему плохо. Похоже, что он просто расслабился. Самым простым выходом в этом случае (как бы ни было сложно) все-таки повернуть голову вперед. Оказалось, все не так страшно - меняем несколько пикселей, и голова реалистично понурилась (рис. 20).

Дублируем готовый кадр. Теперь надо сделать наклон вперед… К сожалению, в BGE мы не можем искажать выделение, но можно поступить хитро: мысленно разделим фигуру по вертикали на несколько частей и последовательно сдвинем их. Выделяем всего персонажа сверху по коленки, сдвигаем на пиксель вправо, затем полученную картинку выделяем по кисть руки и сдвигаем вправо, затем - по грудь и т.д. (рис. 21).

Видно, что топор тоже искажен. Копируем в предыдущем кадре лезвие и вставляем в этот, сдвинув вправо на пиксель. Исправляем мелкие неточности, контролируем полученные кадры и добавляем точечки/звездочки, символизирующие magic power (рис. 22).

Е. Быдыщщ! Наш герой получил в репу! Что же с ним при этом происходит? В реальной жизни полученный удар распространяется волной по телу, т.е., например, если пинок пришелся в грудь, то сначала смещается грудь, затем талия, голова, плечи, затем, бедра, предплечья, руки и т.д. Об этом необходимо помнить, когда мы делаем крупную многокадровую анимацию увечий. У нас же - всего два кадра и маленький спрайтик, но, тем не менее, выкидывать из головы это правило мы не будем. Во всяком случае - постараемся.

А пока - копируем и дублируем исходный кадр.

Решим, куда наш герой будет «получать»… Голова - самое безопасное место для рыцаря, поэтому - туда и вдарим! Сделаем просто - скопируем голову и развернем ее зеркально вокруг вертикальной оси. Затем - прилепим ее обратно, сдвинув назад.

Здесь уже надо серьезно поработать - во-первых слегка развернуть голову в сторону зрителя (сдвинув пиксели лица вправо), иначе она не сможет повернуться из-за наплечников, которые тоже нужно развернуть, как ближний, так и дальний. Также нужно сдвинуть грудь влево (три пикселя). После контроля видно, что не сильно реалистично смотрится (рис. 23). Попробуем выделить всю верхнюю часть по грудь, и сместить влево… Вот так - нормально! Дублируем этот кадр.

Со вторым кадром будет проще - смещаем тело по коленки вниз. Неплохо также сделать, чтобы он раскидывал руки - ко второму кадру удар уже должен до них дойти. Вспоминаем, что у нас уже есть хорошие «раскинутые руки» - в кадре «применения магии». Возвращаемся туда, копируем руки с топором и щитом и вставляем в наш кадр! Остается только убрать огрехи, проконтролировать «L»… В общем, убедится, что все красиво и органично… Я еще нарисовал слегка приподнятый носок левой ступни… Захотелось (рис. 24).

И последний штрих - на первом кадре рисуем мультяшный «БЫДЫЩЩ!» (рис. 25).

Ж. Ё-моё… Пришло время нашему герою умирать… Умирание - сложнее всего рисовать. Когда дело доходит до этого - уже привязываешься к герою, и как-то жалко его убивать (если это, конечно, не вампир, фашист или прочая мразь, которую «мочить» даже приятно).

Можно не копировать опорный кадр в конец, а просто продублировать последний кадр «получения удара», ведь в основном герой будет погибать после этого.

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

Сперва выделим топор и сместим его на пиксель вниз (воткнем в землю). Затем развернем обратно голову. Она получится несколько выступающей вперед, но исправлять не надо - так более трагично. Затем выделяем голову и наплечники и смещаем их вправо-вниз (как будто тело сильно наклонилось вперед) (рис. 26).

Затем дорисовываем руку в новом положении, передвигаем видимую ногу, исправляем наплечники и грудь, дорисовываем руку со щитом, и левое колено, высовывающееся из-за топора. Все время смотрим предыдущий кадр, чтобы все выглядело правильно и двигалось реально (рис. 27).

Дублируем кадр. Удаляем из него все, кроме топора, головы и предплечья. Берем голову, поворачиваем ее чуток по часовой стрелке и кладем на землю прямо перед топором. Здесь можно не рисовать «перспективные» рога, ведь мертвая голова может лечь как угодно (рис. 28).

Теперь обрабатываем - исправляем топор, рога и голову. Между рогами, на заднем плане, рисуем упавший щит, ногу сдвигаем на пиксель назад и сильнее сгибаем в области плюсны. Руку, держащую топор перерисовываем так, чтобы она смотрелась естественно (поворачиваем вперед вокруг оси запястья). Кисть руки тоже слегка меняем. Все лишние пиксели удаляем или (внизу) закрашиваем черным. В принципе готово, но я еще сдвинул весь кадр на пиксель назад, по-моему, так смотрится более динамично (рис. 29).

Все, outline анимация готова. Можно нажать на «Plaу» и насладится проделанной работой.


Этап 3. Раскраска

Это лучше всего делать в режиме XOR, попутно исправляя недостатки, которые мы просмотрели на предыдущих этапах. Чтобы точнее их выявить, имеет смысл перенести все спрайты в Sprite Master (или другую программу) и просмотреть анимацию целиком.

Для начала определимся, где будут тени. Откуда падает свет? Допустим, он падает справа-спереди. Значит, тени рисуем вот где:

задняя часть наплечника;

задняя часть плеча;

передний край локтя;

задняя часть предплечья;

затылок шлема;

под шлемом;

на левой части груди, под наплечником;

на боку (справа от локтя);

на правой руке (если влезет);

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

Определились? Теперь рисуем эти тени на каждом спрайте (рис. 30). Это очень быстро! Главное - следить, чтобы не убрались детали (такое происходит, когда шахматка подходит к какой-нибудь линии с обеих сторон). Как бы то ни было - все недочеты мы уберем потом. «Оттененные» спрайты на рис. 31, я удалил опорные кадры, чтобы не загромождать картинку.

Остался последний штрих - нанесение черных теней, «висячих пикселей», «эмуляция антиалиасинга (т.е. сглаживания)» и исправление мелких недочетов.

Черные тени надо делать с самой темной стороны тени. Тавтология, конечно… В общем, рисуем их так, чтобы объем фигуры стал еще более выраженным.

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

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

Вот простейший пример. Есть три картинки с логотипом одного чувака (рис. 32). В первом варианте можно видеть пиксели во всей их красе. Смотрится плохо, и четко видны лесенки, особенно на прямых линиях. Во втором варианте я просто удалил крайние пиксели в местах излома - смотрится сглажено, гораздо лучше, чем в первом варианте. Линии здесь выглядят более тонкими… В третьем варианте я, наоборот, добавил пиксели в местах излома, с обеих сторон. Результат аналогичный предыдущему, но линии выглядят более толстыми. Оба этих эффекта мы должны (и обязаны!) использовать в наших спрайтах, например - на рогах, на топоре и т.д.

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


Заключение

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

Пожалуйста, любые, комментарии, вопросы и пожелания отправляйте на мой e-mail: [email protected] или на форум zx.pk.ru

Мне будет приятно узнать ваше мнение. До встречи в новых играх!

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

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

Все три руководства обязательны к прочтению. Чтобы рисовать качественные спрайты, вам понадобится знать, что такое "dithering", как (и зачем) рисовать аккуратные линии и кривые вручную, почему не стоит бездумно пользоваться градиентом и как избежать pillow-shading"а.

Далее, вам следует выбрать редактор. Надеюсь, мне не нужно объяснять, почему не надо использовать MS Paint, однако DreamMaker - тоже не лучший выбор, и как ни странно, Photoshop - тоже (ибо использовать фотошоп для спрайтинга - все равно, что забивать гвозди микроскопом). Для спрайтинга есть немало специализированных редакторов, однако существует простой и удобный редактор Paint.NET , который к тому же содержит немало полезных для пиксель-арта функций.

Требования к спрайтам

Спрайты, в первую очередь, должны быть размером 32х32 и сохранены в формате PNG. Однако есть еще несколько требований, которые будут разъяснены на примерах.

Перед нами пример плохого спрайта. В чем его проблемы? Во-первых, очень плохо сделана форма. Во-вторых, расцветка. По всей видимости, автор спрайта просто сделал заливку при помощи инструмента, из-за чего получил две проблемы - слишком резкий переход между отдельными оттенками и слишком плоская форма. Задача шейдинга - добавить спрайту объем, тут же спрайтер добился прямо противоположного результата. Наконец, градиент на ручке, который вообще ни к селу ни к городу. Перейдем к следующему, куда более сложному примеру.

Итак, снова перед нами спрайт, изображающий ведро. Я не буду критиковать его художественные достоинства. Как маленькое изображение ведра он, безусловно, хорош, но как спрайт для игры совершенно не годится. Разберем подробнее ошибки, совершенные художником.

  1. Размер . Почему-то многие начинающие спрайтеры считают своим долгом заполнить изображением все отведенное им пространство в 32х32 пиксела. Так вот, так делать не стоит. Конечно, масштаба в игре нет, но такой огромный спрайт будет странно смотреться (если, конечно, он не изображает что-то действительно большое, вроде стационарной машины).
  2. Стиль. Старый спрайт изображал синее пластиковое ведро. Вдруг оно по непонятной причине превращается в помятое металлическое ведро серого цвета. Это изменение ничем не оправдано. Если вы собираетесь заменить спрайт на имеющийся, будьте последовательны и старайтесь, чтобы он был похож на старый. Далее, спрайт не подходит к стилистике игры. Несмотря на всю техническую отсталость, царящую в сеттинге, у нас все же космическая станция, а не дачный поселок, а это ведро выглядит так, что в нем только навоз носить. Наконец, оно просто слишком реалистично, что напрямую подводит нас к следующей проблеме.
  3. Теперь самая главная проблема, на которой следует заострить внимание - это палитра. Увы, эту ошибку совершают многие люди, которые умеют рисовать, но не имеющие опыта рисования именно спрайтов. Чтобы подробнее разъяснить эту проблему, приведу цитату одного из спрайтеров /tg/ под ником veyver .

То, что нужно понять о спрайтах - они не столько рисуются, сколько собираются, пиксель к пикселю. Навороченное затенение не нужно, просто выберите основной цвет, возьмите два более светлых и два более темных оттенка и затеняйте ими. Затенение для чего-то такого небольшого, как спрайт в SS13 не должно быть таким ДОХРЕНИЩА РЕАЛИСТИЧНЫМ, оно должно просто делать поверхности менее плоскими.

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

Итак, мы вернулись к первому спрайту... Чтобы его исправить!

  1. Изменим форму ведра, чтобы оно было больше похоже на ведро, а не на цилиндр.
  2. Изменим расцветку на менее аляповатую.
  3. Изменим форму затенения, чтобы придать ведру объем.
  4. Уберем ужасный градиент с ручки

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

Первые заказы

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

Адрес конференции: [email protected]

Начинающим Профессии Руководства
Ролевая игра
Руководство по отыгрышу роли Руководство по отыгрышу роли для продвинутых Психология убийства Психологические заболевания Знания персонажа
Режимы игры
Агент Синдиката Оперативник Синдиката Снаряжение Синдиката Революция Культ Культ Ратвара Волшебник Генокрад Мемо Мозговой червь Блоб Вампир Похититель Потусторонний
Инженерное дело

Пиксельная графика (далее - просто пиксель-арт) в наши дни все чаще и чаще напоминает о себе, особенно через инди-игры. Оно и понятно, ведь так художники могут наполнить игру великим множеством персонажей и не потратить сотни часов за моделированием трехмерных объектов и ручной отрисовкой сложных объектов. Если вы хотите научиться пиксель-арту, то первым делом вам придется научиться рисовать так называемые “спрайты”. Затем, когда спрайты уже не будут вас пугать, можете переходить к анимации и даже продаже своих работ!

Шаги

Часть 1

Собираем все необходимое

    Загрузите хорошие графические редакторы. Можете, конечно, и в Paint’е шедевры создавать, но это сложно и не очень удобно. Куда лучше будет работать в чем-то вроде:

    • Photoshop
    • Paint.net
    • Pixen

  1. Купите графический планшет. Если мышкой вы рисовать не любите, то планшет и стилус - вот что вам необходимо. Планшеты от Wacom, к слову, самые популярные.

    Включите “сетку” в вашем графическом редакторе. Собственно, если ваш графический редактор не поддерживает отображение сетки, то стоит задуматься о поиске другой программы. Сетка позволит вам четко видеть где и как будет находиться каждый отдельно взятый пиксель. Как правило, четка включается через меню “Вид”.

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

  2. Рисуйте карандашом с размером кисти в 1 пиксель. В любом графическом редакторе должен быть инструмент “Карандаш”. Выберите его, размер кисти задайте равным 1 пикселю. Теперь вы можете рисовать… пиксельно.

    Часть 2

    Отрабатываем основы

    Создайте новое изображение. Так как вы учитесь рисованию в стиле пиксель-арт, то замахиваться на эпические полотна не стоит. Если помните, то в игре Super Mario Bros. весь экран был 256 x 224 пикселей, а сам Марио уместился на пространстве в 12 x 16 пикселей!

    1. Увеличьте масштаб. Да, иначе вы просто не разглядите отдельные пиксели. Да, придется увеличивать его очень сильно. Скажем, 800% - это вполне нормально.

      Научитесь рисовать прямые линии. Вроде бы и просто, но если вы вдруг где-то в середине нарисуете дрогнувшей рукой линию в 2 пикселя толщиной, то разница будет бить по глазам. Рисуйте прямые линии до тех пор, пока вам не придется активировать инструмент для рисования прямых линий. Вы должны научиться рисовать прямые линии вручную!

      Научитесь рисовать кривые линии. В кривой линии должны быть, скажем так, равномерные “переносы строк” (что отчетливо заметно на рисунке чуть выше). Допустим, начиная рисовать кривую линию, нарисуйте прямую из 6 пикселей, под ней - прямую из трех, под ней - прямую из двух, а под ней - из одного пикселя. С другой стороны нарисуйте то же самое (зеркально отраженное, разумеется). Именно такая прогрессия считается оптимальной. Кривые, нарисованные по схеме “3-1-3-1-3-1-3”, не отвечают стандартам пиксель-арта.

      Не забывайте стирать ошибки. Инструмент “Стерка” надо настроить аналогично карандашу, сделав размер кисти равным 1 пикселю. Чем крупнее стерка, тем сложнее не стереть лишнее, так что все логично.

      Часть 3

      Создаем первый спрайт

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

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

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

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

        • Не жалейте деталей для наброска! Нарисуйте все, что хотите видеть на финальном рисунке.

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

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

      4. Доработайте контур наброска. В данном контексте можно, конечно, сказать иначе - сотрите все лишнее. В чем суть - контур должен быть в 1 пиксель толщиной. Соответственно, увеличивайте масштаб и стирайте, стирайте лишнее… или дорисовывайте отсутствующее карандашом.

        • Работая над наброском, не отвлекайтесь на детали - их черед еще придет.

      Часть 4

      Раскрашиваем спрайт

      1. Освежите в памяти теорию цвета. Посмотрите на палитру, чтобы понять, какие цвета надо использовать. Там все просто: чем дальше цвета друг от друга, тем больше они друг на друга не похожи; чем ближе цвета друг к другу - тем больше они похожи и лучше рядом друг с другом смотрятся.

        • Выберите цвета, которые сделают ваш спрайт и красивым, и не режущим глаза. И да, пастельных цветов следует избегать (если только весь ваш проект не выполнен в таком стиле).

      2. Выберите несколько цветов. Чем больше цветов вы будете использовать, тем более, так сказать, “отвлекающим” будет ваш спрайт. Посмотрите на классику пиксель-арта и попробуйте подсчитать, сколько цветов использовано там.

        • Марио - всего три цвета (если мы говорим о классической версии), да и те расположены на палитре чуть ли не вплотную друг к другу.
        • Соник - пусть даже Соник нарисован с большим количеством деталей, чем Марио, в основе все равно лежат всего 4 цвета (и тени).
        • Рю - чуть ли не классика спрайтов, как они понимаются в играх-файтингах, Рю - это большие участки, закрашенные в простые цвета, плюс немного тени для разграничивания. Рю, впрочем, чуть сложнее Соника - там уже пять цветов и тени.

      3. Разукрасьте спрайт. Инструментом “Заливка” разукрасьте ваш спрайте и не переживайте о том, что все выглядит плоско и безжизненно - на этом этапе иного и не предполагается. Принцип работы инструмента “Заливка” прост - он будет заливать выбранным вами цветом все пиксели того цвета, по которому вы кликнули, пока не дойдет до границ.

      Часть 5

      Добавляем тени

        Определитесь с источником света. В чем суть: вам нужно решить, под каким углом на спрайт будет падать свет. Определившись с этим, вы сможете сделать правдоподобно выглядящие тени. Да, “света” в буквальном смысле не будет, смысл в том, чтобы представлять, как он будет падать на рисунок.

        • Самое просто решение - предположить, что источник света находится очень высоко над спрайтом, чуть левее или правее его.

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

        • Если уменьшить настройку “Контраст” базового цвета, слегка увеличив настройку “Яркость”, то можно получить хороший цвет для отрисовки тени.
        • Не используйте градиенты. Градиенты - зло. Градиенты выглядят дешево, халтурно и непрофессионально. Эффект, схожий с эффектом градиентов, достигается с помощью приема “прореживание” (см. ниже).

      2. Не забудьте про полутени. Выберите цвет, находящийся между базовым цветом и цветом тени. Используйте его для создания еще одного слоя - но уже между слоями этих двух цветов. Получится эффект перехода от темной области к светлой.

        Нарисуйте блики. Блик - это то место спрайта, куда падает больше всего света. Нарисовать блик можно, если взять цвет, который будет чуть светлее базового. Главное - не увлекаться бликами, это отвлекает.

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

1. Подготовка холста и инструментов

Шаг 1
Выберите инструмент Карандаш (Pencil Tool). Он станет основным вашим инструментом на этом уроке. Задайте жесткий круглый наконечник кисти и примените к кисти приведенные ниже установки. Линия, создаваемая карандашом должна получаться очень резкой.

Шаг 2
Задайте Режим (Mode): Карандаш (Pencil) и примените показанные ниже установки:

Шаг 3
Включите отображение пиксельной сетки: Просмотр > Показать > Пиксельная сетка (View > Show > Pixel Grid). Если данный пункт меню не отображается, пройдите в меню Редактирование > Установки > Производительность (Preferences > Performance), и поставьте галочку на пункте Использовать графический процессор (graphic acceleration).

Замечание: сетка будет видимой только на вновь созданном холсте, при приближении 600% и более.

Шаг 4
Теперь пройдите в меню Редактирование > Установки > Основные (Preferences > General), или просто нажмите Control-K. В выпадающем списке “Интерполяция изображения” (Image Interpolation) выберите пункт По соседним пикселям (Nearest Neighbor). Так вы сможете быть уверены, что края вашего объекта будут оставаться достаточно резкими.

Далее пройдите в меню Редактирование > Установки > Единицы измерения и линейки (Preferences > Units & Rulers), где в выпадающем списке Линейки (Rulers) выберите пункт Пиксели (Pixels), чтобы видеть все размеры в пикселях.

2. Создания Спрайта

Шаг 1
Теперь, когда все подготовительные работы завершены, можно приступать к созданию самого Спрайта. Нарисуйте набросок персонажа с легко узнаваемым силуэтом. Постарайтесь не увлекаться его детализацией. Так же не обязательно использовать различные цвета. Набросок должен просто помочь вам наглядно представить, как будет выглядеть ваш персонаж. Для данного урока я выбрал космического солдатика.

Шаг 2
Активируйте Свободную трансформацию (Ctrl+T), и уменьшите высоту вашего персонажа до 60 пикселей.
Размер объекта отображается на панели Инфо (Info). Учтите, что настройки интерполяции должны быть точно такими же, какие мы использовали в шаге 4 предыдущего раздела. В данном случае это не столь критично, так как мы всего лишь преобразуем эскиз в пиксельный рисунок, но в будущем, работая над пикселизованными объектами, данные параметры следует контролировать.

Шаг 3
Приблизьте изображение примерно на 300-400%. Так будет нагляднее. Уменьшите Непрозрачность (Opacity) слоя с эскизом. Кликните по иконке создания нового слоя в нижней части палитры слоев. Создайте эскиз при помощи инструмента Карандаш (Pencil Tool).
Если ваш персонаж симметричен, как у меня, то достаточно нарисовать только его половинку, продублировать ее и отразить горизонтально: Редактирование > Трансформирование > Отразить горизонтально (Edit > Transform > Flip Horizontal).

Правило периодичности: старайтесь разбивать сложные фигуры на несколько простых элементов. Дело в том, что когда пиксели, образующие линию, наносятся по определенной “периодичной” системе, например: 1-2-3, или 1-1-2-2-3-3, такая линия, в отличие от беспорядочной, лучше воспринимается человеческим глазом. Однако данное правило выполнимо не всегда, и может быть нарушено, если этого требует форма создаваемой линии.


(две периодичные и одна беспорядочная линия)

Шаг 4
Когда эскиз будет готов, выберите основной цвет и окрасьте крупные элементы. Сделайте это на отдельном слое, созданном под слоем с эскизом.

Шаг 5
Смягчите внутреннюю часть эскиза, варьируя оттенки.

Продолжайте разнообразить оттенки. Как вы можете заметить, в процессе работы я подкорректировал форму некоторых деталей.

Шаг 6
Создайте новый слой и наложите на нем свет.
Установите этот слой в Режим наложения – Перекрытие (Overlay). Каким-нибудь светлым цветом прокрасьте поверхности, на которые хотите наложить свет. Размойте участки с наложенным светом пройдя в меню Фильтр > Размытие > Размытие (Filter > Blur > Blur).

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

Шаг 7
Нашему персонажу не хватает контрастности. Пройдите в меню Изображение > Коррекция > Уровни (Image > Adjustments > Levels), задайте настройки показанные ниже, чтобы подкорректировать полутона, после чего воспользуйтесь коррекцией цветового баланса: Изображение > Коррекция > Цветовой баланс (Image > Adjustments > Color Balance) создавая более холодные и более теплые варианты.


(законченный персонаж при приближении 400%)

3. Анимация Спрайта

Шаг 1
Создайте копию слоя: Слои > Новый > Скопировать на новый слой (Layer > New > Layer Via Copy), и сместит его на 1 пиксель вверх и на 2 вправо, используя для этого инструмент Перемещение (Move Tool (V)) и соответствующие клавиши со стрелками. Это ключевая фаза при анимации шагающего персонажа.
Уменьшите Непрозрачность (Opacity) оригинального слоя до 50%, чтобы получить возможность видеть предыдущий кадр анимации.

Шаг 2
Теперь изогнем ноги и руки Спрайта, так, как будто он шагает.
- выделите левую руку при помощи инструмента Лассо (Lasso Tool)
- при помощи Свободной трансформации (Ctrl+A), и удерживая клавишу Ctrl, сместите опорные точки контейнера трансформации так, чтобы рука оказалось немного ниже шеи
- выделите голень правой ноги и сместите ее вниз, как на первом кадре
- выделите левую ногу и подтяните ее вверх – она должна быть немного согнутой
- при помощи Карандаша (Pencil) и Ластика (Eraser Tool) перерисуйте локоть правой руки

Шаг 3
Далее нам предстоит нарисовать новое положение рук и ног, точно так же, как я показал в шаге 2. Дело в том, что трансформирование рук и нок изменяет положение пикселей, и линии утрачивают свою прежнюю четкость.

Шаг 4
Создайте копию второго слоя и отразите ее горизонтально. Так у вас получится в, общей сложности, три положения: два – в шагающей фазе, одно – в исходной. Снова увеличьте Непрозрачность (Opacity) всех слоев до 100%.

Шаг 5
Пройдите в меню Окно > Шкала времени (Window > Timeline), и нажмите по кнопке Создать анимацию кадра (Create Frame Animation).

Проделайте следующие шаги:
1. Задайте задержку кадра: 0.15 секунды
2. Кликните по кнопке создания копии выделенных кадров 3 раза (будут созданы 3 копии)
3. В выпадающем списке с параметрами цикла выберите вариант Постоянно (Forever)

Шаг 6
Чтобы правильно выбрать нужный слой для каждого кадра, кликните по пиктограмме в виде глаза рядом с названием слоя на палитре слоев.
Итак:
1 кадр: исходная позиция
2 кадр: второй слой
3 кадр: снова исходная позиция
4 кадр: третий слой

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

(законченная анимация при 100% приближении)

Шаг 7
Сохраните результат своей работы. Пройдите в меню Файл > Сохранить для WEB (File > Save For Web), и выберите формат GIF. Увеличьте масштаб изображения до 300%, и нажмите Сохранить (Save).

Урок закончен!
На данном уроке вы узнали как в фотошопе создается анимированный пикселизированный персонаж. Теперь вы умеете готовить холст и необходимые инструменты, а так же, рисовать и анимировать персонажа, используя для этого Карандаш и шкалу времени. Надеюсь, вы научились здесь чему-то новому и сможете использовать описанные приемы при работе над собственными проектами.

Часть 8: Наконец-то рисуем спрайт

Итак, теперь, когда вы прочитали предыдущие главы, провели собственные наблюдения и сделали выводы о том, как устроены спрайты и всё такое (если же вы не делали ничего из этого списка, тогда наверстайте упущенное, ибо это облегчит вашу жизнь, когда придёт время рисовать собственные спрайты)... В общем-то, это время пришло. Мы разберём несколько стилей и для начала возьмём классический и наиболее широко распространённый в ролевых играх стиль Final Fantasy 2. Даже если вам неинтересно делать маленькие спрайты 16х16 и вы хотите научиться создавать только большие, всё равно вам будет полезно прочесть этот текст до конца... Занимаясь маленькими проектами, можно научиться многим полезным вещам, которые пригодятся и при создании крупноразмерных шедевров. Учитесь в любой ситуации. От вступительных слов перейдём к спрайтам FF2:

Первое, что следует знать о FF2-спрайтах: в них используется особая разметка... Над текстом вы видите квадрат 16х16... Вдоль левой стороны идут цветные вспомогательные линии. В спрайте FF2 талии отведено три пиксела (нижняя оранжевая линия), торс - часть туловища от шеи и до талии - также занимает три пиксела (жёлтая линия), голова получает целых 10 пикселов (верхняя оранжевая линия). В разговорах о спрайтах знающие люди часто упоминают аббревиатуру "SD"... Термин SD расшифровывается как "Super Deformed" ("Сильно Деформированный") и используется в аниме для описания сцен, в которых персонаж, прежде нормально нарисованный, уменьшен и похож на куклу, и его голова такого же размера, как и остальное тело... Этот подход использовался в FF2 и во многих ранних RPG, потому что почти все они были созданы в Японии, а SD - это приём как раз из тамошних аниме, к тому же, подобный стиль хорош для выражения эмоций персонажа. На Западе мы склоняемся к "реалистичным" персонажам с маленькими головами и пропорциональными телами. Однако в прежние дни правдоподобностью приходилось жертвовать, ведь на отведенном пространстве 16х16 реалистичная голова занимала бы два пиксела в ширину и четыре в высоту... Может, это и пропорционально, зато смотрится плохо - получаются безликие персонажи, а лицо в данном случае очень важно, так как игрок идентифицирует себя скорее по лицу, чем по другим признакам. Большие головы были так широко распространены потому, что на них есть место для изображения чувств... Персонажи с крупными головами могут кивать, мотать головой из стороны в сторону, удивленно моргать, расширять глаза от ужаса, зажмуриваться, зевать, кричать и т.д. Они становятся "живыми", а значит, более интересными... На маленькькой "реалистичной" голове вы можете лишь изменять цвета и тени всего у шести пикселов, и от этого мало толку. Пропорциональными стоит рисовать персонажей на больших спрайтах (как, например, в игре Phantasy Star IV). В общем, вы поняли, почему SD-стиль продержался так долго, хех... Впрочем, это лишь мои домыслы, я могу и ошибаться.

Начнём с базовой головы. Это - пиксел за пикселом - контур головы FF2-шного спрайта... Многие художники, когда им нужно много спрайтов в одном стиле, рисуют "модель" типичного персонажа, которую затем видоизменяют для каждого героя. Это и впрямь хорошая идея, если придётся делать кучу персонажей (например, городских NPC)... Только убедитесь, что в каждом спрайте достаточно индивидуальности, избегайте простой смены цветов, как в Mortal Combat, например, хех... Итак, базовая голова: два пиксела между глазами, они сами в высоту тоже два пиксела, есть однопиксельный пробел между ними и краями головы, такой же пробел до челюсти. Вместе выглядит пропорционально. Причём занято ещё не всё отведённое место... Куча пространства оставлена под волосы, так как они тоже важны, хех... Туловища спрайтов 16х16 в высоту занимают всего шесть пикселов и отличаются друг от друга только цветами да парой-другой пикселов. Поэтому для лучшего визуального опознавания персонажи получают сильно разнящиеся причёски. Волосы могут быть всевозможными - короткими, длинными, с пробором сбоку или по центру, завязанными в хвостик, заплетёнными в косички, собранными в пучок, могут вообще отсутствовать или даже торчать шипами и т.д... Это хороший способ дифференциации персонажей, поэтому волосы получают много места на рисунке. Если закрасить спрайты чёрным цветом, то есть оставить силуэты персонажей, более-менее достоверно различать их можно будет только по форме причёски. Двигаемся дальше - заметили, что челюсть опускается до конца оранжевой линии?

Теперь добавим корпус... Я нарисовал один кулак впереди, а другой сзади. В старых играх спрайты постоянно переключались с кадра, где левая нога впереди, на кадр, где впереди правая, и наоборот... Это был способ избавиться от третьего "стоячего" кадра "ноги вместе, руки по швам". Я взял кадр, в котором персонаж находится в середине своего шага - хочется отметить некоторые тонкости текущей позы. Во-первых, я не разделил руку и корпус. Можно было бы (кстати, получилось бы подобие некой жилетки), но я не стал так делать... Пускай это будет обычный персонаж в штанах и футболке. Как вы помните, жёлтая линия определяет расстояние от низа челюсти до талии, поэтому у вас будет два пиксела для грудной клетки, ещё пиксел займет линия талии (кроме случаев с платьем или незаправленной футболкой и т.п.)... Я упомянул о линии, так как, посмотрите, плечи зашли за оранжевый разделитель. Это потому, что наш взгляд на мир не является ни прямым фронтальным видом, ни видом сверху. У нас вид "сверху вниз" ("top down"; этот термин часто используется при описании игр типа Final Fantasy). Вы смотрите сверху вниз под углом примерно 45 градусов, поэтому видны передние и верхние части строений (угол в 45 градусов обычно используется в изометрических играх, например в Diablo, где шаблоны расположены по диагонали, вместо обычного расположения сверху вниз. Многие люди не понимают, что значит "изометрия" (вам это понятие встречалось на уроках черчения, хех), поэтому при обсуждении стиля FF и т.п. говорят "сверху вниз" вместо "45 градусов"... Сконфужены? Хехех...). Так как у нас вид сверху вниз, мы можем видеть верхнюю часть плеч персонажа немного "позади" его головы... Представьте обычного человека, на которого вы смотрите сверху вниз. Чем больше высота, с который вы на него смотрите, тем большую зону плеч вы видите и тем дальше они заходят за голову. Очень многие делают ошибку, рисуя персонажей во фронтальном виде спереди для карт с видом сверху вниз... Если честно, насчёт видов можно особенно не заморачиваться... Сойдёт и так... Но в нынешние времена следует уделять больше внимания таким моментам. В былые дни славы NES разработчики так сильно извращались с перспективой, что сегодня это выглядит смешно. В то время это не имело значения из-за общей недоразвитости графики, людей больше интересовал геймплэй. Будет время, зацените карту подземелья в игре Zelda для NES-приставки... Комната сделана с учётом вида прямо сверху, герой Линк нарисован в виде сверху вниз, а статуи и прочий антураж исполнены во фронтальном виде, хех...

Теперь появились ноги. Опять же, они как бы в положении шагания, а не в обычной позиции... Хочу показать пару моментов... Я не нарисовал чёрную линию вдоль низа ступни, ибо мне нужен нижний ряд пикселов для изображения ноги, а ваш глаз сам дорисовывает иллюзорную линию под ногой от левого чёрного пиксела до правого (вы уже знаете об этом, если читали предыдущую главу... если нет, то прочитайте её). Правая нога чувачка (та, что впереди) вниз идёт не прямо, а как бы под углом... Это для анимации. Если бы ноги шли прямо вниз, когда они впереди тела, и были бы ровно вверху, когда они позади, то всё вместе выглядело бы так, будто персонаж топает поочерёдно левой и правой ногой вместо ходьбы. Искривляя немного ногу, мы придаём ей более естественный вид при шагании. Нога, оставшаяся позади, - это просто ряд пикселов. Сейчас она похожа на какой-то обрубок... Мы покажем, что это нога сзади, когда займёмся цветами. Также заметьте, что талия - НЕ прямая, она скруглена, и ноги заходят в жёлтый разделитель, соединяясь с ней. Это тоже из-за вида сверху вниз. Горизонтальная линия талии является грубой ошибкой... Из-за этого персонаж становится "жёстким" и как бы картонным на вид. Небольшое изгибание линии придаёт объём всему контуру, как будто мы смотрим на цилиндр (представьте трёхмерное изображение).

Наконец-то у него появились волосы. На них вы, вероятно, потратите большую часть времени... Один пиксел может испортить или улучшить причёску, и, пожалуй, вы будете постоянно жонглировать пикселами, пытаясь получить хорошие очертания. У нашего человечка волосы зачёсаны набок. Я добавил недостающий пиксел наверху для изображения пробора, просто ради примера, хехе... Заметьте, что его волосы не пересекают лицо сплошной чёрной линией... Будь линия сплошной, голова и волосы разделялись бы слишком сильно (и смотрелись бы примерно как корпус и ноги), поэтому стоит использовать разделением цветом. Я добавил немного чёрного под частями волос, которые свободно спадают, так как я хотел показать, что они именно нависают, а не прилизаны гелем или ещё чем. Основная линия волос проходит так же далеко от глаз, как и челюсть, имеется один разделительный ряд пикселов между ними. Это не обязательно, так как у разных персонажей будут различные причёски, это всего лишь пример, так, для начала. Вам наверняка придётся поработать над волосами основным цветом и чёрным одновременно, чтобы выяснить, где для разделения не нужны чёрные пикселы... Ну а я уже нарисовал свой миллион спрайтов, у меня получается собирать их мысленно, хехех... У этого паренька волосы идут прямо до верха спрайта, у остальных может быть по-другому. Например, у невысоких людей или у детей, а также у лысых, поскольку сама голова находится на растоянии один-два пиксела от волос. Конечно, когда рисуются дети или коротышки, потребуется экспериментировать с пропорциями и, например, отвести не шесть, а лишь четыре пиксела на тело.

Я заполнил спрайт сплошными цветами (без теней). Рассмотрите его волосы, футболку и ботинки. Я сделал причёску красно-коричневой, чтобы выделить лоб справа, а так как с той стороны под волосами нет чёрного, кажется, что эти пряди ближе к голове, чем вихор с другой стороны. Также я оставил пустой пиксел там, где чёрная линия прерывается из-за пробора... Если бы я поставил там точку того же цвета, что и волосы, казалось бы, что на макушке торчит хохолок... Чёрный пиксел в этом месте делал бы причёску слишком приглаженной, и только пустота создаёт эффект отдельных прядей. Один пиксел может внести существенную разницу в восприятие спрайта. Его футболка похожа на безрукавку... Чтобы сделать из неё жилетку, можно добавить чёрный контур, а чтобы превратить её в обычную футболку, нужно поставить белый пиксел на плече рядом с остальной белой массой. Этот единственный пиксел образует "рукавчик" на руке. Для длинных рукавов мне нужно закрасить белым всю руку, кроме последнего пиксела. Позже я покажу кучу подобных фишек.

Теперь добавим оттенки цвета и получим готовый спрайт. Когда вы наносите тени, старайтесь делать так, чтобы свет падал из одной точки... Сейчас источник света находится справа вверху, поэтому тени появились на левой и нижних частях спрайта. В массах очень популярен такой ненапряжный способ: левая и правая стороны затеняются, средняя же часть оставляется светлой... Получается, что источник света расположен прямо по центру. В принципе, это сносно, но спрайт становится немного скучноватым, ибо у него нет "права и лева", есть просто "центр"... Трудно объяснить, наверное, дело в том, что симметричные спрайты менее интересны... С затенением на одной стороне у спрайта появляются вполне определённые право и лево. Тем не менее, нет строгого правила, гласящего, насколько тёмной должна быть тень. Подбирайте, пока не будет смотреться хорошо. Правда, стоит помнить о некоторых моментах... Если у вас яркие источники света (например, действие происходит в середине дня, персонаж стоит у огня и т.п.), тени будут очень тёмными, сильно контрастирующими с обычными цветами. Если свет тусклый (внутри дома, в ночное время и т.п), контраста будет меньше. Я не хочу сказать, что вам обязательно будет нужно разное освещение на спрайтах в зависимости от местоположения, просто имейте в виду, какие эффекты затенения могут быть. Запомните еще приём - сощурьте глаза и взгляните на спрайт: если невозможно отличить светлый оттенок от тёмного, возможно, для них вам нужно больше контраста. Зачем наносить эти тени, если разница незаметна? Это особенно проявляется при использовании жёлтого цвета... Бывает трудно заметить разницу, если чуть добавить тусклости в некотором месте. Лицо, важнейшая часть персонажа, показывает чувства и обычно не сильно контрастно остальной части спрайта... Если контрастность велика, спрайт развалится на цветные куски, что раздражает глаз. Впрочем, при рисовании подобных вещей нет закономерности. Оставляйте то, что выглядит хорошо. В некоторых играх лица были одного цвета, и поэтому детали (глаза, хех) хорошо выделялись. Я сделал кожу нашего спрайта сильно контрастной, и это немного смущает. Рассмотрим нижнюю часть. Нога сзади полностью тёмная, и вы не можете видеть ступню. Нижний черный контур помогает задвинуть её назад ещё больше... Эта линия вполне могла быть тёмно-коричневой, тогда казалось бы, что он поднимает ногу. Ближняя нога ОБЯЗАНА получить больше света, чтобы она выглядела как нога, выставленная перед телом. Его ботинок отделен лишь цветом, также посмотрите на его руки... Дабы его рука выглядела ближней к нам, был добавлен лишь один пиксел тени... Чем больше тени на чём-то, тем дальше оно от нас... Я затенил тёмным цветом всю поверхность другой руки, чтобы сделать её отдалёной. Тем не менее, на кулаке лежит меньше тени, поэтому кажется что остальная рука позади него, и это хорошо. Как я уже говорил, один пиксел может изменить многое, и сейчас мы в этом убедимся:

Вы, наверное, думаете "Что за...?" На первый взгляд, все эти спрайты похожи между собой... Но у них есть различия в один пиксел... Посмотрите на передний кулак. И я покажу, что может сделать одна жалкая точка... Базовый кулак в первой картинке - это просто круг, без угловых пикселов. В результате он выглядит эдаким деликатным кулачком, как у человека с маленькими руками. Вы не можете хорошо описать эти кулаки, как их ни крути - не изменятся. Во втором случае имеется угловой пиксел слева внизу... Теперь кулак как будто прижимается к ноге. Быть может, парень пробирается бродом, или карабкается по камням, или ещё что, это всё из-за направленности кулака вниз... В третьем спрайте угловой пиксел слева вверху. Теперь он указывает на лицо, кстати, пальцем, а не локтём, ибо нижний правый угол скруглён. Получается, что он показывает: "Хто, я?" Четвёртый спрайт имеет пиксел в правом верхнем углу, и движение руки показывает: "Ну, попробуй достать меня!"... Локтя не видно, и пальцы немного направлены к голове. Как бы делает апперкот от себя... или проклинает игрока, хех. У последнего спрайта пиксел внизу справа, и это похоже на локоть, ибо это его естественное положение (в третьем спрайте вы не можете принять тот пиксел за локоть, ибо было бы очень странно видеть локоть именно там, поэтому наш мозг принимает его за пальцы)... Теперь кажется, что он делает апперкот, направленный к себе. Может быть, это начало движения "удар дракона" или ещё чего, хехех. А казалось бы, всего лишь ОДИН пиксел.

Здесь я работал двумя пикселами... В первом случае получилась плоская сторона, направленная внутрь. Два пиксела сделали кулак гораздо более плоским, как будто он кого-то шлёпает им... Ну, похоже, будто он сильно сжал кулак. В первом спрайте кулак прижат внутрь, и выглядит это вполне нормально. Но представьте себе, что он держит что-то похожее на вазу - хочет показать всем свою силу. И поэтому перемещает пикселы вверх... Теперь плоская сторона наверху, как будто балансирует на ней горшком или лампой. В третьем случае плоские стороны находятся по бокам, что выглядит скажем... не очень хорошо. Хых... единственный способ объяснить такое положение кулака, это наличие у него на руке чего-то вроде бронированной квадратной рукавицы, это можно было бы потом показать цветом... У последнего плоская часть находится внизу, он мог бы играть в баскетбол этой рукой или бить кого-то. А самое интересное - что это всего лишь ДВА пиксела, хехе... Теперь попробуем тремя:

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

Давайте изучим руку, отведенную назад. На первом спрайте у неё нет угловых пикселов, и она похожа на щупальце или ещё что-то подобное... Будто руку расслабили, как-то так... Болтается там, как хвост какой-то. На второй картинке кулак направлен к корпусу, как будто персонаж напряг мускулы и сделал эдакий полукруг из руки. У третьего спрайта пиксел поставлен снаружи, из-за чего рука кажется отнесенной чуть в сторону, в отличие от предыдущего образа, где рука ощущалась ближе к телу. Мужичок на втором спрайте похож на крутого парня, фланирующего туда-сюда, а на третьем - на бегуна, у которого руки находятся в соответствующем положении. У персонажа на последнем спрайте имеется плоская линия внизу кулака, будто он опять играет в баскетбол, или у него пистолет в руке, или это часть брони, или у него просто большой кулак, и т.д... Взгляните на секунду ещё на два спрайта:

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

Итак, у нас есть базовый спрайт персонажа, и если наш герой не парализован и обладает разумом, то ему хочется двигаться и совершать при этом какие-то действия.... Он может просто шагать по городу куда глаза глядят, повторяя: "Добро пожаловать в (город такой-то)!", хех. Значит, нам нужен второй кадр для шагания... Осуществляется это легко. Слева наш прежний спрайт, а в среднем спрайте я взял кусок до конца желтой линии и перевернул в горизонтальной плоскости. Видите, как просто? Конечно, возникла проблема с перевёрнутым освещением, ибо получилось, что солнце перепрыгнуло с одного края неба на другой. Это, пожалуй, не очень хорошо, и поэтому мы подправим цвета теней, чтобы освещение было такое же, как и в первом кадре. У нас теперь есть два кадра для этого малого, и мы можем увидеть его анимированным:

Это простая анимация ходьбы из двух кадров. Если вы строгаете маленькие спрайты для маленького же разрешения, то двух кадров может быть вполне достаточно для достижения нужного эффекта. В ранних Final Fantasies (на Геймбое) персонажи постоянно переключались между двумя своими кадрами, даже когда они стояли. Скажем, вы такого не хотите... Вы желаете, чтобы, когда игрок не нажимает клавиш, персонаж прекращал анимацию. Ну, вы можете останавливать персонажи после прекращения движения в положении с одной ногой впереди или сзади. Если они при этом не выглядят напряжёнными - это нормально. Но вдруг вам потребуются прямостоящие персонажи?

Чтобы получить этот кадр, я просто переделал один из шагающих, сведя ноги вместе и прижав руки по швам. Руки будут выглядеть более расслабленными, если придать им "выпуклость"... Если бы остались три вертикальных пиксела, он был бы похож на солдата, стоящего по стойке "смирно" в строю. При создании стоячего кадра для этих маленьких спрайтов 16х16 возникает проблема двойного столбца... Придётся вам выбрать, где пикселы будут разделять ноги. Я сделал одинаковые тени на ногах (те два горизонтальных пиксела), чтобы ноги казались находящимися прямо под корпусом. Если бы на левой ноге не было ни одного светлого пиксела, казалось бы, что она чуть позади правой. А если бы их было много, нога опять выдвинулась бы, но уже вперёд. Теперь у нас есть "стоячий" кадр, можно его использовать, когда игрок ничего не делает. Есть также другая польза от этого кадра... Можно добавить его в анимацию ходьбы:

Часть 3. Градиент - это зло
  • Часть 8. Наконец-то рисуем спрайт