Эволюция графики в Rabbit Story

logo.jpg

Привет, меня зовут Вячеслав Бушуев, и сегодня я расскажу вам как менялась графика в Rabbit Story – игре, которую я сейчас разрабатываю.

История создания Rabbit Story берет начало летом 2016 года. Тогда я твердо решил, что сделаю игру за две недели! В тот момент я еще работал в Allods Team, поэтому у меня было свободное время только по вечерам и выходным. Зато мотивации было предостаточно, как будто Тайлер Дерден приставил мне пистолет к затылку и сказал, если не сделаешь игру — тебе конец! Конечно, сроки я все равно зафейлил, но не сильно, первая версия была готова через три недели.

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

Поэтому было принято решение купить готовый сеттинг и собирать игру на нем. В анрильском магазине ничего подходящего я не нашел, поэтому решил посмотреть в Unity Asset Store. Мое внимание сразу привлек Toon Environment Pack из-за своей простоты, интересной стилизации, с квадратными елками, и приятными цветами.

f24f9c37-9e5d-4062-adc9-016e74.jpg

Вот так выглядела моя первая попытка сделать оформление мира:

firstiteration.jpg

Не так уж плохо для первого раза.

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

Во время разработки я случайно наткнулся на игру Hob от Runic Games, и мне очень понравилось, как выглядит квадратная трава.

hob-thedoor0.jpg

Было решено сделать в Rabbit Story что-то похожее:

grass.jpg

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

На этом этапе разработка была приостановлена, первая версия игры была готова.

Время от времени я думал о том, как можно улучшить картинку в Rabbit Story, не делая сложных дорогостоящих моделей, но, к сожалению, ничего в голову не приходило.

В конце лета вышел новый аддон для World of Warcraft – Legion. И мы с друзьями принялись в него играть. WoW всегда был красивым, но в легионе качество графики стало заметно выше. В особенности мне понравилось, как художники Blizzard заполняют растительностью свои локации. В тот момент я решил – пусть в Rabbit Story простая стилизованная графика, но я могу заполнить ее кучей растительности, как это делают современные ААА игры. Благо в этом у меня большой опыт после Skyforge и Armored Warfare!

После некоторых экспериментов с графикой я получил вот такую картинку:

rabbitstoryprogress1.jpg

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

Финальным штрихом стало добавление деталей на дорогу, сухих кустов, веток и цветов.

Цветы тут самые важные, т.к. они яркие и дают сцене нужные акценты.

finalshot.jpg

Производство моделей

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

Подобную технологию использовали в Diablo 3 — в одном из своих докладов Blizzard назвало эту технологию 2.5D.

Помимо экономии времени данный способ позволяет использовать на моделях меньшее количество полигонов.

grassmeshes.jpgsideview.jpg

Также все модели слегка наклонены относительно камеры. Это нужно для того, чтобы сверху модели выглядели лучше. Похожую схему использовали в The Legend of Zelda: A Link Between Worlds.

photo12_thumb.jpg

Все модели цветов и травы сделаны геометрией, не имеют текстур, вместо этого используют материалы разного цвета.

flowersmesh.jpg

Плюсы этого способа:

  1. Быстрое время производства, не нужно делать UV развертку и рисовать текстуру.
  2. Такие модели не сильно тяжелее по производительности, полигонов в них больше, но зато нету альфы, что упрощает их рендеринг в движке.

Освещение и пост-обработка

Так картинка выглядит без освещения:

basiccolor.jpg

А вот так после того, как Unreal Engine накладывает Ambient Occlusion. Хорошо заметно как появляется объем и детали, которые обычно рисуют на текстурах.

oclussion.jpg

Финальная картинка с освещением и пост обработкой.

finalpicture.jpg

Оптимизация

Unreal Engine 4 использует deferred rendering (по-русски отложенный рендеринг). Суть его заключается в том, грубо говоря, что каждый слой, из которого состоит кадр (цвет, карта нормалей, освещение, глубина и т.д.), рендерится отдельно и хранится в памяти видеокарты. При выводе изображения на экран все слои складываются в единое изображение.

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

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

Чтобы в игре было 60 fps, каждый кадр должен рендериться 16 миллисекунд. Чем ниже будет время рендера одного кадра, тем выше будет fps.

Ниже приведен пример статистики рендера одного кадра в Rabbit Story.

enginefps.jpg

BasePass — это рендер непосредственно самой геометрии сцены, и, как видно из графика (оранжевая часть), это всего лишь четверть времени рендера всего кадра, остальное — это освещение и пост-обработка.

И несмотря на то что количество полигонов увеличилось более чем в 5 раз, это почти никак не отразилось на производительности, во многом благодаря тому, что геометрия инстанцируется.

Надеюсь я не слишком сильно нагрузил вас технической частью:)

Если вам понравился мой проект, вы можете поддержать его на Greenlight.

greenlight_button_smalltext.png greenlight_button_small2text.png

На сайте игры вы сможете найти дополнительную информацию, включая видео и скриншоты:

http://www.rabbit-story.com/