2д пиксельный персонаж с анимацией
Создание пиксель-арт анимаций
В современной игре визуализация так же важна, как и геймплей. С помощью «ожившей картинки» мы теперь не только привлекаем внимание и создаем атмосферу — визуализация рассказывает историю, впечатляет игрока, увлекает игрой и создает желание возвращаться к ней снова и снова.
Едва ли не самая важная часть всех этих процессов — анимация. Она «оживляет» картинку и с ней оживляет игру.
Наша студия накопила немалый опыт создания пиксель-арт анимации, и мы хотим им поделиться. В качестве примеров в этой статье мы будем использовать примеры из игры, которую делаем.
В двух словах о ней для контекста: наша игра будет социальной RPG, действие которой наполовину происходит в небольшом американском городке 60-х годов с множеством активностей, а вторая половина состоит из тактических боев с монстрами в «альтернативном мире».
Без выверенных образов персонажей игра не будет восприниматься целостной. Когда у команды есть сформированное видение того, что хочется донести до целевой аудитории, то можно смело приступать к созданию образа.
Главная героиня в нашей игре – девочка, которая вместе со своими друзьями переживает летние приключения в небольшом американском городке в разгар 60-х. Первоначальный образ должен соответствовать временному периоду, а это значит, что никаких накладных ушек или разноцветных глаз в нём быть не может.
Анимации можно разделить на несколько категорий:
В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.
В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.
Продвигаясь по сюжету, игроку предстоит взаимодействовать с другими персонажами. Когда речь идёт о живой картинке, недостаточно написать под репликой персонажа о том, что он шокирован. Лучше передать эту эмоцию визуально. Пусть игрок увидит её по выражению лица на портрете или по действию героя. Игра это не книга, и выбор инструментов в ней гораздо шире.
Перечислять подобные анимации можно очень долго. Даже настройка образа героя через выбор его одежды, прически и цвета давно уже не в новинку. Вопрос только в том, сколько времени и сил вы готовы вложить в это.
Самый характерный пример зацикленной анимации – это передвижение персонажа. Бег главной героини состоит из 10-ти кадров. Зачастую можно увидеть циклы из 8-ми или 16-ти кадров, но мы выбрали средний вариант, т.к. 10-ти кадровый бег получился плавнее 8-микадрового и не требует много ресурсов, в отличие от цикла из 16-ти.
Для того, чтобы бег выглядел максимально естественно, художник должен понимать, что движутся не только ноги персонажа, но и всё тело. Передать это можно с помощью небольшого разворота туловища и движения рук.
Важно учитывать, что каждая деталь персонажа имеет собственный вес. Например, волосы при беге будут двигаться более активно, чем рюкзак героини. Последний, в свою очередь, “отстает на кадр” от амплитуды движения хозяйки. Когда она начинает двигаться вверх, рюкзак всё ещё остается в своем прежнем положении и только в следующем кадре поднимается на необходимый уровень.
В то же время нужно чувствовать меру и не анимировать детали персонажа слишком активно. Когда небольшие детали слишком часто меняют свое положение в каждом кадре без необходимости, есть риск, что анимация будет ощущаться слишком перегруженной и неаккуратной.
В качестве первого примера активной анимации рассмотрим атаку. В анимации атаки амплитуда движения активно меняется, она должна быть плавной.
В статике это довольно сложно объяснить, поэтому лучше продемонстрировать этот пример в естественной среде.
В начале атаки героиня двигается плавно. Затем она совершает прыжок и её скорость резко увеличивается, после чего обрывается в момент удара. При этом меч по инерции двигается в направлении удара еще на протяжении нескольких кадров, что подчеркивает его силу.
После удара героиня теряет скорость и её анимация опять становится медленной и более плавной до тех пор, пока она не начнёт двигаться назад на первичную позицию. Стоит отметить, что оказавшись у нужного места, она “проскальзывает” несколько пикселей, уменьшая тем самым скорость и создавая плавность.
Пиксель-арт анимация – трудоемкое для художников и дорогое в производстве удовольствие. Такой визуальный стиль стоит выбирать с осторожностью, если вы делаете вашу первую игру.
Но большие вложения в пиксель-арт анимацию имеют шанс окупиться большой “отдачей” – как в смысле востребованности игры, так и в смысле впечатлений, удовольствия игрока. Но всем, кто, как и мы, обращается к пиксель-арту, мы желаем успехов и удачи на этом пути!
10 полезных сайтов с 2D ресурсами для игр
С развитием HTML5 и мобильных платформ 2D-игры возвращаются в моду. Заниматься такими проектами, будь то браузерные игры, игры на телефон или для ПК, стало легче благодаря таким инструментам, как Unity, и онлайн-ресурсам с игровыми ассетами. Ниже представлен список из 10 лучших сайтов с 2D-ресурсами для игр – как платными, так и бесплатными.
*Сайты перечислены в случайном порядке*
Крупнейший сайт с платными игровыми ассетами. Использовать движок Unity для работы необязательно – чтобы получить доступ к ресурсам на Asset Store, нужно лишь загрузить его бесплатную версию. Скачанные файлы будут сохранены в папку проекта Unity, откуда их можно импортировать в любой игровой 2D движок.
Стоит отметить, что Unity в руках умелого разработчика обладает огромным потенциалом, о чем свидетельствует большое количество успешных 2D игр (чего только стоит популярная Bad Piggies от Rovio). А Unity Asset Store предлагает широчайший выбор 2D ассетов.
GameDev Market – относительно новый сайт, удобно организованный по категориям контента (как и Super Game Asset, о котором пойдет речь ниже). Здесь вы найдете как 2D, так и 3D ресурсы, включая UI, спрайты персонажей, иконки и окружения. Художники выставляют ассеты на продажу, и ассортимент растет с каждым днем.
Graphicriver – один из самых популярных ресурсов шаблонных изображений. В связи с развитием казуальных мобильных игр, там появилась отдельная категория с 2D ассетами. До размещения на сайте весь контент проходит внутреннюю проверку, а после публикации любой пользователь может оставить свою оценку и отзыв. Итого: это надежный, активно развивающийся сайт под пристальным модерированием Envato.
Scirra – компания-разработчик Construct 2, популярного 2D редактора на HTML5, у которой недавно появился собственный магазин ассетов. Здесь можно найти аудио-, графические ресурсы и даже готовые игровые шаблоны для Construct 2. Впрочем, для работы можно использовать и любой другой 2D редактор.
Если вы создаете RPG или игру с изометрической графикой – этот сайт для вас. Здесь вы найдете самые высококачественные ассеты: красочные иконки для RPG (пожалуй, лучшие из доступных онлайн), 2D спрайты, анимированные спрайты персонажей и огромные изометрические карты. Что немаловажно, большинство представленных ресурсов выполнены в одном стиле.
Исчерпывающий ресурс для разработчиков игр с открытым исходным кодом, Open Game Art можно назвать крупнейшим собранием игровых ассетов со свободной лицензией. Все материалы – от спрайтов до иконок – можно загрузить по лицензиям GNU или Creative Commons. Это отличный сайт для новичков, но многие ассеты отличаются по визуальному стилю, поэтому их придется тщательно отбирать.
Game-icons.net – лучший сайт с бесплатными иконками, которых здесь ни много ни мало 2000. Несмотря на то что все иконки черно-белого цвета, они достаточно универсальные и могут быть использованы для обозначения действий, заклинаний, навыков, предметов и т. п. Приятный бонус – векторный формат.
Персонаж за 4 часа: создать 2D-героя, не забыв про анимацию
Как совместить большие планы и сжатые сроки.
Поговорим о персонажах — именно с их конкретными образами мы связываем многие проекты, будь то Tomb Raider, The Witcher или Pac-Man.
Даже с ограничениями во времени и ресурсах можно создать героев, которые полюбятся игрокам. Если у вас есть хорошая механика, не стоит бояться проблем с артом — исходите из реальных возможностей и помните, что даже самая простая стилизованная графика может выглядеть классно.
Ваши главные инструменты — это стилизация и обобщение, они помогут сделать персонажей узнаваемыми. Возьмём «Симпсонов» — их герои выполнены в одном обобщённом стиле — не таком натуралистичном, как на картинах художников Возрождения.
Тут главное — узнаваемый считываемый образ и чёткое следование канону.
В быстром цикле разработки, например, при создании инди-платформера нужно думать не только о внешнем виде персонажей, но и об удобстве для масштабирования.
Хорошо, когда персонажи легко тиражируются — в этом поможет минимальное количество деталей и читаемый силуэт. Чем сложнее персонаж, тем трудозатратнее производство графики и анимации.
Bowmasters — мобильная контентная игра в стиле GaaS. Для таких проектов, с учётом быстрого цикла разработки, необходимо выпускать новый контент и поддерживать интерес игроков. Для них новый контент становится одним из уникальных USP, а разработчикам нужно делать ставку на оптимизацию скорости выпуска персонажей.
Но не только скорость разработки повлияла на внешний вид наших персонажей и стилистику в целом. Отсылки к мемам, популярным образам и любимым героям играют важную роль. Есть небольшой лайфхак: сделали игру — добавьте туда котика.
Самые доступные инструменты, которые помогут понять востребованность образов, — это Google Trends и Yandex Wordstat. С ними можно не только определить, какой из героев больше на слуху, но и оценить динамику тренда — вовремя заметить, что один из вариантов уже пошёл вниз и начинает забываться.
К разработке графики стоит переходить, когда природное чутьё, понимание трендов, художественный вкус и знание рынка привели к взвешенному образу персонажа.
Обычно пайплайн разработки 2D-контента для мобильных раннеров, платформеров или экшенов не сильно отличается от студии к студии. Коротко расскажу о нашем:
Геймдизайнер создает документ с подробным визуальным описанием персонажа, а также необходимыми анимациями, суперспособностями, и даже репликами — это очень важно, чтобы получить релевантный образ. Туда же прикладываются референсы, и задача отправляется художнику.
Создаются первые черновые скетчи — 3-6 максимально разных идей в рамках одной концепции. Скетчи обычно делаются в ч/б линиях или «от пятна», чтобы определиться с примерным силуэтом, образом и ключевыми деталями.
Выбирается общий образ, после чего уточняются формы и детали, предлагаются различные решения для нюансов. Проработанные скетчи через фидбек и уточнения приобретают необходимый внешний вид.
После согласования монохромного скетча подбирается цветовая схема персонажа, после выбора которой вносятся последние правки — получается финальный скетч.
Разработка финального арта происходит в Photoshop. Все важные детали создаются в отдельных слоях с соблюдением иерархии наложения объектов друг на друга, как для привычной перекладной анимации, которая позволяет не рисовать каждый кадр отдельно. То есть ноги — это нижние слои, затем части туловища, элементы лица, одежда. Верхние слои — это рука, которая ближе к игроку, так как при анимации она может перекрывать корпус.
Все слои именуются в соответствии с содержанием и на английском языке — это облегчает экспорт и поиск какого-либо определённого элемента персонажа.
Финальный персонаж также проходит этап согласования перед тем, как задачу на арт можно считать завершённой.
Важный момент: для персонажей очень важна «читаемость» — они не должны сливаться с фоном, потому герои всегда проверяются не в вакууме или на дефолтной подложке, а на реальных игровых бэкграундах. И так как мы разрабатываем мобильные игры, то тестируем сразу на устройствах, а не на мониторах, чтобы понимать, как это видит игрок.
Это же работает и на сложных проектах — персонажи должны выглядеть в окружении гармонично. Нельзя жертвовать считываемостью в угоду дизайну отдельных элементов.
По опыту могу сказать, что такой итеративный процесс разработки и апрува скетчей помогает избежать дорогостоящих правок или замены финальной графики.
А для удержания стилистического единства персонажей мы пользуемся простыми правилами:
Отдельно стоит прописать то, чего делать не стоит, и к каким последствиям это может привести. Например, не менять пропорции без согласования, так как может не подойти анимация. Такой документ тоже поможет сэкономить время на правках, быстро обучать и онбордить новых членов команды.
Когда сделали одного такого персонажа по всем правилам, то сделать пачку следующих по образу и подобию уже будет проще.
Если проект не ограничивается одним персонажем и парой спрайтов для фона, то следует также организовать систему хранения файлов и каталогов. Это отдельная тема, но могу точно сказать, что хорошая структура хранения и понятный нейминг — ключ к сохранению порядка на проекте и экономии времени.
Такой подход облегчит поиск и доступ к необходимым файлам как самими 2D-художниками, так и аниматорам и программистам.
Когда арт готов, можно переходить к созданию анимации. Для персонажей Bowmasters мы используем костную анимацию в Spine.
Для стандартных героев по умолчанию есть три типа скелета (для толстяка, накачанного и обычного телосложения) и набор универсальных движений и поз — это позволяет в разы сокращать трудозатраты при сохранении стандарта качества графики. То есть все наши персонажи заранее адаптированы под «пересадку» стандартных анимаций, что минимизирует время на риг. Десять минут — и новый герой может прыгать, падать, грозно размахивать руками или трястись от испуга.
А вот уникальные, сочные анимации припасены для фаталити — мы проводили опросы игроков и ничто их так не радует, как сокрушительная победа над соперником. Таким образом игрок не пресыщен перманентным визуальным безумием.
Когда стиль выработан и понятен, можно позволить себе некоторые отступления от правил. Если это сделает вашего героя действительно особенным и ценным для игрока, то вы вправе отойти от канона, не нарушив стилистической гармонии образа. Мы тоже так делаем.
Например, один из наших любимых персонажей — Акула. Может показаться, что она отличается по форме от гуманоидных персонажей, но если разобраться, в её основе все тот же классический набор основных спрайтов — под неё легко адаптировать стандартный персонажный риг.
Мы немного «нарушили» правило только по части визуального стиля, а на трудозатратах со стороны аниматоров и кодеров это никак не отразилось. Отбросив условности, можно сказать, что внутри акула — тоже человек!
Бывает так, что есть и далеко идущие цели, и готовые пайплайны с инструкциями, но присутствует стойкое ощущение, что порядка на проекте всё ещё не хватает. Возможно, просадка именно в планировании — нет понимания, сколько, чего и какими силами можно добавить в игру в следующем апдейте. И это очень важный момент, о котором забывают многие начинающие разработчики игр.
Если знать, сколько времени было затрачено в среднем на типовые образцы графики, можно выделить общие сроки для каждого вида контента, будь то персонаж или какая-нибудь стандартная интерфейсная кнопка.
Но даже в рамках одного типа, арт может разниться по степени трудоёмкости — это следует учитывать при планировании, условно разделив внутри типов графику на простую, обычную и сложную в исполнении.
После этого можно прогнозировать реальные сроки путём простых вычислений.
Для условного примера рассмотрим графику для простого персонажа гиперказуальной игры с минимальной детализацией, для которого уже утверждены технические требования и порядок разработки:
Аналогичным образом прогнозируем трудозатраты на производство прочей необходимой графики и делим получившиеся результаты на количество художников команды, которым предстоит заниматься разработкой.
Мы попробовали разобрать процесс разработки персонажа для гиперказуальных проектов, но при этом есть много нюансов у воркфлоу разных жанров. Для быстрого старта можно взять готовый, это особенно полезно на этапе проработки прототипов.
Оптимизируйте, планируйте и помните, что незаурядные персонажи и весёлая анимация могут вдохнуть жизнь в игру с самой простой графикой.
Основы пиксельарта (Часть 1)
Пиксельарт, также известный как дот-арт в Японии, это вид цифрового искусства, где рисование происходит на пиксельном уровне. В основном он ассоциируется с графикой игр 80-90 годов, в которых художники преодолевали технические ограничения (небольшое количество памяти и маленькое разрешение), создавая все более захватывающие картины.
Порог вхождения в пиксельарт довольно низкий, по сравнению с традиционным рисунком и 3D графикой, позволяя инди разработчикам воплощать свои идеи в жизнь. Но это никоим образом не означает, что закончить игру с ним будет легко. Я видел много пиксельарт проектов на кикстартере, которые думали, что управятся с игрой за год, когда в реальности нужно было около шести лет. Пиксельарт на том уровне, который хотят видеть люди требует достаточно много времени и усилий, есть лишь пару путей, позволяющих ускорить этот процесс.
Работая с 3D моделью ты, по крайней мере, можешь крутить ее, деформировать, перемещать её конечности, копировать анимацию с одной модели на другую и т.д, чего не скажешь о пиксельарте. Профессиональный пиксельарт почти всегда подразумевает под собой большое количество кропотливого размещения пикселей на каждом кадре анимации.
Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.
Мои любимые игры этой эры имели пиксельарт, который нельзя описать иначе как насыщенный, дерзкий и чёткий. но не настолько, чтобы быть чопорным или минималистичным. Это стиль, который я взял за основу своего, но вы можете легко использовать техники, применяемые в этом туториале для чего-то совсем другого. Смотрите на художников, которые вам нравятся и делайте пиксельарт, какой вашей душе угодно!
Самыми базовыми инструментами для занятия пиксельартом являются лупа и карандаш. Также будут полезными линия, фигуры, выделение и заливка цветом. Есть большое количество как платных, так и бесплатных программ, в которых имеются данные инструменты. Я расскажу о самых популярных из них (включая те, которые использую сам).
Если у вас Windows, вы можете использовать Paint, несмотря на скудность программы, в ней имеются все нужные инструменты, чтобы заниматься пиксельартом.
На удивление неплохой редактор, которым вы можете пользоваться прямо через ваш браузер. Может производить экспорт как в png и gif, так и сохранять спрайты в браузере. Неплохой способ начать заниматься пиксельартом.
Самый популярный редактор на данный момент. Содержит большое количество полезных функций и инструментов, постоянно обновляется, доступен как на Windows и Mac, так и на Linux. К тому же вы можете пользоваться программой бесплатно, скомпилировав её исходный код. Если вы серьёзно хотите заниматься пиксельартом и ещё не выбрали себе редактор, то Aseprite будет неплохим вариантом.
Так как Photoshop требует ежемесячную плату и не приспособлен для пиксельарта, я не рекомендую его, если только вы уже не используете его. Несмотря на выше сказанное, его вполне можно использовать для статических спрайтов, но он достаточно громоздкий по сравнению с GraphicsGale или Aseprite.
Я настоятельно рекомендую пользоваться графическим планшетом для любого вида иллюстраций, чтобы предотвратить заболевания повторяющейся длительной нагрузки на запястье (туннельный синдром). Такие заболевания намного легче предотвратить, чем вылечить. Когда появляется боль, вы уже обречены ( мои дни рисования мышкой, сделали невозможным играть в игры с быстрым нажатием кнопок). Так, что позаботьтесь о себе пока не поздно – это того стоит! В данный момент я использую маленький Wacom Intuous Pro.
Если у вас нет возможности купить планшет, по крайней мере, возьмите лучезапястный бандаж. Я использую от компании Mueller Green Fitted Wrist Brace. У других брендов бандажи были либо слишком неудобными, либо недостаточно эффективными.
Давайте приступим к делу! Мы начнем со спрайта персонажа размером 96×96 пикселей. Я решил нарисовать орка, но вы вправе выбрать что-то другое. Конечный вариант орка находится на скриншоте Final Fight, который вы можете увидеть выше, для того, чтобы вы понимали масштаб спрайта– он большой для большинства ретро игр (оригинальный скриншот имеет размер 384×224 пикселя).
Причина по которой мы начинаем с такого большого спрайта заключается в том, что мне будет легче показать техники пиксельарта именно на нем. К тому же, создание больших спрайтов очень похоже на обычное рисование, которое может быть вам знакомо. После того, как мы изучим базовые техники можно будет уменьшить размер спрайта.
Пиксельарт характеризуется своими ограничениями. Каждый пиксель имеет большое значение, по сравнению с другими видами иллюстраций, также как и цвета, количество которых должно быть ограничено.
Так, что да, выбор палитры цветов очень важен и помогает обозначить ваш стиль. Но для начинающих пиксельарт художников лучшим вариантом будет отложить теорию насчёт цветов в сторону и просто выбрать одну из существующих палитр ( или несколько рандомных цветов), чтобы начать рисовать. Одно из преимуществ пиксельарта заключается в том, что вы в любой момент можете поменять палитру цветов.
Именно для этого туториала я буду использовать палитру из 32 цветов, созданную специально для UFO 50. Палитры из 32 и 16 цветов используются достаточно часто. Данная палитра была создана для выдуманной консоли, которая бы находилась где-то между Famicon и PC Engine. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).
Мы начнем рисовать наш спрайт с наброска карандашом, также как если бы мы рисовали на бумаге. Опираясь на свой опыт, могу сказать, что неплохие пиксельарт художники достаточно хороши в обычном рисовании и наоборот. Так что никогда не помешает улучшить свои навыки рисования.
Дальше мы должны убрать лишние пиксели и сделать все линии толщиной в один пиксель. Но какие пиксели являются лишними? – для того, чтобы ответить на данный вопрос, нам нужно познакомиться с таким понятием как зазубрины.
Нам нужно научиться делать два вида линий: прямые и закруглённые. На бумаге все будет зависеть от контроля мышц, но мы работаем с маленькими цветными блоками, что создает свои трудности.
Для того, чтобы делать хорошие линии, нужно свести к минимуму количество зазубрин: маленьких пикселей или группы пикселей, которые нарушают последовательность линии. Так как в пиксельарте каждый пиксель имеет большое значение, пару зазубрин могут испортить весь спрайт. Представьте, что вы рисуете линию на кусочке бумаги и кто-то внезапно стукает по столу, получившаяся у вас загогулина является тем же, что и зазубрины в пиксельарте.
Пиксель-арт: от черновика до игрового ассета
→
В этой статье я постараюсь визуализировать общий подход к работе. Итак, вы решили учиться арту: вы скачали какое-то ПО, запустили его и увидели все эти опции, бесконечные цвета и многое другое, быстро всё закрыли, удалили программу и выбросили свой ноутбук в окно.
Возможно, спустя несколько месяцев вы это повторите. Иногда вы попытаетесь нарисовать пару линий, которые выглядят как детский карандашный рисунок, или даже хуже, и на этом решите бросить.
Если вам это знакомо, то данная статья как раз для вас, так что продолжайте читать.
Независимые разработчики игр довольно часто жалуются на то, что они не могут создавать графику, потому что они программисты, а денег на оплату художников у них нет.
И хотя изучение арта может показаться устрашающей задачей, в реальности вы можете подняться до вполне достойного уровня, потратив на практику по крайней мере один год.
Если возьмётесь за работу очень усердно, то, возможно, получите неплохие результаты через несколько месяцев.
Приготовьтесь к пиксель-арту
В этой статье я рассмотрю пиксель-арт. Считаете, что он давно стал клише и от него все устали?
Ну, на самом деле, пиксель-арт — превосходное подспорье для того, чтобы стать художником. Вы обнаружите, что достаточно хорошо освоив пиксель-арт, очень легко можно перейти к другим стилям графики.
Ещё одно серьёзное преимущество заключается в том, что вам нужна только мышь, и не надо тратить деньги на графический планшет. На самом деле, большинство людей, рисующих пиксель арт, предпочитает ради повышенной точности пользоваться мышью.
Часто про пиксель-арт говорят и такое: «он может выглядеть красиво, но большинство пиксельной графики инди-разработчиков ужасно».
И я могу с этим согласиться, но если вы будете следовать правилам из этой статьи, то ваш пиксель-арт будет выше среднего, не волнуйтесь.
10 этапов создания пиксель-арта
Лучший способ повышения навыка — сначала узнать правила. Позже их можно нарушить, но когда учишься чему-то новому, следование правилам даёт тебе сильный толчок вперёд.
В этой статье я расскажу вам о десяти этапах и паре правил, которые помогут вам начать. Можете повторять их с любой пиксель-артной графикой, которую вам нужно создать.
Чтобы игра выглядела хорошо, ей нужен уверенный графический стиль, и если вы будете следовать моим рекомендациям, вы этого добьётесь.
Этап 1 — палитра
Никогда не выбирайте цвета самостоятельно. Цвет — сам по себе искусство, но, к счастью, мы можем позволить заняться им профессионалам. Загляните сюда и выберите цветовую палитру.
Учтите, что количество цветов в палитрах может быть разным. Не рекомендую использовать палитры больше 32 цветов, а для начала даже 16 цветов.
Для этой статьи я выберу такую палитру. Можно было взять любую другую, я выбрал её случайным образом из списка.
Этап 2 — разрешение
Для начала выбирайте небольшое разрешение. Если вы новичок, то ударьтесь в ретро и создавайте спрайты размером 16×16 или 32×32, не больше.
Можно использовать и другие соотношения, например 24×32, главное, не слишком больше этого.
Этап 3 — контуры
При рисовании объекта сначала нарисуйте одним цветом, например чёрным, его контур. На этом этапе не допускаются никакие другие цвета.
Рекомендуется всегда иметь перед глазами референс (справочное изображение). Вы должны иметь возможность видеть референс, пока рисуете, а не постоянно переключать окна.
Также проверьте, чтобы в контуре не было дыр, на данном этапе это самое важное.
Я нарисовал такого паренька с разрешением 32×32. Выглядит он ужасно.
По крайней мере, теперь вы не будете жаловаться, что я не начал с самого начала!
Этап 4 — цвета
Убедившись, что контур достаточно хорош, можно приступать к заливке внутренней части. В большинстве программ есть инструмент «Заливка цветом», и это самый быстрый способ заполнения внутренних областей нужным цветом.
Здесь снова используйте как можно меньше цветов, и только из палитры, которую вы выбрали. В хорошем дизайне персонажа будет как минимум три различных диапазона. По сути, диапазон (ramp) — это способ упорядочивания цветов палитры по семействам оттенков, от тёмного к светлому.
Обычно на этом этапе нужно выбирать цвета из середины каждого диапазона, то есть не очень тёмные и не очень светлые, только если по каким-то причинам вы рисуете объект или персонаж, для которого нужны именно они.
Вот пример возможных диапазонов ранее выбранной мной палитры. Заметьте, что я не добавлял все цвета из палитры, только некоторые, чтобы вы поняли принцип.
Также на картинке видно, что цвет может использоваться в нескольких диапазонах, становясь или начальным, или конечным цветом.
Итак, я выбрал несколько цветов из палитры и раскрасил своего персонажа.
Помните, я говорил, что важно не оставлять дыр?
Этап 5 — оттенки
На этом этапе могут застрять многие, и на самом деле можно создать красиво выглядящую игру только на основе предыдущих этапов, без оттенков. Достаточно придерживаться правила цветовой палитры, сохранять целостность художественного стиля, и ваша игра уже будет выглядеть лучше, чем большинство других.
Но чтобы расти как художнику, вам необходимо освоить навык затенения.
Для начала есть простой трюк: нужно выбрать направление освещения в игре — слева или справа, а затем придерживаться его при создании каждого спрайта, тайла и всего остального.
Примечание
Это означает, что если у вас есть персонаж, смотрящий вправо, то чтобы он смотрел влево, нельзя просто отзеркалить его в коде. Его нужно перерисовать с учётом фиксированного направления света.
Основная идея затенения заключается в том, что части изображения, на которые падает прямой свет, становятся светлее, а части, на которые не падает свет, остаются в тени, поэтому они становятся темнее. Очень просто, правда?
Но если вы новичок в графике, то, скорее всего, не понимаете, как это сделать, и в большинстве туториалов это не объясняется, потому что просто читая слова, этому не научиться.
Поэтому вот вам хитрость. В своём примере я возьму освещение, падающее справа.
Для начала каждому цвету персонажа я подберу более светлый цвет, и раскрашу один пиксель каждого края, находящегося справа или сверху.
Затем для каждого цвета персонажа я выберу более тёмный цвет и раскрашу им каждый пиксель каждого края, находящегося слева или внизу.
Знаю, что это выглядит довольно ужасно, но продолжайте чтение, и вскоре мы улучшим ситуацию.
Если по каким-то причинам этот этап кажется вам слишком сложным, то приблизьте изображение и посмотрите, как я это сделал — добавлены два дополнительных оттенка для синего, красного и бежевого цветов. Все они выбраны из палитры и нанесены с учётом правила «сверху-справа»/«слева-внизу».
Этап 6 — пропорции
Это ещё один источник неудач для начинающего художника. К счастью, пиксель-арт низкого разрешения сильно упрощает его.
На этом этапе всё становится довольно субъективным. Возможно, это вас удивит, но чтобы стать хорошим художником, нужно практиковаться не руками, а глазами.
Ваша основная задача — разбудить в себе нечто, называемое «взглядом художника». Это особый навык, позволяющий вам смотреть на вещи и разлагать их на составные части, а затем складывать их своими руками.
«Взгляд художника» раскрывается сочетанием создания собственной графики и изучения работ других людей. Необходимы оба шага: если вы просто продолжите рисовать, не глядя на работы других, или будете только изучать других, не рисуя, то этот взгляд у вас не разовьётся.
Давайте проверим ваши собственные глаза — снова взгляните на этот ужасный спрайт и скажите, какие его части выглядят глупо.
(Не тратьте время на поиск отличий между этим и предыдущим изображением, они одинаковы, я просто повторил его здесь для удобства.)
Первое, что приходит в голову — похоже, что наш персонаж падает. Давайте ему поможем.
Единственное, что я здесь сделал — переместил по горизонтали несколько пикселей. Из этого можно понять, что создание рисунков — это очень итеративный процесс. У вас не получится сделать всё правильно с первого раза, придётся вносить кучу переработок.
Давайте ещё раз взглянем на эту версию и подумаем, что теперь с ней не так?
Мне кажется, что бедный персонаж танцует, но он не должен танцевать, так что давайте это исправим.
Отлично, поза стала получше, а ещё я добавил ему штаны.
Примечание
Для создания поз можно использовать тысячи референсов из Интернета. Вполне может хватить даже каких-то случайных фотографий.
Не думайте, что художники рисуют только из своего воображения, они смотрят на референсы!
Это похоже на то, как кодеры ежедневно заходят в Google или на Stack Overflow — никого это не волнует.
Этап 7 — подчищаем блоки
Видите эти некрасивые чёрные скопления пикселей?
Давайте избавимся от них всех и создадим правило, что пиксель может касаться максимум двух других пикселей.
Персонаж стал чище. По какой-то причине это изменение дало мне понять, что у него должен быть длинный нос, поэтому добавим его.
Иногда сам процесс редактирования даёт нам вдохновение.
Примечание
При удалении скоплений пикселей существуют некоторые исключения: иногда нельзя удалить определённый пиксель, даже если он образует скопление, потому что в противном случае в контуре возникнет дырка.
Я добавил нос и немного изменил форму головы, чтобы она лучше соответствовала носу.
Также я добавил контуры вокруг ног, чтобы они соответствовали остальным частям. Весь арт в игре должен быть целостным!
Этап 8 — подчищаем оттенки
Хитрость, которую мы применили при затенении, сработал, но в некоторых частях персонаж всё равно выглядит немного уродливо.
Если ваш взгляд художника уже активировался, то у вас появятся предпочтения по замене тёмных и светлых пикселей более нейтральным оттенком.
Здесь я сделал пару действий — заменил все яркие и тёмные пиксели, которые казались неуместными, а затем изменил внешние контуры.
Пиксель-арт имеет такое низкое разрешение, что контуры отнимают пространство, необходимое для деталей. В некоторых важных местах они нужны, но не в этом случае.
Также я добавил персонажу руки и ноги, больше соответствующие стилю других его частей.
Небольшое изменение: я изменил его штаны и переместил на пару пикселей. Но что-то всё равно кажется странным, я не совсем понимаю, что делать дальше.
Давайте попробуем убрать контуры, заменив их на цвета ближайших пикселей.
Если посмотреть на персонажа теперь, то ноги выглядят странно, как у кентавра. И ещё у него странное лицо — нос смотрит в одном направлении, а глаза — в другом.
Художники используют хитрость, позволяющую мозгу искать ошибки — они смотрят на рисунок под другим углом.
Свежий взгляд позволяет заметить то, что не видел раньше, и когда я убирал контуры, можно было просто посмотреть на перевёрнутое изображение!
Итак, я переделал многие части его головы, рук и ног. Он уже выглядит полностью иначе, немного правильнее.
Но постойте, почему у него нет ушей? И почему кажется, что его шляпа висит в воздухе, а не соединена с головой?
Мы это исправили, и теперь персонаж начал выглядеть намного профессиональнее. Посмотрите на затенение на шляпе. Понимаете ли вы, как оно работает?
В нём просто применено то же правило — свет с одной стороны, тень с другой. При правильной реализации персонаж выглядит почти трёхмерным.
Чтобы затенение выглядело правильным, если у вас ещё не открылся «взгляд художника», то просто пробуйте разные сочетания тёмных, нейтральных и светлых пикселей.
Всегда придерживайтесь трёх оттенков. Здесь сложно ошибиться, потому что при работе со спрайтами низкого разрешения изменений бывает очень мало.
Однако внешний вид затенения иногда может сильно зависеть от единственного пикселя. Это вы поймёте со временем и практикой.
Примечание
Как только вы начнёте понимать, как работает затенение, то сможете лучше создавать объекты, имеющие объём, что и является основной задачей затенения.
Однако стоит помнить, что изучаемой нами системы с тремя оттенками более чем достаточно для большинства пиксель-арта низкого разрешения. Добавление большего количества оттенков делает пиксель-арт более грязным и шумным.
Этап 9 — доводка
Да, персонажа уже можно использовать, но давайте продолжим улучшать его.
Ещё один простой трюк, позволяющий добавить объёма — знание о том, что в дальних частях объектов нужно использовать более тёмные оттенки.
Поэтому я сделал одну из рук и одну из ног более тёмного оттенка, всё просто.
Давайте ещё что-нибудь улучшим!
Здесь я немного изменил положение рук. Совершенно нормально перерисовывать части персонажа, пока вы не будете полностью довольны. Чем больше практикуетесь, тем быстрее будете получать качественный результат и тем меньше понадобится переделок.
Ещё я добавил шарф и волосы. Учтите, что если добавлять разные элементы, расположенные близко друг к другу и имеющие одинаковые или похожие цвета, то это будет сбивать с толку.
В нашем случае шарф позволяет добавить контраста для отделения волос от рубашки.
Также я немного изменил цвет глаз, это уже касается дизайна персонажа — мне показалось, что чёрные глаза не соответствуют остальным частям.
А затем нужны два тёмных пикселя посередине рубашки?
В основном ради эксперимента: я попробовал, и мне понравился результат. Так как пиксель-арт с низким разрешением требует немного воображения, эти два пикселя намекают складки на одежде, или что персонаж одет в водолазку, или что он женского пола.
Наконец, я снова вернул контур, рисуя по пикселю за раз и избегая создания скоплений пикселей.
Рисовать контуры или нет — в основном вопрос предпочтений. Но они помогают создать контраст между персонажами и фоном.
Контур не обязан всегда быть чёрным. Вот альтернативный способ создания контура — мы смотрим на соседние с контуром пиксели и выбираем немного более тёмный оттенок.
Разумеется, я всегда использую только цвета из исходной палитры, не забывайте об этом!
Эта последняя версия может выглядеть лучше, но чем больше цветов, тем больше времени будет уходить на анимацию. Поэтому здесь я снова вернусь к чёрному контуру.
Примечание
Если сравнить версию с контуром и версию без контура, то контур может выглядеть «тяжёлым».
Выбор того или иного варианта зависит от эффекта, который нужен для вашего стиля графики.
Этап 10 — анимация
По сути анимирование заключается в следующем: мы берём наш спрайт и создаём слегка отличающиеся кадры в других позах.
Низкое разрешение пиксель-арта помогает и в обучении анимации. Давайте начнём с анимации бездействия, самой простой из всех видов анимаций.
По сути, я просто выделил половину спрайта и переместил её вниз. Если вы ленивый разработчик, то вам и этого будет достаточно, но не для меня!
На этот раз я переместил ещё несколько пикселей, переместив вверх волосы, шляпу и нос. Так сделано потому, что когда перемещает голову вниз, всё остальное тоже сдвигается вниз, но не мгновенно, что добавляет задержку для этих частей.
Обе руки я немного сместил влево, чтобы симулировать небольшой вторичное движение. Это не какой-то специализированный термин, он просто означает, что это независимое действие, никак не связанное с колебаниями головы.
Этап 10 — субпиксельная анимация
Если вы добрались досюда, то уже входите на территорию более сложных задач.
Пока низкое разрешение помогало скрывать то, что мы изучаем графику, но иногда оно работает против нас.
Последний кадр стал хорошим тому примером: движения шляпы и носа слишком уж сильные. Но мы ведь сдвинули их всего на один пиксель вверх!
Вот если бы мы могли сдвинуть их меньше, чем на пиксель, чтобы сделать движение более плавным… Но увы, пиксель — это самая маленькая величина.
Однако есть одна хитрость — вместо того, чтобы двигать пиксели, мы можем двигать цвета!
Поэтому я вернул нос и шляпу на их исходное место, и вместо этого меняю только цвета, заливая их соответствующими тёмными и светлыми оттенками так, как мне показалось правильным.
И этот трюк тоже зависит от вашего «взгляда художника». Активно тренируйте его, и постепенно начнёте работать всё проще и быстрее!
Заключение
Надеюсь, вам понравилось наблюдать, как я превратил совершенно бесформенную фигуру из палочек и кружочков в персонажа, которого можно использовать в игре. Я попытался показать все этапы и объяснить, почему и как я их выполнял, чтобы это не превратилось в ещё один туториал «нарисуйте оставшуюся часть совы».
Я планирую выпустить похожие статьи по другим темам, например, тайлсетам, низкополигональным моделям или даже музыке, всё зависит только от свободного времени и мотивации.
Также не забудьте прочитать мою статью про pixel perfect graphics, которая тоже очень важна для создания целостного графического стиля.