Кто: Гвенаэль Массе, художник студии Motion Twin

Привет, меня зовут Гвенаэль Массе, мы с Тома Вассё — единственные художники инди-студии Motion Twin. Среди прочего, передо мной была поставлена задача создания дизайна фонов Dead Cells. Надеюсь, что информация о моём производственном процессе может кому-нибудь пригодиться.

Давайте приступим. Фундамент художественного стиля Dead Cells основывался на трёх столпах: насыщенной цветовой палитре, кельтской архитектуре и теме алхимии.

Что: насыщенная цветовая палитра в мрачных окружениях

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

Благодаря этому игрок лучше понимает происходящее, а значит, и быстрее реагирует на потенциально смертельные источники опасности. И это замечательно подходит к такой активной игре, которой мы стремились сделать Dead Cells.

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


Комплементарные палитры, используемые в закрытом уровне (Toxic Sewers)


Палитра из близких цветов, использованная на открытом уровне (Promenade of the Condemned)

Всегда насыщенные, но никогда не гостеприимные

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

Зачем?

Эта идея применяется с самого начала Dead Cells. В первой сцене главный персонаж поднимается в сиянии тёплого света, в то время как труп погибшего великана покоится в тенях холодных цветов.


Начальная сцена Dead Cells

Несмотря на наличие зомби и постоянное присутствие в игре ощущения опасности, мы не хотели имитировать художественный стиль подобных игр. Например, палитры с высокой контрастностью и низкой насыщенностью активно используются в Salt and Sanctuary или в серии Souls, создавая достаточно драматическую атмосферу.



Пара произвольных скриншотов из Интернета

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

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

Разумеется, художественный стиль должен был выделяться из толпы похожих игр. Мы хотели сказать: «игра может быть сложной и раздражающей, может давать это ощущение успеха после победы над особо сложным боссом, даже если при этом действие происходит в странном живом и цветастом мире».

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

И наконец, когда ты начинаешь проект наподобие Dead Cells, надеешься, что он будет готов примерно за полтора года, но подсознательно ты понимаешь, что эта игра станет твоим миром, твоей повседневной работой, твоими сверхурочными, темой твоих разговоров на несколько лет… Поэтому нужно создавать то, в чём тебе приятно будет находиться долгое ремя!

Кельтская архитектура

События Dead Cells происходят на Острове, вдохновлённом островом Скай в Шотландии, и в частности, архитектурой X-XIII веков. На эти постройки в основном повлияло кельтское христианство, поэтому мы выбрали такую архитектуру, как отсылку к холодной и жестокой природе старых зданий, а также остальных знаковых черт этого стиля, например, характерных базальтовых колонн.

Мы пытались воссоздать в Dead Cells гнетущую атмосферу, создаваемую этими элементами, чтобы напоминать игроку об опасном мире, который он исследует. Органические детали архитектуры служат связью между этим неуютным антуражем и оккультной стороной лора Dead Cells: алхимией.


Одна из фотографий, использованных как референсы для Острова из Dead Cells


Базальтовые колонны, ставшие источником вдохновения для концепт-арта Dead Cells


Другие фотографии, использованные в качестве референсов для игры, можно посмотреть здесь.

Алхимия и магия

Этот третий столп объединяет всё вместе: лор, фон, монстров, геймплей, биомы и т.д. Например, Collector принадлежит магическому аспекту Dead Cells и является ключевым элементом системы развития меты, позволяющим игроку узнать о мире немного больше.


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


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

Читаемость действий

Активность игрового процесса Dead Cells требует, чтобы игрок имел возможность и способность реагировать быстро; в противном случае игра казалась бы нечестной и раздражающей. Чтобы помочь игроку «считывать» происходящее на экране, графика должна отражать степень важности каждого элемента информации.

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

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

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

Сохранение единства геймплейных компонентов

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

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


Сравнение фонтана молодости и могилы элиты.

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

Переходы между двумя биомами

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

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


Выходу на крепостной вал всегда предшествует лифт

Добавление глубины к открытым уровням

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

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


Концепт-арт кладбища

Вкратце о нашей технике

Украшение интерьеров

Одной из основных проблем в дизайне декораций для уровней Dead Cells стало то, что для их создания мы используем процедурную генерацию. Чтобы обеспечить единство в пределах биома и сохранить реалистичность расположения декоративных элементов (дверей, альковов, факелов и т.д.), несмотря на случайность, создаваемую процедурной генерацией, мы начали с разделения фона на секции разных размеров. К каждому элементу декораций применялся собственный набор правил: например, факелы должны располагаться рядом с альковом или дверью.


Каждый цвет обозначает отдельный тип секции.

Цветовые палитры и карты градиентов

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


Текстура для деревьев на фоне


Карты градиентов

Такой подход очень часто доказывал свою полезность. Например, мы могли создавать вариации одинаковых уровней или при необходимости перерабатывать весь биом. Биом уровня Promenade изначально был оранжеватым и напоминал пламя, что стало проблемой, когда мы решили для целей геймплея поменять этот уровень местами с уровнем перед крепостным валом (Ramparts). Мы обнаружили, что эти два биома слишком близки графически, чтобы находиться рядом друг с другом…


Слева: первая версия Promenade of the Condemned, справа: Ramparts

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


Вторая версия Promenade of the condemned

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


Наш небольшой самописный инструмент для настройки переменных

Карты нормалей

Любопытный факт: Motion Twin — это, вероятно, одна из немногих видеоигровых студий, рисующих карты нормалей… вручную. Если вкратце, то карта нормалей — это вторая текстура, применяемая к базовой текстуре и определяющая, как элементы будут реагировать на свет (будь то свет от факела, заклинание, и т.д.). Обычно карты нормалей генерируются в 3D-пакетах или при помощи специальных плагинов Photoshop. Однако все испытанные нами плагины разочаровали нас. Часто они рендерили слишком плоскую, размытую или чеканную картинку, схожую с поверхностью монеты. Это не совсем то, к чему мы стремились.

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


Вот как выглядит текстура Dead Cells в Photoshop.

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

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

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

Надеюсь, эта статья вас заинтересовала, а может быть, даже оказалась полезной. Разумеется, если у вас возникли вопросы или что-то не совсем понятно, то вы можете обратиться с Тома или со мной в Twitter.