Основы пиксельарта (Часть 1)

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

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

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

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

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

Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.

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

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

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

На удивление неплохой редактор, которым вы можете пользоваться прямо через ваш браузер. Может производить экспорт как в png и gif, так и сохранять спрайты в браузере. Неплохой способ начать заниматься пиксельартом.

GraphicsGale - это первый редактор, о котором я узнал, разработанный и предназначенный именно для пиксельарта и его анимации. Созданный компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется несмотря на рост популярности Aseprite. К сожалению, доступен только обладателям Windows.

Самый популярный редактор на данный момент. Содержит большое количество полезных функций и инструментов, постоянно обновляется, доступен как на Windows и Mac, так и на Linux. К тому же вы можете пользоваться программой бесплатно, скомпилировав её исходный код. Если вы серьёзно хотите заниматься пиксельартом и ещё не выбрали себе редактор, то Aseprite будет неплохим вариантом.

GameMaker Studio 2 - это отличный движок для создания 2D игр, который также содержит достойный редактор спрайтов. Если вы собираетесь делать игры с пиксельартом, то это лучший выбор для обоих. В данный момент (2019 год) я использую его для создания UFO 50, коллекции из 50 ретро игр. В основном я использую местный редактор для создания спрайтов, а тайлсеты делаю в Photoshop.

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

Я настоятельно рекомендую пользоваться графическим планшетом для любого вида иллюстраций, чтобы предотвратить заболевания повторяющейся длительной нагрузки на запястье (туннельный синдром). Такие заболевания намного легче предотвратить, чем вылечить. Когда появляется боль, вы уже обречены ( мои дни рисования мышкой, сделали невозможным играть в игры с быстрым нажатием кнопок). Так, что позаботьтесь о себе пока не поздно – это того стоит! В данный момент я использую маленький Wacom Intuous Pro.

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

Давайте приступим к делу! Мы начнем со спрайта персонажа размером 96x96 пикселей. Я решил нарисовать орка, но вы вправе выбрать что-то другое. Конечный вариант орка находится на скриншоте Final Fight, который вы можете увидеть выше, для того, чтобы вы понимали масштаб спрайта– он большой для большинства ретро игр (оригинальный скриншот имеет размер 384x224 пикселя).

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

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

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

Именно для этого туториала я буду использовать палитру из 32 цветов, созданную специально для UFO 50. Палитры из 32 и 16 цветов используются достаточно часто. Данная палитра была создана для выдуманной консоли, которая бы находилась где-то между Famicon и PC Engine. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).

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

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

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

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

Давайте посмотрим на несколько примеров:

Прямые линии

Закруглённые линии

В закруглённых линиях зазубрины возникают когда длина сегментов линии увеличивается или уменьшается неправильно.

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

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

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

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

Если вы испытываете определённые трудности на данном этапе, то вам стоит представить спрайт как набор объемных форм. Формы существуют в трёхмерном пространстве и, следовательно, имеют объем, который заполняет это пространство. С помощью теней мы как раз и показываем этот объём.

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

Каждый раз когда я добавляю новую тень, я также использую сглаживание, которое делает линии более гладкими с помощью добавления промежуточных цветов в местах, где соединяются сегменты линии:

Серые пиксели смягчают разрывы в нашей линии. Чем длиннее сегмент линии, тем длиннее будет сегмент сглаживания.

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

Будьте осторожны со сглаживанием контура спрайта если не знаете какого цвета будет фон.

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

Чтобы придать нашему спрайту более реалистичный вид и смягчить сегментацию (для того, чтобы выделить его базовую форму), мы можем использовать технику, которая называется выборочным контурированием. Её смысл заключается в том, чтобы заменить чёрный более светлыми цветами. Наверху, куда попадает больше всего света, мы будем использовать самые яркие цвета, а где света меньше всего, там контура не будет вообще. Для сегментации (например мускул, меха и т.д) мы можем использовать те же цвета, что и для их тени.

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

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

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

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

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

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

Я использую дитеринг нечасто, но на орка добавил немного для текстуры. Некоторые пиксельарт художники не используют дитеринг вообще. Другие используют его достаточно часто и делают это красиво. В целом, я думаю, что его стоит применять на больших одноцветных пространствах (присмотритесь к небу на скриншоте Metal Slug 3, который находится вверху) или в местах, которые мы хотим сделать неровными, грубыми (как грязь например). Если вам нравится как это, выглядит, поэкспериментируйте с этой техникой и найдите ей лучшее для вас применение!

В случае если вы хотите посмотреть на качественный дитеринг, то вам стоит обратить внимание на игры компании Bitmap Brothers, английской игровой студии 80ых или на игры с японского компьютера PC-98 (хочу заметить, что многие игры на этом компьютере содержат контент для взрослых):

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

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

Оригинал: