Главная » Хабрахабр » [Перевод] Добавляем глубину 2D-спрайтам с помощью отрисованных вручную карт нормалей

[Перевод] Добавляем глубину 2D-спрайтам с помощью отрисованных вручную карт нормалей

Пиксель-арт вечен, но это не значит, что инструменты и методики работы с ним должны оставаться на уровне 1993 года.

Команда публикует серию дневников разработки, знакомящую других разработчиков с тем, как использовать эти инструменты в собственных играх. Британский разработчик игр Cardboard Sword работает над двухмерным стелс-платформером The Siege and the Sandfox, создаваемом в Unreal Engine 4 с Paper2D.

Одна из основных технических особенностей The Siege and the Sandfox — использование отрисованных вручную тайлсетов и спрайтов с картами нормалей, позволяющих применять в этой игре с достаточно традиционным двумерным пиксель-артом способы трёхмерного освещения.

Один из арт-директоров Cardboard Sword Кейт Дюк-Кокс недавно рассказал Gamasutra, как компания пришла к использованию этой техники, о том, почему она подходит игре и как можно применить подобные техники в собственных 2D-играх.

Добавляем ощущение глубины

Какие преимущества дают карты нормалей по сравнению с традиционным плоским освещением в 2D-игре?

Мы хотели, чтобы наш арт был богатым, глубоким и «выпуклым». Кейт Дюк-Кокс: задача арт-директора целиком посвящена поиску индивидуального стиля и достижению нужного эффекта. Нормали позволили достичь этой цели, придавая ощущение формы и прочности миру и его объектам.

Это изображение, опубликованное Кейтом Дюк-Коксом в Twitter в августе 2017 года — потрясающий пример реализации техники.

Свет правильнее реагирует на поверхности, а без нормалей создавалось ощущение очень плоского «листа бумаги». Например, использование нормалей придаёт источникам опасности более осязаемый вид.

При правильном использовании карты нормалей могут добавить объектам в сцене ощущение глубины и веса, которого не достичь плоским 2D-изображениям.

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

Откуда вы о нём узнали, или где увидели качественную реализацию? Что изначально привлекло вас к использованию карт нормалей для освещения в 2D?

Разумеется, мы не первые использовали их в современных пиксель-артных играх, но результаты получались разными. Применение нормалей к 2D-графике было естественным продолжением их использования в 3D, которое было невозможно на старых системах, которыми мы вдохновлялись при создании стиля.

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

[Вот статья о применении 3D-моделей в этой двухмерной игре.] На этот раз мы использовали карту нормалей не для мелких деталей поверхностей, которые можно увидеть в 3D-графике. Но потом мы увидели арт Гвенаэля Массе для Dead Cells, в котором пиксель-арт с нормалями был сделан очень хорошо, и решили дать ему второй шанс. Теперь карта нормалей использовалась для «вылепливания» крупных форм пиксель-арта.

Скульптинг форм с помощью карт нормалей

Можете вкратце рассказать о процессе разработки ассета, в особенности об отличиях от создания аналогичного простого спрайтового 2D-ассета?

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

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

Они помогали с некоторыми формами и правильно смешивали вместе разные части нормалей. В зависимости от природы спрайта, которому добавляли нормали, мы использовали сочетание рисования цветов углов нормалей из «сферы карт нормалей» (по сути это сфера, служащая палитрой всех возможных углов, которые можно отрисовать на карте касательных нормалей) и рисования в отдельных RGB-каналах в оттенках серого с другими инструментами, такими как ND, Crazybump или AwesomeBump.

Мы использовали Nvidia TextureTools for Photoshop для корректировки/нормализации векторов после завершения рисования карты нормалей.

Каковы преимущества подобного рисования карт нормалей вручную по сравнению с готовыми инструментами наподобие Sprite DLight?

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

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

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

Мы провели тесты со всеми тремя методами и выяснили, что метод ручного рисования определённо даёт наилучшие результаты. Существует два стандартных метода ускоренной автоматизированной генерации карт нормалей — Grayscale Conversion и Shape Recognition.

Grayscale Conversion и Shape Recognition могут создавать эффекты лучше, чем показано здесь, но даже при существенных затратах труда и времени они всё равно не так точны и хороши, как рисование вручную.

Использование карт нормалей в собственных 2D-играх

Какой совет вы можете дать разработчикам, которые захотят пойти вашим путём?

Работа над всеми тайлсетами переднего плана и фона заняла примерно 3 человеко-месяца. Создание точных 2D-нормалей вручную — непростая задача. Поэтому для получения качественных результатов готовьтесь вложить много времени.

Системы типа «создать решение одной кнопкой» часто приводят к созданию слабых ассетов, которые при рендеринге в игре выглядят даже хуже, чем неосвещённый пиксель-арт. Быстро создаваемые нормали для 2D-графики, особенно пиксель-арта, обычно выглядят плохо. Проведите тестирование на небольшой части игры (малой выборке из переднего плана, фона, объектов и персонажей) и выясните, что лучше подходит вам и стилю вашей игры.

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

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

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

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

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

При разрешении тайла 16x16 или 8x8 вам, вероятно, не удастся передать форму или объём, только если один тайл не будет одной большой деталью, например каменным или бетонным блоком. Если вы будете использовать меньшее разрешение, чем мы в своих тайлсетах (32x32), то, возможно, размер вас слишком ограничит.

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

Например, в Unity или в Gamemaker. Есть ли у вас какие-нибудь советы тем разработчикам, которые захотят применить эти техники не в Unreal?

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

В Unreal используются нормали Y- левосторонней системы координат DirectX, но в Unity применяются нормали Y+ правосторонней системы координат OpenGL (как нам кажется), поэтому зелёный канал должен быть перевёрнут. Обычно в разных движках меняется только ось Y (зелёный канал).

Вы увидите, что канал перепутан, если изображение будет освещено противоположно ожидаемому результату. Однако если вы нарисовали неправильно, то чаще всего достаточно бывает простого переворота зелёного канала.


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Теория счастья. Случайности неслучайны

Продолжаю знакомить читателей Хабра с главами из своей книжки «Теория счастья» с подзаголовком «Математические основы законов подлости». Это ещё не изданная научно-популярная книжка, очень неформально рассказывающая о том, как математика позволяет с новой степенью осознанности взглянуть на мир и жизнь ...

Снежинки в стилистике StarWars своими руками (upd. 2018)

Для изготовления снежинок вам потребуется: Файл со схемой.2. 1. Ножницы.4. Принтер (думаю лазерный будет предпочтительней).3. Бумага.5. Скальпель.5. Лично мое мнение — при печати на стандартной офисной бумаге плотностью 80г/м2 становится не очень удобно вырезать (все-таки при складывании бумаги получается толстый ...