Хабрахабр

[Перевод] Дизайн цвета загадочных миров Dead Cells

Привет, меня зовут Гвенаэль Массе, мы с Тома Вассё — единственные художники инди-студии 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. Надеюсь, эта статья вас заинтересовала, а может быть, даже оказалась полезной.

Показать больше

Похожие публикации

Добавить комментарий

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

Кнопка «Наверх»