Как нарисовать спрайты для игры программа. Перекрытие и параллакс. Рисуем Pixel Art персонажа

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

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

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

Pixel Art (Пиксельная графика) даже в наши дни очень популярна для игр и тому есть несколько причин!

Итак, чем же подкупает Pixel Art:

1. Восприятие. Pixel Art выглядит потрясающе! Можно многое рассказывать о каждом отдельном пикселе в спрайте.
2. Ностальгия. Pixel Art возвращает большое ностальгическое чувство для геймеров, которые выросли, играя Nintendo, Super Nintendo, или Genesis (как я!)
3. Простота обучения. Pixel Art - одно из самых простых для изучения видов цифрового искусства, особенно если вы скорее программист, чем художник;]

Итак, вы хотите попробовать свои силы в Pixel Art? Тогда следуйте вместе со мной и я покажу вам, как сделать простого, но эффектного игрового персонажа, которого вы сможете использовать в вашей собственной игре! Кроме того, в качестве бонуса, мы рассмотрим как интегрировать его в iPhone игры!

Для успешного обучения вам понадобится Adobe Photoshop. Если же у вас нет его, вы можете скачать бесплатную пробную на сайте Adobe или на торренте.

Что такое Pixel Art?

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

Градиент : выбор двух цветов и расчета цвета пикселей, находящихся между ними. Выглядит круто, это но не Pixel Art!

Инструмент Размытие : определение пикселей и тиражирование/редактирование их, чтобы сделать новую версию предыдущего изображения. Снова не пиксельная график.

Инструмент Сглаживание (в основном, генерирующих новые пиксели в различных цветах, чтобы что-то сделать "гладким"). Вы должны избегать их!

Некоторые скажут, что даже автоматически генерируемые цвета не Pixel Art, поскольку предполагают наличие слоя для смешивания эффектов (смешивания пикселей между двумя слоями по заданному алгоритму). Но, так как большинство устройств в настоящее время имеет дело с миллионами цветов, - это утверждение можно проигнорировать. Тем не менее, использование небольшого количества цветов - хорошая практика в Пиксельной графике.

Другие инструменты, такие как (линия) или paint bucket tool (ведро с краской) также автоматически генерирует пиксели, но, поскольку вы можете настроить их на не сглаживание крев заполняемых пикселей, считается что эти инструменты дружественны к Pixel Art.

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

Начало работы

Прежде чем начать делать свой первый Pixel Art ассет, вы должны знать, что Pixel Art нельзя масштабировать. Если вы попытаетесь его уменьшить, все будет выглядеть смазанно. Если вы попытаетесь его увеличить, все будет выглядеть приемлимо до тех пор, пока вы используете масштабирование кратное двум (но, конечно, четкости не будет).

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

К примеру, если Вы хотите, чтобы игра выглядела увеличенной вдвое на экране iPhone 3GS (“Да, я действительно хочу придать пиксельного ретро-вида своей игре!”), разрешение экрана которого – 480х320 пикселей, то работать надо с разрешением, вдвое меньшим, в данном случае это будет 240х160 пикселей.

Откройте новый документ Photoshop (File → New… ) и установите такой размер, каким будет размер вашего игрового экрана, после чего выберите размер для вашего персонажа.

Я выбрал размер 32×32 пикселя не только потому, что он отлично подходит для выбранного размера экрана, а еще и потому, что 32×32 пикселей также кратны 2, а это удобно для движков игрушек, (размеры тайлов часто кратны 2, текстуры выравниваются кратно 2 и т.д.

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

Рисуем Pixel Art персонажа

Pixel Art, как известно, - это четкая и легко читаемая графика: вы можете определить черты лица, глаза, волосы, части тела с помощью нескольких точек. Тем не менее, размер изображения усложняет задачу: чем меньше ваш персонаж, тем труднее их нарисовать. Чтобы подойти к задаче более практично, выберите то, что будет самой маленькой по размеру из черт характера. Я всегда выбираю глаза, потому что это один из лучших способов вдохнуть жизнь в персонажа.

В Photoshop выберите Pencil tool (Инструмент Карандаш). Если вы не можете найти его, просто нажмите и удерживайте инструмент Brush Tool (Инструмент Кисть) и вы сразу же его увидите (он должен быть вторым в списке). Вам просто нужно будет изменить его размер, сделав его равным 1px (вы можете нажать на панели параметров инструмента и изменить его размер или просто удерживайте клавишу [).

Также вам понадобится Erase tool (Инструмент Ластик), так что нажмите на него (или нажмите клавишу E) и измените его настройки, выбрав из выпадающего списка Mode: (Режим:) Pencil (Карандаш) (т.к. в этом режиме нет сглаживания).

А теперь начнем пикселить! Нарисуйте брови и глаза как показано на изображении ниже:

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

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

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

Если вы чувствуете, что инструментом Карандаш слишком медленно рисовать, вы всегда можете использовать (Инструмент Линия), просто помните, что расположить пиксели так же точно, как с помощью карандаша, не получится. Вы должны будете настроить так, как показано ниже:

Выберите , нажав и удерживая Rectangle tool (Инструмент Прямоугольник)

Перейдите к панели параметров инструмента, в выпадающем списке Pick Tool Mode (Режим Вычерчивания Контура) выберите Pixel , изменить Weight (Толщина) на 1px (если это уже не сделано) и снимите флажок Anti-alias (Сглаживание). Вот как у вас должно быть:

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

Применяем цвета и тени

Теперь вы готовы, чтобы начать раскрашивать нашего персонажа. Не беспокойтесь о выборе правильных цветов, их очень легко будет изменить позже, просто убедитесь, что у каждого "свой цвет". Воспользуйтесь цветами по умолчанию на вкладке Swatches (Window → Swatches).

Раскрастьте вашего героя как на рисунке ниже (но не стесняйтесь проявить творчество и использовать свои собственные цвета!)

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

Не стоит тратить время на закрашивание каждого пикселя. Чтобы ускорить работу используйте линии для одинакового цвета, или Paint bucket tool (Инструмент Ведро с краской), чтобы заполнить пробелы. Его, кстати, тоже придется настроить. Выберите Paint bucket tool на панели инструментов (или просто нажмите клавишу G) и изменить Tolerance (Допуск) на 0, а также снимите галочку с Anti-alias (Сглаживание).

Если вам когда-нибудь потребуется использовать Magic Wand tool (Инструмент Волшебная палочка) - очень полезный инструмент, который выбирает все пиксели с одинакового цвета, то настройте его также как и инструмент "Ведро с краской" - нет допуска и сглаживания.

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

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

А теперь, как я и обещал небольшой гид по свету и теням:

Придаем пикантность вашей палитре

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

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

Затем, в окне Color Picker, просматривайте правую боковую панель, чтобы выбрать цвет и главную область, чтобы выбрать нужную яркость (светлее, или темнее) и насыщенность (сочнее, или скучнее).

Как только вы найдете нужный, нажмите кнопку ОК и перенастройте инструмент Ведро с краской . Не волнуйтесь, Вы потом сможете просто снять отметку с квадратика ‘Contiguous’ (Смежные пиксели), и, когда Вы будете рисовать новым цветом, все новые пиксели с таким же фоновым цветом тоже будут закрашены.

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

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

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

Как вы могли уже видеть, я выключил сглаживание во всех инструментах, которые я использовал до сих пор. Не забудьте это сделать и в других инструментах, например, Elliptical Marquee (Овальная область выделения) и Lasso (Лассо).

Этими инструментами можно легко изменять размер выделенных частей, или даже повернуть их. Чтобы сделать это, используйте любой инструмент выделения (или нажмите клавишу M), чтобы выбрать область, щелкните правой кнопкой мыши и выберите Free Transform (Свободное трансформирование), или просто нажмите Ctrl + T . Чтобы изменить размер выделенной области, перетаскивайте один из маркеров расположенных по периметру рамки трансформации. Чтобы изменить размер выделенной области сохраняя пропорции, удерживайте клавишу Shift и перетаскивайте один из угловых маркеров.

Тем не менее, Photoshop автоматически сглаживает все, что отредактировано с помощью функции Free Transform , поэтому перед редактированием перейдите к Edit → Preferences → General (Ctrl + K) и измените Image Interpolation (Интерполяция изображения) на Nearest Neighbour (Ближайший сосед). В двух словах, при Nearest Neighbour новая позиция и размер вычисляются очень грубо, при этом не применяются никакие новые цвета или прозрачности и сохраняются цвета, которые вы выбрали.

Интегрирование Pixel Art рисунка в игры на iPhone

В этом разделе вы узнаете как интегрировать наш пиксельный рисунок в игру на iPhone, используя игровой фреймворк Cocos2d. Почему я рассматриваю только iPhone? Потому что, благодаря циклу статей про Unity, (например: , или Игра в стиле Jetpack Joyride в Unity 2D) вы уже умеете работать с ними в Unity, а из статей про Crafty (Браузерные игры: Змейка) и Impact (Введение в создание браузерных игр на Impact) вы узнали как вставлять их в холст canvas и создавать браузерные игры.

Если вы новичок в Cocos2D, или в разработке приложений под iPhone в целом, советую вам начать с одного из учебников под Cocos2d и iPhone. Если у вас есть Xcode и установлен Cocos2d, читайте дальше!

Создайте новый проект iOS → cocos2d v2.x → cocos2d iOS template , назовите его PixelArt, и выберите в качестве устройства iPhone. Перетащите созданный пиксель арт, например: sprite_final.png в ваш проект, а затем откройте HelloWorldLayer.m и заменить метод инициализации на следующий:

-(id) init { if((self=)) { CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; } return self; }

Мы позиционируем спрайт в левой части экрана и повернули его так, что он смотрит вправо. Скомпилируйте, запустите, и тогда вы увидите на экране ваш спрайт:

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

Hero.scale = 2.0;

Ничего сложного, не так ли? Скомпилируйте, запустите и... постойте, наш спрайт размыт!

Это потому, что по умолчанию Cocos2d сглаживает рисунок, когда масштабирует его. Нам это не нужно, поэтому добавьте следующую строку:

Эта строка конфигурирует Cocos2d на масштабирование изображений без сглаживания, поэтому наш паренек по-прежнему выглядит "пиксельным" Скомпилируйте, запустите и... да, это работает!

Обратите внимание на преимущества использования Pixel Art графики - мы можем использовать меньшее по размеру изображение, чем то, что отображается на экране, экономя много текстурной памяти. Нам даже не нужно делать отдельные изображения для retina-дисплеев!

А что же дальше?

Я надеюсь, что вам понравился этот урок и вы узнали немного больше о пиксельной графике! Перед расставанием, хочу дать вам несколько советов:

• Всегда старайтесь избежать использования сглаживания, градиентов, или большого количества цветов для ваших ассетов. Это для вашего же блага, особенно если вы еще новичок.
• Если вы ДЕЙСТВИТЕЛЬНО хотите подражать ретро-стилю, обратите внимание на изображения в 8-битных, или 16-битных консольных играх.
• Некоторые стили не используют темные контуры, другие не учитывают влияние света или тени. Все зависит от стиля! В нашем уроке мы не стали рисовать тени, но это не значит, что вы не должны их использовать.

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

Мне надоело тестировать процессы GameDev с помощью треугольников и прямоугольников. Это скучно и не интересно, поэтому настало время что-нибудь взорвать. Но с чего начать? - спросите Вы. А я отвечу, нужно нарисовать sprite взрыва, если быть точным, то нарисовать sprite sheet для взрыва, который будет представлять анимацию взрыва.

Но как это сделать? - этим вопросом озадачился я. После изучения нескольких форумов и видеоуроков, я решил собрать полученную информацию в один урок на своём сайте. Итак у нас следующее технической задание на этот урок:

1. Нарисовать несколько sprite картинок, из которых мы сделаем sprite sheet для анимации взрыва;
2. Собрать сам sprite sheet и сохранить его в PNG файл;
3. Сделать всё это, используя ПО Adove Illustrator .

Рисуем sprite картинки по шагам

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

Шаг первый

Создаём файл с полотном для sprite картинки с параметрами 20 на 20 пикселей. Именно такие картинки будем использовать в следующих уроках по GameDev в Qt для реализации взрывов от пуль. Будем рисовать взрывы.

Шаг второй

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

Шаг третий

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

Шаг четвертый

После того, как мы отрисуем все 15 sprite картинок, создадим новый проект в Adobe Illustrator. Который будет содержать все 15 sprite картинок и будет шириной на все 15 картинок и по высоте на одну картинку. То есть будем отрисовывать все картинки в один ряд. Также поместим прямоугольник на всё полотно. Не забудьте убрать обводку и сделать фон прозрачным.

Шаг пятый

Шаг шестой

А теперь, зайдя в пункт меню Файл, с помощью пункта "Поместить" добавляем в проект все подготовленные спрайты.

Я работал, делая инструментарий и движки для художников, создающих игры и визуальные эффекты более десяти лет, и я всегда недоумевал, что люди делают различия между «программным артом» и «настоящим игровым артом». Я также заметил, что люди, которые дают вам свободно пропустить плохую графику, это в основном другие программисты. Не зависимо от того, как забавна ваша игра или как удивительна технически демоверсия, ‘непрограммисты’, которым вы показываете такой нарисованный персонаж, начинают думать: «Это у него реактивный ранец или может что-то другое?». Зачастую, вы можете найти способ создать хорошую графику без необходимости рисовать ее с чистого листа. Но иногда вам нужно создать графику «на лету». Ограничения в бюджете или правила в игровом соревновании, или просто сжатые сроки для прототипа, могут потребовать от вас взять линейку и кисть в руки.

Я не умею рисовать, правда… Хочу сказать, посмотрите на это:

Если это — то, на что похожа ваша графика, тогда эта статья для вас. Я думаю, что поделился бы рядом подсказок, как сделать графику лучше. Эти подсказки будут полезны всем, вне зависимости от способностей и опыта в рисовании.

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

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

Кое-что из этого рассказа пригодится и для пользователей Фотошопа, потому что, насколько я знаю, такие же понятия применимы к любой программе для рисования, и существуют схожие операции для всего, что я упоминаю здесь в Gimp’е, и возможно в любой другой программе, используемой вами.

Некоторое из описанного также адресовано участникам соревнования LudumDare и участникам других подобных соревнований, где цель — создать игру «на лету» за 48 часов. Мои игры имеют склонность достигать хорошего результата в графической категории (увы, убийца геймплея продолжает ускользать от меня), учитывая даже то, что я не считаю себя особенно хорошим игровым художником. Множество этих примеров исходят из моих LD записей, а большая часть этого опыта — это вещи, которые я изучил, участвуя в этих соревнованиях и будучи вынужденным создавать арт в предельные сжатые сроки. Более того, они должны быть бесценны для любого, кто пытается создать качественную графику (или что-то приближенное к ней) при коротком расписании времени или ограниченном бюджете.

Наиболее частая ошибка, которую я вижу и которую легче всего избежать. Палитра, использующаяся по умолчанию для большинства программ компьютерного рисования, возвращает во времена DOS’а (можете ли вы обнаружить связь между цветами в этой палитре и четырехбайтовыми двоичными значениями от 00 до 15? Конечно — да. Если бы вы не смогли это увидеть, вы бы были настоящим художником.).

Я не подразумеваю под палитрой палитру из 16-ти или 256-ти цветов времен VGA. Просто имею в виду скоординированную систему для вашей игры. Если вы начнете с хорошо выбранной палитры, то ваши «каракули» будут казаться эстетически приятными и даже предварительно имеющими «графический дизайн».

Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!

Хорошо, немного теории цвета проходит длинным путем и если вы потратите пятнадцать минут, чтобы отыскать в интернете, что такое «теория цвета», то вы окажетесь перед определением, что такое игра. Но если у вас нет на это времени, вот несколько советов, которые работают удивительным образом:

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

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

Ресурсы:

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

Я не умею рисовать!..

Возможно, Вы просто слишком крутой человек, чтобы уметь рисовать. Возможно это все преднамеренно. Так и есть. Вместо того, чтобы делать хороший арт, выберите тему, которая требует плохой арт. Это сработало для «SketchFighter» и «Crayon Physics» , нарисованных на бумаге.

Используйте то, что вам доступно. Получили какую-нибудь ерунду у себя на столе? Вы, возможно, сделали одну из самых популярных игр всех времен «Desktop Tower Defense» .

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

Подсказка Третья: простые формы и силуэты

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

В зависимости от того, как много кофе вы уже выпили, они могут быть совершенно разной формы. Все в порядке! Это хорошо, фактически, поскольку изъяны и разнообразия создают «индивидуальность» и делают их живыми. Не используйте инструменты для создания форм в своей программе для рисования, это уничтожитель «спрайтовых душ». Делая их очертания отчётливыми, вы облегчаете игроку способность визуально различать их.

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

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

Подсказка одиннадцатая: приобретите планшет

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

Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.

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

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

С развитием HTML5 и мобильных платформ 2D игры возвращаются в моду и привлекают внимание даже крупных издателей. Благодаря таким инструментам, как Unity, и онлайн-ресурсам с игровыми ассетами, разрабатывать эти игры стало намного легче. Ниже представлен список из 10 лучших сайтов с 2D ресурсами для игр – как платными, так и бесплатными.

*Сайты перечислены в случайном порядке*

1. Unity Asset Store (платный)

Крупнейший сайт с платными игровыми ассетами. Использовать движок Unity для работы необязательно – чтобы получить доступ к ресурсам на Asset Store, нужно лишь загрузить его бесплатную версию. Скачанные файлы будут сохранены в папку проекта Unity, откуда их можно импортировать в любой игровой 2D движок.

Стоит отметить, что Unity в руках умелого разработчика обладает огромным потенциалом, о чем свидетельствует большое количество успешных 2D игр (чего только стоит популярная Bad Piggies от Rovio). А Unity Asset Store предлагает широчайший выбор 2D ассетов.

2. GameDev Market (платный)

GameDev Market – относительно новый сайт, удобно организованный по категориям контента (как и Super Game Asset, о котором пойдет речь ниже). Здесь вы найдете как 2D, так и 3D ресурсы, включая UI, спрайты персонажей, иконки и окружения. Художники выставляют ассеты на продажу, и ассортимент растет с каждым днем.

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

4. Scirra Store (платный)

Scirra – компания-разработчик Construct 2, популярного 2D редактора на HTML5, у которой недавно появился собственный магазин ассетов. Здесь можно найти аудио-, графические ресурсы и даже готовые игровые шаблоны для Construct 2. Впрочем, для работы можно использовать и любой другой 2D редактор.

5. Game Art Partners (платный)

На сайте Game Art Partners можно купить разнообразные мультяшные ассеты для 2D платформеров, включая анимированных персонажей, монстров, оружие, визуальные эффекты и наборы элементов интерфейса.

6. Super Game Asset (платный)

Если вы создаете RPG или игру с изометрической графикой – этот сайт для вас. Здесь вы найдете самые высококачественные ассеты: красочные иконки для RPG (пожалуй, лучшие из доступных онлайн), 2D спрайты, анимированные спрайты персонажей и огромные изометрические карты. Что немаловажно, большинство представленных ресурсов выполнены в одном стиле.

7. Open Game Art (бесплатный)

Исчерпывающий ресурс для разработчиков игр с открытым исходным кодом, Open Game Art можно назвать крупнейшим собранием игровых ассетов со свободной лицензией. Все материалы – от спрайтов до иконок – можно загрузить по лицензиям GNU или Creative Commons. Это отличный сайт для новичков, но многие ассеты отличаются по визуальному стилю, поэтому их придется тщательно отбирать.

8. Kenney Game Assets (бесплатный)

Еще один отличный сайт с более чем 20 тыс. ассетами, включая элементы UI и различные спрайты для 2D платформеров. Большинство ресурсов представлены в векторной графике и подойдут для любого устройства, независимо от разрешения экрана. Ассеты можно скачать по отдельности (бесплатно) или одним набором (за скромную плату в $9).

9. Game-Icons.net (бесплатный)

Game-icons.net – лучший сайт с бесплатными иконками, которых здесь ни много ни мало 2000. Несмотря на то что все иконки черно-белого цвета, они достаточно универсальные и могут быть использованы для обозначения действий, заклинаний, навыков, предметов и т. п. Приятный бонус – векторный формат.

10. Reiner’s Tilesets (бесплатный)

Лучший сайт c бесплатными тайлами. Здесь можно найти спрайты животных, растений, построек, оружия, визуальных эффектов и практически любых объектов для RPG с изометрической графикой. Стиль ассетов напоминает Diablo II. Это отличный ресурс для начинающих разработчиков, желающих протестировать игровой движок или приступить к созданию своей игры.