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

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

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

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

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

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

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

Поехали!

Общие положения

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

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

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

Сцены

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры сцен и объектов

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

Освещение на сцене и окклюзия

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

Сцена без окклюзии
Сцена без окклюзии
Один слой тени, прозрачность 20%
Один слой тени, прозрачность 20%
Два слоя теней, прозрачность 20% и 15%
Два слоя теней, прозрачность 20% и 15%
Сцена без окклюзии
Сцена без окклюзии
Один слой тени, прозрачность 10%
Один слой тени, прозрачность 10%
Два слоя теней, прозрачность 10% и 15%
Два слоя теней, прозрачность 10% и 15%

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

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

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

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

Объекты

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

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

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

Освещение объектов и свет

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

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

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

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

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

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

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

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

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

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

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

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

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

Формат сцен

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

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

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

Начало работы над сценой

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

2323
1 комментарий

Пиксель арт, у Вас парни, просто шикарный!

2
Ответить