Визуализируем историю: Сюжетный арт в Cooking Diary

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

image41.png

Как правило, сам по себе жанр тайм-менеджмент не предполагает сильного акцента на истории. Но в последнее время можно заметить тенденцию — в кулинарных играх все чаще начал появляться сюжет. В нашей игре Cooking Diary сюжет отлично работает на удержание игроков. Он отличается легкой подачей, интригующим повествованием и искрометным юмором. Довольно много игроков проходят уровень за уровнем не только ради открытия новых ресторанов, но и для прохождения истории. Сюжет способствует более глубокому погружению в мир игры. Игрок чувствует себя непосредственным участником событий в Тейсти-Хиллз, а цели игрока приобретают более значимые мотивы. При этом сюжетные вставки дают передохнуть между напряженными уровнями.


image1.png


История начинается, когда игрок получает письмо от дедушки вернуться в родной город и продолжить семейное дело: стать владельцем сети ресторанов. На этом нелегком, но увлекательном пути произойдет много встреч с разными персонажами, каждый из которых обладает уникальным характером и целями. Только от самого игрока зависит, сможет ли он разобраться во всех хитросплетениях сюжета и вписать свое имя в кулинарную историю Тейсти-Хиллз!


image15.jpg


Давайте теперь перейдем к теме сюжетных артов. Что же такое сюжетные иллюстрации? Если по-простому, то это изображение с целостной композицией. Фон, цвет, свет и все элементы арта работают на восприятие иллюстрации, на композицию, на раскрытие идеи. В иллюстрации важно все — расположение объектов, детали, цветовые и световые акценты. Все это вместе нам должно рассказать историю визуально.


Виды сюжетных артов: тайтлы, флешбэки, арты дневника

Для повествования сюжета в Cooking Diary мы используем три вида сюжетных артов. Это тайтлы, флешбэки, арты дневника.

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


image7.png


Флешбэки — во флешбэки входят все иллюстративные арты, демонстрируемые во время диалогов.


image22.png


Арты дневника — это арты, которые появляются в дневнике игрока после просмотра эпизода. Они стилизованы под фотографии.


Image from iOS (10).png


В этом кейсе мы решили рассказать о процессе создания сюжетного арта на примере одного тайтла из Cooking Diary.


Шаг первый: создаем предварительный скетч

Давайте сначала посмотрим, какой арт нам нужен. Техническое задание звучало так: “Алекс и Вивьен сидят за столом и разговаривают. Между ними на заднем плане стоит Джонни. Его голова повернута в сторону Вивьен, он мило улыбается и чуть краснеет”.

Прежде чем взяться за арт — внимательно изучаем описания персонажей в дизайн-доке.


image21.png

image2.png

image27.png


Итак, после ознакомления с ТЗ и изучения персонажей надо набросать первоначальный скетч. Это грубый и быстрый набросок, предназначенный для построения композиции и пропорций. На этом этапе выбирается поза и линия движения персонажей. Также желательно уже задуматься, как будут визуально показаны эмоции героев сцены.


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


image12.png


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

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


image16.png


Обратите внимание, как их головы находятся на точках пересечения.


image19.png


Руки Вивьен (персонаж справа) расположены на линиях направления.


image4.png


А у Алекс (персонаж слева) расположение рук менее очевидное.


image25.png


Также расположим Джонни (посередине) чуть правее от центра, чтобы появилась асимметрия и чтобы он не был в фокусе.


image39.png


При выборе позы надо учесть моменты:

  • постараться рассказать историю;
  • показать характер персонажа;
  • показать, как они взаимодействуют с друг другом.

image33.png

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

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

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

Алекс (персонаж слева) более манерная, у нее достаточно сдержанные жесты. В скетче мы положили одну ее руку на грудь в жесте: “Да что ты говоришь!”, чтобы показать ее женственность и удивление. А другой рукой она прикрывает рот.

Их взаимодействие — Вивьен говорит, Алекс реагирует. Джонни на заднем плане, его никто не замечает.


Шаг второй: создаем финальный скетч

После создания первоначального скетча идет этап создания финального скетча.

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

К примеру, тут в основном поменялось расположение рук персонажей. Мы поменяли Вивьен руки, чтобы сделать ее позу более читаемой и открытой. У Алекс рука в первоначальном скетче слишком сильно перекрывала лицо, пришлось ее опустить.


image47.png


Также мы добавили детали на напитках героев. У Вивьен современный напиток — сладкая газировка. У Алекс более элегантный — чай на блюдечке.


image11.png


Во время стадий скетча не забывайте использовать линии действия. Линия действия — это воображаемая линия, на основе которой выстраивается движение персонажа. Силуэт персонажа должен следовать этой линии, чтобы четко передать динамику и направление позы и жеста. Желательно использовать кривые и S-образные линии, так как прямые линии сделают позу очень статичной.

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


Шаг третий: рендер

Создание лайна

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


image26.png


Чтобы обвести вручную длинные округлые линии, есть такой трюк.


image36.gif


Добавление основного цвета

image28.png


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

Кожа, глаза, рот и волосы персонажа заливаются каждый в отдельный слой.


image45.png

image6.png

image10.png

image17.png

image8.png

image5.png

image46.png


Кожу, волосы и элементы лица мы рендерим отдельно. Для этих важных составляющих персонажа по цвету и насыщенности мы подбираем тени так, чтобы они выглядели живыми и яркими. Одежда рендерится вся вместе при помощи свойства слоя Multiply (Умножение) для ускорения процесса.

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


image48.png


Мягкие тени подходят для более плавных, округлых переходов. Сочетание жестких и мягких теней делает картинку более естественной, даже когда она стилизована.


image13.png

image31.png

image3.png

image43.png

image42.png

image44.png

image9.png

image30.png

image37.png


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


image29.png

image23.png


Вот таким образом создается сюжетная иллюстрация от скетча до рендера на примере тайтла для Cooking Diary. Надеемся, что вам было интересно и полезно :)


Ловите еще один дополнительный пример.


image35.png

image18.png

image34.png

image20.png

image14.png

image38.png


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

Хочешь вместе с командой создавать красочные арты Cooking Diary? Отправь свое резюме и портфолио прямо под интересующей вакансией — https://mytona.ru/career

А если тебе интересны истории персонажей Тейсти-Хиллз, то присоединяйся к игре!

Скачать игру:

App Store

Google Play

798 0 850 20
1
2020-08-20
Супер! )
RENDER.RU