Гайд для Punch Club: тонкости пиксель-арта

Создатели Punch Club написали гайд для художников, которые захотят присоединиться к проекту.

Питерская студия Lazy Bear Games, авторы пиксельного проекта Punch Club, разрабатывают вторую часть — она выйдет в 2017 году (скорее всего, во второй половине, как утверждают авторы). Специально для DTF они рассказали, как создается арт игры и написали гайд.

Мы, Lazy Bear Games, ищем фрилансеров (кстати, пишите в FB или форму, если интересно) для Punch Club 2: создали тестовое задание, а заодно написали некий гайд-туториал, который бы помог всем художникам синхронизироваться.

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

Надеюсь, кому-то будет интересно и полезно.

Поехали!

Игра нарисована в пиксель-арте. Мы оперируем понятием кратности пикселя: одинарный пиксель, двойной и тройной.

Вся графика рисуется изначально в одинарном (х1) пикселе. В случае игры графический движок сам отрисовывает графику в двойном пикселе или в тройном, если это требуется. Поэтому всю графику мы смотрим и оцениваем именно в х2 пикселе. Арт должен показываться только в х2 пикселе (скриншоты делаются с 200% zoom «фотошопа» или при экспорте изображение увеличивается вручную). Тройной пиксель включается в full-screen режиме игры (full HD) и для просмотра работ не предназначен.

Изометрия. В игре горизонтальные плоскости строятся в пропорции 2:1, то есть равносторонний предмет будет примерно иметь по ширине две единицы измерения, по глубине — одну.

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

Три типа геометрии сцен:

1, 3 — открытые сцены или сцены с ограничением пространства с одной из сторон. 2 — закрытые сцены (комнаты, ангары, переулки).

Размещённые на сцене объекты не должны диссонировать с перспективой сцены и между собой.

1,2 — допустимое размещение объектов. 3,4,5,6 — не допускается размещение рядом двух по-разному ориентированных объектов или изометрическая перспектива объекта спорит с изометрией части сцены.

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

Основное условие для конструкции объекта — возможность в будущем размещать его в других сценах, как функциональным так и простым предметом заполнения сцены.

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

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

После прорисовки основных статичных объектов прорисовывается окклюзия. Все тени объектов и окклюзии чёрные (#000000). Её интенсивность зависит от общей освещённости сцены и состоит из двух слоёв. Первый — более общая тень, второй — подчёркивает более глубокие места.

Интенсивность тени зависит от общего характера освещения, но не должна быть «вырвиглазно» тёмной или вообще незаметной. Рекомендуемые величины — от 10 до 20%.

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

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

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

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

Почти все объекты рисуются освещёнными сверху не интенсивным светом с неявной падающей тенью, кроме некоторых уникальных для сцены объектов. Падающая тень может иметь от двух до трёх слоёв с разным радиусом рассеивания и разной прозрачностью. Как правило, для слоя с самым большим радиусом прозрачность будет — 20%, для среднего — 20% и для самого малого — 30%. Если всего два слоя для тени, то они будут иметь прозрачность — 20% и 30%. Иногда, где сцена светлая, прозрачность можно убавить до 20% и 20%.

Форма тени отдельных объектов имеет полностью хаотичный дизеринг.

Резкие грани объектов, обращённые к зрителю, имеют характерный блик, интенсивность которого зависит от фактуры объекта.

Иногда для атмосферности требуются источники света. Для имитации освещённости применяется бленда Color Dodge, так как её аналог есть в Unity. Также можно использовать Soft Light, но у него не такой характерный эффект. Само гало световых лучей не пиксельное, а просто заблуреный слой.

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

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

Свет из ворот не перекрывает NPC.

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

Сцена должна быть одинаково функциональной для всех разрешений. Сцена всегда имеет HUD, который перекрывает ее часть. Она одинаково хорошо должна смотреться в минимальном (1024х640) и максимальном (1364х764) (разрешения указаны в двойном пикселе).

Минимальная область сцены может смещаться по горизонтали. Это настраивается непосредственно в камере в Unity. Поэтому композиция может быть смещена. При малых разрешениях часть сцены просто не попадает в камеру. За пределами этой области и под HUD размещаются второстепенные не интерактивные объекты.

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