Я работал, делая инструментарий и движки для художников, создающих игры и визуальные эффекты более десяти лет, и я всегда недоумевал, что люди делают различия между «программным артом» и «настоящим игровым артом». Я также заметил, что люди, которые дают вам свободно пропустить плохую графику, это в основном другие программисты. Не зависимо от того, как забавна ваша игра или как удивительна технически демоверсия, ‘непрограммисты’, которым вы показываете такой нарисованный персонаж, начинают думать: «Это у него реактивный ранец или может что-то другое?». Зачастую, вы можете найти способ создать хорошую графику без необходимости рисовать ее с чистого листа. Но иногда вам нужно создать графику «на лету». Ограничения в бюджете или правила в игровом соревновании, или просто сжатые сроки для прототипа, могут потребовать от вас взять линейку и кисть в руки.
Продолжайте читать некоторые пиксели! Прежде чем мы начнем, давайте по-настоящему понять, что такое пиксельное искусство - это не так очевидно, как вы думаете. Самый простой способ определить пиксельное искусство - сказать, что не является пиксельным искусством: то есть все, что генерирует пиксели, не является пиксельным искусством.
Выбор двух цветов и вычисление между ними в пространстве. Инструмент против алиаса. Вы должны избегать их сейчас. Некоторые говорили бы, что даже автоматически создаваемые цвета не являются пиксельным искусством, подразумевая, что эффекты смешивания слоев не допускаются. Но поскольку большинство аппаратных средств в настоящее время могут иметь дело с миллионами цветов, это может быть проигнорировано - тем не менее, использование меньшего количества цветов - хорошая практика пиксельного искусства.
Я не умею рисовать, правда… Хочу сказать, посмотрите на это:
Если это — то, на что похожа ваша графика, тогда эта статья для вас. Я думаю, что поделился бы рядом подсказок, как сделать графику лучше. Эти подсказки будут полезны всем, вне зависимости от способностей и опыта в рисовании.
В то время как подсказки типа «занимайтесь рисованием набросков каждый день» или «посетите художественный музей» могут быть полезны для начинающего художника, эта статья предназначена не для художника, она о том, как заставить людей думать, что вы — кодер, программист, любящий математику, обладаете некоторыми художественными способностями.
Другие инструменты, такие как или автоматически генерируют пиксели, но так как вы можете настроить их не на анти-алиас их краев, давая вам контроль над каждым пикселем, который они заполняют, считаются «пиксельным искусством». Итак, в конце концов, пиксельное искусство - все о том, чтобы заботиться о размещении каждого пикселя в спрайте, чаще всего вручную и с ограниченной палитрой цветов.
Прежде чем вы начнете создавать свой первый элемент искусства с пиксельным изображением, вы должны знать, что пиксельное искусство не просто изменяет размер. Если вы попытаетесь уменьшить масштаб, это будет похоже на беспорядок. Это должно быть основано на размере экрана устройства, на которое вы нацеливаетесь, и о том, как большой вы хотите, чтобы «пиксели» выглядели.
Кроме того, ни одна (почти) из этих подсказок не требует «практики», хотя практика является полезной и даже существенной для настоящего художника. Всегда кажется, что крайний срок сдачи проекта приходит с рассветом, а вам всего-то нужно несколько этих проклятых спрайтов.
Кое-что из этого рассказа пригодится и для пользователей Фотошопа, потому что, насколько я знаю, такие же понятия применимы к любой программе для рисования, и существуют схожие операции для всего, что я упоминаю здесь в Gimp’е, и возможно в любой другой программе, используемой вами.
Даже если игровой движок, который вы используете, принимает любой размер изображения, рекомендуется использовать даже размерные размеры изображения. Таким образом, если изображение когда-либо нужно масштабировать, размеры будут разделены более чисто, что улучшит внешний вид. Однако размер разработчика намного сложнее: чем меньше ваш персонаж, тем труднее все сделать. Чтобы сделать вещи более практичными, выберите то, что будет самым маленьким, читаемым для персонажа.
Вам просто нужно изменить размер кисти размером 1. Нарисуйте две брови и взгляд на изображение, вроде как. Хорошо, что вам не нужно быть совершенным на этом этапе, просто постарайтесь взять размеры вещей и первоначальную позу персонажа. Идем дальше и рисуем что-то вроде серого цвета.
Некоторое из описанного также адресовано участникам соревнования LudumDare и участникам других подобных соревнований, где цель — создать игру «на лету» за 48 часов. Мои игры имеют склонность достигать хорошего результата в графической категории (увы, убийца геймплея продолжает ускользать от меня), учитывая даже то, что я не считаю себя особенно хорошим игровым художником. Множество этих примеров исходят из моих LD записей, а большая часть этого опыта — это вещи, которые я изучил, участвуя в этих соревнованиях и будучи вынужденным создавать арт в предельные сжатые сроки. Более того, они должны быть бесценны для любого, кто пытается создать качественную графику (или что-то приближенное к ней) при коротком расписании времени или ограниченном бюджете.
Не нужно быть совершенным на этом этапе. Вам действительно не нужно заполнять весь холст, вам нужно больше места для будущих различных кадров, и очень полезно сохранить одинаковый размер холста для всех них. Как только вы закончите силуэт, пришло время начать. Теперь вы должны быть более осторожны с размещением пикселей, так что не мешайте делать одежду, доспехи или какие-либо детали. Если вам это нужно, вы можете добавить новый слой, чтобы вы никогда не теряли свой оригинальный силуэт.
Рисуем кадры бега
Если вы чувствуете, что инструмент карандаша слишком медленный, чтобы рисовать, вы всегда можете использовать его, чтобы ускорить работу - просто не забудьте исправить некоторые пиксели, так как это не так точно, как карандаш. Вам нужно будет настроить его, как показано ниже.
Наиболее частая ошибка, которую я вижу и которую легче всего избежать. Палитра, использующаяся по умолчанию для большинства программ компьютерного рисования, возвращает во времена DOS’а (можете ли вы обнаружить связь между цветами в этой палитре и четырехбайтовыми двоичными значениями от 00 до 15? Конечно — да. Если бы вы не смогли это увидеть, вы бы были настоящим художником.).
Выберите инструмент «Линия», нажав и удерживая инструмент «Прямоугольник», и прокрутите вниз до «Линия». Теперь вы готовы начать раскрашивать его. Не утруждайте себя выбором правильных цветов сейчас, их очень легко изменить позже, просто убедитесь, что все имеет свой собственный цвет.
II. Создание персонажа
Идите и красите своего героя вроде этого. Хороший цветовой контраст обеспечивает лучшую читаемость вашего актива! Всегда помните: сохраняйте столько пикселей, сколько сможете! О, и не тратьте время, тщательно размещая каждый цветной пиксель. Чтобы ускорить процесс, нарисуйте линии для каждого цвета и используйте для заполнения пробелов. Вам также понадобится настроить этот инструмент. Выберите его на панели инструментов и измените значение Допуск на 0 и снимите отметку с псевдонима.
Я не подразумеваю под палитрой палитру из 16-ти или 256-ти цветов времен VGA. Просто имею в виду скоординированную систему для вашей игры. Если вы начнете с хорошо выбранной палитры, то ваши «каракули» будут казаться эстетически приятными и даже предварительно имеющими «графический дизайн».
Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!
Хорошо, немного теории цвета проходит длинным путем и если вы потратите пятнадцать минут, чтобы отыскать в интернете, что такое «теория цвета», то вы окажетесь перед определением, что такое игра. Но если у вас нет на это времени, вот несколько советов, которые работают удивительным образом:
Я не умею рисовать!
Следующий шаг потребует от вас некоторых основных знаний о свете и тени. Если вам не нравится изучать это прямо сейчас, вы можете пропустить этот шаг и перейти к «Приподнимать свою палитру». Затенение, в конце концов, относится к стилю, выбирает то, что вы считаете правильным для своей игры и возможностей. Или вы можете просто сделать свой затенение похожим на мой пример ниже!
Используйте тот же источник света для всего актива. Например, теперь вы можете видеть нос, глаза нахмурившись, объем волос, глубину и складки на штанах. Вы также можете добавить к нему несколько легких пятен, это будет выглядеть еще лучше. Хранить тот же источник света от затенения.
Для большой игры вы можете использовать другую палитру на уровне или области игрового мира. В случае, если ваши элементы интерфейса и главный персонаж изображены нейтральными цветами, или если эти палитры имеют общий главный цвет, вы можете в равной степени применять их между уровнями или областями.
Многие люди используют цвета палитры по умолчанию, но так как многие люди используют эти цвета, они выглядят одинаково во многих играх. Затем в окне «Выбор цвета» просмотрите правую панель, чтобы выбрать цвет и в основной области, чтобы выбрать его яркость и насыщенность.
Не паникуйте, вы просто снимите флажок «Смежный», поэтому, когда вы нарисуете новый цвет, каждый пиксель с тем же цветом на слое будет также окрашен. Это еще одна причина, по которой важно поддерживать низкий уровень цвета и всегда использовать один и тот же цвет при работе с одним и тем же элементом. Но не забудьте использовать другой цвет для других областей, иначе это тоже будет перекрашено!
В этом примере используется «монохроматическая» палитра, где все цвета различного оттенка очень схожего тона, другие цветовые схемы более разнообразны, но важно то, что цвета смотрятся вместе хорошо.
Ресурсы:
- MultiColr от idee labs
Этот потрясающий сайт хорош тем, что благодаря ему можно сделать палитру и получить связку фотографий на ее основе, просто выбрав несколько желаемых цветов и изображение, из которого затем можно использовать цвета.
Я не умею рисовать!..
Возможно, Вы просто слишком крутой человек, чтобы уметь рисовать. Возможно это все преднамеренно. Так и есть. Вместо того, чтобы делать хороший арт, выберите тему, которая требует плохой арт. Это сработало для «SketchFighter» и «Crayon Physics» , нарисованных на бумаге.
Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!
Снимите флажок «Смежный», чтобы нарисовать все пиксели одного цвета. Измените цвета столько, сколько хотите, и получите сексуальные цвета на персонаже! Вы даже можете перекрасить контур, просто убедитесь, что он будет правильно смещаться с фоном. Наконец, сделайте тест цвета фона: создайте новый слой под своим персонажем и заполните его разными цветами. Очень важно убедиться, что ваш персонаж будет виден на светлом, темном, теплом и прохладном фоне.
Это может пригодиться, чтобы немного изменить некоторые части или даже повернуть их, чтобы оживить дальнейшие кадры, например, запущенные циклы. Вы можете изменить размер и свободно его вращать. В двух словах, он вычисляет новое положение и размер очень грубо, не применяя новых цветов или прозрачности, сохраняя цвета, которые вы выбрали. Перетащите конечный символ искусства пикселя, который вы создали в свой проект.
Используйте то, что вам доступно. Получили какую-нибудь ерунду у себя на столе? Вы, возможно, сделали одну из самых популярных игр всех времен «Desktop Tower Defense» .
Мы позиционируем спрайт в левой части экрана и переворачиваем его, чтобы он искал направо. Скомпилируйте и запустите, и вы увидите свой спрайт, как ожидалось на экране. Однако помните, как мы обсуждали ранее в этом учебном пособии, мы хотели увеличить искусство искусственно, чтобы отдельные пиксели были действительно видны, чтобы придать экстра-блочное ощущение прохладного пиксельного искусства.
III. Анимирование персонажа
Для пиксельного искусства мы этого не хотим - мы хотим сохранить твердые края. К счастью, это довольно легко исправить! Обратите внимание на преимущество использования пиксельного искусства - мы смогли использовать меньший размер изображения, чем тот, который фактически отображается на экране, сохраняя много текстурной памяти. И нам даже не нужно предоставлять отдельные изображения для экрана сетчатки, так как мы хотим, чтобы этот блочный взгляд!
Люди начинают понимать смысл этого трюка, но у него есть немного лет для существования. Будьте криативными… возможно ваши персонажи — печенья, и вы буквально можете испечь их. Или какой-нибудь зомби-бекон атакует вашу кухню. Или даже волосатая грудь, которой нужно, чтобы ее побрили .
Это для меня - возвращение к Глауберу, который завернет это! Надеюсь, вам понравился этот урок и узнал немного больше о пиксельном искусстве! Прежде чем идти, вот несколько последних советов. Всегда помните, чтобы избежать использования анти-псевдонимов, градиентов или слишком много цветов для ваших активов. По мере продвижения оборудования активы могут использовать больше или просто разные цвета. Это привело к большим изменениям и даже новым художникам, которые не знали, как использовать более старое оборудование, создающее пиксельное искусство. Знать, как затенять искусство, хорошо, поэтому мы прошли его в этом учебнике, но помните о стиле, в котором вы собираетесь. Лучший способ продвинуть свои навыки - это практиковать, практиковать, практиковать - и получать отзывы от художников-художников-миксеров!
Подсказка Третья: простые формы и силуэты
Круг, Квадрат, Треугольник, Ромб, Трапеция, Параллелограм, и т.д. Вы знаете как точно высчитать их площадь, но вы знаете, что нарисовать их получается плохо? Сделайте наброски нескольких форм от руки, затем добавьте глаза (для персонажа) или колеса (для техники) или что-нибудь еще. Они, возможно, получатся смешными и нелепыми, и совсем неточные.
Начните с малого, много тренируйтесь и получите обратную связь, и вы можете создать потрясающее игровое искусство! Есть кое-что, что можно сказать о максимальном использовании каждого пикселя в спрайте. Листы спрайтов уже существуют с первых дней компьютерных игр.
Идея состоит в том, чтобы создать одно большое изображение, содержащее все анимации персонажа, вместо того чтобы иметь дело со многими отдельными файлами. Анимационная полоса - это простейшая форма листа спрайтов: она просто размещает каждый анимационный кадр рядом друг с другом. Все кадры имеют одинаковый размер, а анимация выравнивается в каждом кадре.
В зависимости от того, как много кофе вы уже выпили, они могут быть совершенно разной формы. Все в порядке! Это хорошо, фактически, поскольку изъяны и разнообразия создают «индивидуальность» и делают их живыми. Не используйте инструменты для создания форм в своей программе для рисования, это уничтожитель «спрайтовых душ». Делая их очертания отчётливыми, вы облегчаете игроку способность визуально различать их.
Он может также содержать несколько строк, если анимация длиннее - или несколько комбинированных анимаций. Набор тайлов не отличается от листа спрайтов: он содержит строительные блоки для уровней игры. Это пример карты плитки. 
Легко для игры получить спрайты, так как все они имеют одинаковую ширину и высоту. Недостатком является то, что спрайты тратят много памяти из-за всей дополнительной прозрачности.
Разработчики игровых движков знают о потерянной памяти в простых листах спрайтов и начали оптимизировать пространство. Самый простой способ - удалить прозрачность вокруг спрайта и сжать его в ограничивающий прямоугольник. Еще лучшим решением является использование многоугольника, содержащего спрайт.
Одно замечание: не пытайтесь разбираться с этим во время соревнования по написанию игры. Протестируйте сначала все перед его проведением, чтобы точно знать как что делать. Вы потратите много времени, но во время соревнования это может занять всего 15-20 минут и будет иметь большое значение.
И еще, не спешите делать «запекание» пока не закончите с текстурами для моделей. Вы не сможете убрать «запекание» или сделать его дважды.
Это позволяет создавать листы спрайтов, которые более компактны и теряют память. Они также уменьшают размер загрузки для игры. Игровому движку теперь нужна дополнительная информация для рисования спрайта: ему нужно знать, где находится спрайт, и насколько прозрачность была удалена.
Это пример оптимизированного листа спрайтов, и файл данных может выглядеть так. Бесплатная версия позволяет создавать полосы спрайтов и карты плитки. 
Когда вы используете бесплатную версию, вам придется изменить 3 значения по умолчанию. Это не ограничение, потому что вам нужно, чтобы они создали для создания полосы спрайтов.
Подсказка одиннадцатая: приобретите планшет
Даже если у вас нет стремлений стать игровым художником, но если рисуете какой-нибудь арт на компьютере, то вам нужно приобрести планшет. Необязательно большой или дорогой, можно купить планшет фирмы Wacom. Потому что рисование мышью схоже с рисованием кирпичом на бумаге.
Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.
- В панели управления планшета увеличьте показатель чувствительности пера на более твёрдый. Это обеспечит наилучший контроль при рисовании.
- Рисование с использованием чистого листа бумаги полностью изменить ощущение. Различные типы бумаги: офисная, страницы журналов, плотная бумага и тд. — помогут полностью ощутить рисование на планшете. Попробуйте.
- Практикуйтесь. Знаю, что до этого я говорил, что ни один из моих советов не требует практики — я лгал. Попробуйте эти упражнения:
- Сделайте в фотошопе десять квадратов в ряд и заполните их черным цветом в радиусе прозрачности от нуля до ста. Под ними сделайте десять пустых квадратов. Попробуйте оттенить нижние квадраты, чтобы выровнять основные квадраты. Попробуйте с другими кистями и попрактикуйтесь с чувствительностью нажатия пера.
- Попробуйте написать что-нибудь, алфавит или просто текст. Начните с больших размеров букв, а потом продолжайте их уменьшать. Это позволит вашей руке привыкнуть к плашнету, также как и глазам к экрану во время рисования.
В сегодняшнее время интерфейсов на основе сенсорных дисплеев, иметь планшет становится выгодно, чтобы понять как работают игры, основанные на этой технологии. Хотя такой подход ничем не отличается в сравнении технологии использования мыши.
Часть 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" и белый фон, закроет исходную картинку.
Использование заднего фона при прорисовке, заметно уменьшает время работы. Все же помните, что фон нужен только для того, чтобы направлять вашу руку. Обычно лицо, получается смазанным, состоящим из разбросанных повсюду пикселей, так что придётся воссоздать его пикселями. Можно исправить и больший кусок оригинала (я например исправлю ногу), если что-то плохо смотрится в пикселях. Старайтесь избегать больших пиксельных "пятен": как у неё на руке например. Эти пятна заметны в углах, ну и еще кое-где. Постарайтесь от них избавиться. Группа из четырёх черных пикселей может сильно портить визуальное восприятие спрайта. Чтобы от них избавиться, можно чуть подправить позу персонажа:например если на картинке рука и нога накладываются на друг друга, и в результате наложения появляются пятна черных пикселей, следует сдвинуть либо ногу либо руку. От этих пятен, "блобов", можно избавиться в большинстве случаев. Продолжаем:
Я закончил рэйтрейсинг линий чёрным цветом. Осталось добавить некоторые детали, и проработать лицо, особенно глаза, но это лучше делать уже при работе цветом. Давайте начнём раскрашивать спрайт, заполняя цветом его основные области, и не добавляя на данном этапе тени:
Итак, я добавил цвета: я предпочитаю работать не на белом фоне, лучше для него взять какой-нибудь мягкий цвет. Белый фон, делает цвета темнее (особенно её майку). Это фокус, который играют с нами наши глаза. Ладно, давайте добавим теней:
Я предпочитаю, в первую очередь, добавлять тени на коже... Вы можете начать где угодно. Лицо, пожалуй, самая сложная часть спрайта - сложно передать узнаваемое выражение лица, работая всего лишь парой другой пикселей. Нос и рот я обозначил цветом, который чуть темнее самого тёмного оттенка кожи. Чёрный цвет, слишком выделяет эти детали на лице (рот, так вообще кажется открытым), а тёмный оттенок кожи слишком незаметен. После добавления белого цвета в глаза, стало понятно, что она смотрит в сторону. Продолжим, и прорисуем тени на остальных частях тела нашего персонажа:
С тенями, она смотрится более трехмерной. Но это еще не финиш: Я хочу добавить некоторые детали: отделку на куртке и белые линии на рукавах.
Изначально я планировал две белые линии, которые должны были спускаться по рукавам, но на спрайте для них не хватило места. К тому же белый цвет сильно бы контрастировал с темным цветом её майки. Кажется, что белая линия имеет ширину больше одного пикселя. На самом деле это не так. Наш глаз обманывается, из-за сильного контраста. Если бы у меня все же сохранилось сильное желание добавить эти две линии на её рукавах, то я мог бы показать вторую линию в таком кадре, где она повёрнута чуть сильнее. Я добавил кое-какие детали её кроссовкам и куртке, изменил черные линии на штанинах, и по той же причине исправил чёрный цвет на ей лице, нос и рот теперь обозначены цветом затененной кожи. Черный цвет слишком выделяется. Последний штрих, который можно внести - добавить цвета в её контур.