Нарисовать спрайты для игры. Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art

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

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

Все три руководства обязательны к прочтению. Чтобы рисовать качественные спрайты, вам понадобится знать, что такое "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]

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 форумах, чтобы другие художники дать вам совет - это отличный способ улучшить свою технику! Начните с малого, много тренируйтесь, получайте обратную связь и вы можете создать удивительный игру, которая принесет вам много денег и радости!

Часть 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 возникает проблема двойного столбца... Придётся вам выбрать, где пикселы будут разделять ноги. Я сделал одинаковые тени на ногах (те два горизонтальных пиксела), чтобы ноги казались находящимися прямо под корпусом. Если бы на левой ноге не было ни одного светлого пиксела, казалось бы, что она чуть позади правой. А если бы их было много, нога опять выдвинулась бы, но уже вперёд. Теперь у нас есть "стоячий" кадр, можно его использовать, когда игрок ничего не делает. Есть также другая польза от этого кадра... Можно добавить его в анимацию ходьбы:

Часть 9: Создание спрайтов для игр-сражений

Итак, мы поработали над созданием маленьких 16х16 спрайтов: Они просты, милы и традициональны для консольных RPG-игр. "Но я хочу сделать экшн-игру: что-нибудь с большими спрайтами! Ну вы знаете, что-то вроде файтинга от Capcom (компания Capcom прославилась своими играми для игровых автоматов - прим. пер.)". Быть может, из-за настоятельного желания рисовать классные, большие спрайты, вы пропустили предыдущие секции туториала и не занимались созданием маленьких изящных спрайтиков. Если я прав, то вернитесь и прочтите пропущенное. Хоть размер спрайтов изменился, все же базовые принципы, описанные ранее, остаются в силе. Окей, предполагаем что вы читали предыдущие главы и теперь по-настоящему готовы к созданию спрайта, который будет "драться".

Для начала, разрешите мне отметить что техника, которую я сейчас опишу, подходит не только для файтинга (файтинг - игровой жанр, обычно на экране симулируется схватка двух бойцов - прим.пер). Я использую данный термин повсеместно, потому что позы и положения для учебных спрайтов представляют собой различные боевые стойки. Но сама по себе техника и концепции могут быть применены в различных типах игр: Игра Earthworm Jim, вероятно была сделана с помощью такого же подхода. Учитесь на всём, на чём только можно и адаптируйте изученное под свои нужды. Но мы отвлеклись, теперь давайте взглянем на пару примеров из игры Street Fighter Alpha 3.

Вот это действительно нарисовано со знанием дела. Каждый персонаж обладает своим собственным неповторимым видом. Например, Зангриф - это большая гора мускулов, а Сакура в сравнении с ним маленькая тонкая худышка. Также отметьте существенную разницу в ширине спрайтов этих двоих. Значит, художники не были ограничены некоторыми максимальными размерами спрайтов. Сакура - это спрайт 76х87, Зангриф - 116х111. Но помните, что обычно стандартным размером считается 100 пикселей в высоту. Ширина обычно будет меньше.

Метод, который использует компания Capcom, неизвестен. У них нет туториалов, либо других разъяснений, касающихся процесса создания спрайтов, что не удивительно, ведь у них и так полно других забот. Всё же я добыл кое-какую информацию, путём анализа их спрайтов и собирая отрывки полезных сведений то тут то там. Давайте рассмотрим картинки Чун-Ли из Street Fighter 3:

(нажми, чтобы увеличить)

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

Самая важная часть картины, это большая Чун-Ли в верхнем правом углу. Отметьте малое наличии деталей в ней. Когда делаешь спрайт, требуется показать какое-то определенное количество характерных черт. При рисовании маленького 8х8 лица, не будет возможности отобразить, например, ноздри, так зачем тратить на них время при рисовании на бумаге? Эти изогнутые линии на ёё одежде, в спрайте будут представлены однопиксельными жёлтыми линиями. Появится небольшая жёлтая свисающая отделка на одежде: но добавиться она только на стадии пиксельной работы. Поэтому, стоит еще в начале, выбрать упрощённый стиль для использования при рисовании кадров анимации на бумаге.

Мне стоит отвлечься, и объяснить, что на самом деле существуют различные способы создания спрайтов. Выбор метода, зависит только от уровня ваших навыков, мастерства и размера создаваемых спрайтов. Если вы делаете спрайты для RPG размером 16х16, нет резона сперва рисовать их на бумаге, сканировать и т.д. Работайте сразу в пикселях. При отсутствии навыка рисования на бумаге, разумнее сразу перейти к рисованию пикселями. Два других метода, применимых при отсутствии сканера или навыка рисования от руки:

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

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

В этом туториале, я буду использовать Photoshop 4.0, но постараюсь использовать его простейшие возможности. Разговаривая об анти-алиасинге и ему подобных вещах, я подразумеваю что они реализованы и в других программах для рисования. И думаю, вы умеете пользоваться одной из них. Всё же, надо отметить, что Photoshop в целом не годится для создания спрайтов. Причина в том, что Photoshop особым образом изменяет и организует палитру, что не годится для создания игр, с заданной палитрой. Это потому, что подобного типа приложения созданы для обработки фотографий и иллюстраций. Манипуляции с палитрой в этих случаях не играют какой-либо важной роли, в отличии от случая со спрайтами. Если вы делаете игру, не использующую палитру (а это большинство PC игр, в отличии от консольных собратьев), и вам незачем заботиться о количестве используемых цветов, тогда Photoshop может вам подойти. Я же люблю его использовать для практики рисования спрайтов, т.к. не приходится заморачиваться по поводу подбора и выбора цветов, что имело бы место в редакторе, использующем палитру. Ну что, давайте сделаем спрайт. Для начала, я использую картинку нарисованную от руки, т.е. пойду путём компании Capcom:

Я нарисовал персонаж от руки (на четвертинке обычной бумаги А4), раскрасил её, затем отсканировал (настройки - 300dpi, черно-белый режим):перед тем как уменьшить размер, следует изменить режим изображения на RGB или Grayscale, чтобы работал анти-аллиасинг). У меня получилось довольно большая картинка, и здесь я показываю уменьшенную версию. Есть маленькие недочёты, вроде странно изогнутой передней ноги и т.д:их надо будет поправить при работе с пикселями, это будет не трудно. Заметьте, что я сделал удвоенный контур для обводов куртки и майки. Это вышло случайно, стоп: подождите, я собирался показать к каким проблемам это привёдёт. Окей, мы не можем работать с такой большой картинкой, поэтому давайте уменьшим размер до100 пикселей. Она нарисована на белом фоне, в целом размер будет чуть меньше ста пикселей, так как я оставил вокруг фигуры немного пустого места, на тот случай, если я захочу удлинить её волосы. Ах да, при уменьшении я использовал билинеарный фильтр. Помимо него в Photoshop-е есть еще два фильтра, каждый из них действует по-разному:

(нажми, чтобы увеличить)

Фильтр "Ближайший сосед" ("Nearest Neighbor") полностью отключает anti-aliasing. Это особенно полезно, если нужно увеличить уже завершённый спрайт раза так в четыре, и показать его разбирающимся людям.

Фильтры "Билинейный" и "Бикубический" делают почти одно и тоже: бикубический похоже даёт больше анти-аллисинга. Наша картинка относительно мала, так что в этом случае большой разницы заметно не будет, но если уменьшать картинку высотой 800 пикселей, эффект будет значительный. Проблема бикубического фильтра - слишком много анти-аллиасинга. Сравните её правую голень на бикубической картинке и на билинейной. На первой она более размыта. То же самое произошло с рукой, и лицом. Это может мешать при рейтресинге, поэтому я обычно использую билинейный фильтр, чтобы получить меньше анти-аллисианга. Итак, мы получили наш спрайт (95 пикселей в высоту):

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

Взгляните, на низ её майку, на уменьшенной версии картинки. На рисованной от руки версии на этом месте были двойные контуры, ими я обозначил место для белого цвета, который я собирался добавить. На уменьшенной версии, там просто смазанное пятно. То же самое с рукой. Именно поэтому детали на одежде Чун-Ли были обозначенными тонкими линиями, остальное разработчики добавляли на стадии пиксельной работы.

Вот быстрый способ настроить Photoshop, что осуществить простой рэйтрейсинг. Исходная картинка будет фоном (убедитесь что вы в режиме RGB), поэтому создайте новый слой. Заполните его определенным цветом (например, синим). Установите для этого слоя режим "screen", и вы увидите спрайт, только черные линии станут синими. Затем совместите слои. Это нужно затем, чтобы вновь нарисованные линии были поверх слоя исходной картинки. Теперь создайте еще один слой и залейте его белым. Для него установите режим "multiply". Собственно, спрайт будет рисовать как раз в этом слое. Можно было бы просто сделать слой прозрачным, но тогда пришлось бы постоянно переключаться на инстумент "резинка" чтобы что-нибудь стереть, что конечно же неудобно. В нашем случае, фон будет белым, хоть вы то и его не видите. Можно будет легко переключаться с белого на чёрный цвет (пр учётё, что изначальная установка не менялась), нажимая кнопку X Если вы захотите очистить картинку, сделанную из синих линий, поменяйте режим последнего слоя на "normal" и белый фон, закроет исходную картинку.

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

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

Итак, я добавил цвета: я предпочитаю работать не на белом фоне, лучше для него взять какой-нибудь мягкий цвет. Белый фон, делает цвета темнее (особенно её майку). Это фокус, который играют с нами наши глаза. Ладно, давайте добавим теней.

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

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

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

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

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

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

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

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

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

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

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

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

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

Ресурсы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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