«Во славу красивой картинки»: создание окружения и освещения в Grimshade

Как сочетаются двумерные задники и трёхмерные модели.

Grimshade — изометрическая RPG от российской студии Talerock. Действие игры разворачивается в фэнтезийном мире Ри’Фа, где люди сосуществуют с расой антропоморфных животных — элеорами. Игроку предстоит изучать этот мир, принимать решения, влияющие на развитие сюжета и участвовать в пошаговых сражениях. На данный момент разработчики собирают деньги на создание Grimshade на Kickstarter.

Все локации в игре сделаны в виде двумерных задников, а вот персонажи напротив, выполнены в 3D. Арт-директор Talerock Варвара Любовная в колонке для DTF рассказала, как разработчики добились органичного сочетания двух этих элементов, хитром свете, который меняется от того, видит ли игрок объект, а также о дизайне звероподобных существ.

«Во славу красивой картинки»: создание окружения и освещения в Grimshade

Меня зовут Варвара, я арт-директор студии Talerock, которая делает Grimshade — классическую сюжетно-ориентированную RPG в фэнтези-сеттинге с элементами стимпанка. Сегодня я вам расскажу о том, как мы решили не ходить по простому пути и выдумали свой велосипед во славу красивой картинки.

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

Хорошо, решили мы, давайте тогда сделаем персонажей модельками в 3D, но оставим себе ламповую рисованную стилистику всего остального. И нам, юным и отчаянным, даже в голову не пришло, что начиная ещё со времён Baldur’s Gate разработчики сначала моделировали окружение, а только потом рисовали спрайты. То есть, конечно же, пришло, мы тщательно изучили их опыт, но всё равно решили, что окружение мы нарисуем сами, руками, потому что так интереснее и красивее. И так никто не делал до нас (почти).

Если окружение нарисовано от руки, процедурный Unity-свет отпадает. А также тени и прочие прелести процедурной генерации. Тут точка бифуркации — либо ты рисуешь локацию всю полностью, но тогда модель персонажа может передвигаться только по условной дорожке, никогда не заходя за препятствия, либо у тебя куча мелких спрайтов кустиков и камней (каждый на своём слое), а карту света и теней надо вручную нарисовать поверх собранной локации.

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

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

«Во славу красивой картинки»: создание окружения и освещения в Grimshade

И тут наши чудо-программисты сделали так, что трёхмерный барсук уходит за плоское дерево, но при этом не проваливается в плоский террейн. Магия, не иначе (кстати, у нас в мире нет магии как таковой). Поэтому локация представляет собой слоёный пирог из объектов, каждый из которых имеет свой слой (подобно рабочему файлу художника), параметры и полигоны, позволяющие 3D-персонажу взаимодействовать с ними (обегать, заходить или наступать) так, будто они объёмные.

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

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

Без освещения
Без освещения
С освещением
С освещением

Карта света — каждый фонарик, каждая падающая тень — рисуется поверх всей локации. На неё добавляются 2D-анимации — дымок, птички, волны на воде, всякие забавности. Затем можно запускать на локацию модельку персонажа.

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

Без цветовой карты
Без цветовой карты
С цветовой картой
С цветовой картой

О душе и заднем свете

Но что-то я всё о техническом. Пора и о душе. А также об обещанном хитром свете.

Наша изначальная установка — сделать очень красивую игру. Такую, чтобы все наши труды с рисованием от руки окупились (и тут, очевидно, мы тоже немного перемудрили, потому что пользователи в сообществе доказывали нам, что они видят на локации модельки, а не 2D). Далее надо придумать неординарные сеттинги. Например, Болота Арту.

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

«Во славу красивой картинки»: создание окружения и освещения в Grimshade

Значит, решили мы, когда камера сдвигается вверх по стволу дерева — оно должно в лучших традициях того же «Ведьмака 3» просто растворяться. Исчезать, потому что ничто не должно мешать видеть персонажа на локации. Отличная идея. Но ведь у нас есть карта света локации, в которой учтены эти вот самые деревья? А вот и нет — всё устроено хитрее.

Локация освещена «задним светом», который хоть и находится как бы позади деревьев, не учитывает их от слова совсем. А у каждого дерева (а их на локации может быть больше десятка) есть своя собственная карта света. И когда дерево исчезает, за ним не остаётся постыдная дырка, а открывается взору основная карта света, которая невозмутимо говорит, что всё хорошо и никакого дерева тут не было. Да, велосипед на костылях, но ужасно эффектно выглядит.

«Во славу красивой картинки»: создание окружения и освещения в Grimshade

Итого, у нас есть двухмерные локации, которые умеют работать с трёхмерными персонажами. У нас есть все возможности 2D, которое выглядит на порядок лучше, чем набор ассетов Unity. У нас даже звук считается с учётом того, где у модельки нога: идёт она по мягкому коврику — звук глухой, а если вторая нога в этот момент на каменном полу — звук соответствует. При этом, напомню, и ковёр, и каменный пол на самом деле всё те же двухмерные спрайты.

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

Элеоры, монстры и нюансы их дизайна

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

Это не классические фурри, ведь мы сильно заморочились на том, что, например, прямоходящий волк — это не просто человек с волчьей головой. У него чуть иначе устроены конечности, и походка будет иная. В итоге у нас в игре есть уже более 20 разновидностей элеоров, а будет ещё больше, и все они созданы с большим вниманием к деталям: как растут рога, откуда хвост, как существо с такой анатомией сидит на стуле (на, подчеркну, двухмерном стуле) при наличии хвоста. В общем, и тут мы выбрали свой путь.

Наши элеоры порой внезапные (элеор-агама, элеор-лань, элеор-агути), но у них как бы есть прямая отсылка к реальному животному из земного мира. Чего нельзя сказать о монстрах. Наш тотемный и лелеемый, но пока не сделанный монстр — змеебедь, как бы лебедь, но вместо шеи у него змея. Мы строим базовых монстров как химер из животных и не только. И тут у нас полная свобода и сюрреализм. То, что в студии называется «лягушка» на самом деле какое-то дикое месиво собственно лягушки, троглодита и плащеносной ящерицы. И это буквально простейший из врагов, с которыми игроку предстоит биться.

«Во славу красивой картинки»: создание окружения и освещения в Grimshade

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

Если вам понравилось наше детище, и вы хотите поддержать Grimshade на Kickstarter, то мы вам будем за это крайне признательны и продолжим творить дивный новый мир игры с утроенной энергией.

6262
103 комментария

Только мне кажется что бедненько выглядит? Какие то синтетические, неживые локации

16
Ответить

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

5
Ответить

Ага, в Шадоуране вот красивые локации

4
Ответить

Со скриншотами так бывает. В статике часть очарования теряется. Посмотрите трейлер. Там есть геймплейные фрагменты. Смотрится как мультфильм.

2
Ответить

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

Например, во фразе "he is kind and responsive time with friends" словосочетание "responsive time" поставило меня в тупик, поскольку всё предложение целиком переводится вот так: "он добрый и время отклика с друзьями". Я до сих пор не понимаю, что вы имели в виду.
Буквально следующий же абзац начинается вот так: "Will fall into the eye with a thousand steps". Это означает следующее: "Упадёт в глаз с тысячей шагов".
Дальше: "throwing a pilums" - тут либо "a" лишнее, либо окончание "s".
"Like Satan himself" - у вас в мире есть буквальный Сатана? Если нет, то сравнение не очень атмосферное.

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

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

15
Ответить

Спасибо за отзыв. Текст переведен нейтив-спикером. Живой английский язык и реально используемые идиомы несколько отличаются от английского, которому учат в современных школах."he is kind and responsive time with friends" - означает, что он добр и отзывчив с друзьями. А "to fall into the eye with a thousand steps" - устойчивое выражение, означающее попасть выстрелом в глаз с тысячи шагов. Но даже нейтив не застрахован от опечаток. В "throwing a pilums" действительно лишний артикль. Это даже не ошибка, а опечатка. Что касается Сатаны, то все детали лора мы не раскрываем. Но такой эпитет вполне допустим.

Словом, спасибо за участие, но 100% текста переводится на английский русскоговорящими носителями английского языка. Опечатку поправим.

4
Ответить

Все правильно тут, кроме артикля.

Ответить