Имитация рисованной анимации в Assemble with Care — подробный рассказ разработчика

Создание эффекта boiling, настройка шейдеров, двойной набор текстур для света и тени.

Ведущий разработчик Ustwo Games Мэттью Ньюкомб на сайте Medium опубликовал текст о создании визуала для Assemble with Care. Автор сосредоточился на технической составляющей — рассказал о стиле игры, шейдерах, работе с цветом и многом другом. Мы выбрали из текста главное.

По словам Ньюкомба, после релиза Monument Valley 2 команда начала искать идеи для новой игры. В начале 2018 года появился прототип Assemble with Care, а финальная версия игры вышла через полтора года.

В своих предыдущих проектах разработчики из Ustwo Games старались придерживаться однородных и чистых цветов, простых форм. В этот раз они хотели воссоздать стиль изображения, нарисованного вручную, и сделать так, чтобы картинка оживала перед глазами игрока. Команда вдохновлялась анимационными фильмами «Старик и море» (режиссёр Александр Петров) и «Ван Гог. С любовью, Винсент» (режиссёры Хью Уэлшман и Дорота Кобела).

Разработчики понимали, что могли бы просто добавить текстуры, которые имитируют подобный стиль, но изображение всё равно получилось бы статичным. Поэтому команда искала способ «оживить» картинку игры. Проблема заключалась в том, что в геймплейных секциях в Assemble with Care почти нет движущихся объектов. Единственное исключение — сами предметы, с которыми взаимодействует игрок.

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

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

При рандомном смещении вершин эффект получается хаотичным и рваным, а сами вертексы часто пересекают друг друга, из-за чего возникают визуальные артефакты. Из-за этого эффект выглядит как что-то искусственное, а не натуральное.

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

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

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

Если смещение сделать непрерывным, то это будет похоже на движение жидкости. Разработчики не хотели этого, поэтому сделали так, чтобы смещение работало с фиксированной частотой кадров — эффект проявляется со скоростью 5 кадров в секунду. Этот эффект также распространяется на предметы, которые отбрасывают тени на фоне.

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

Для создания такого эффекта разработчики используют функцию lerp между базовой текстурой и текстурой мазков кисти — это позволяет подчеркнуть стиль boiling. Команда использовала разные текстуры мазков для всех объектов.

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

Поэтому команда пошла иным путём — снизила насыщенность цветов, отрегулировала уровни чёрного цвета и применила tone mapping. Это позволило сделать фон менее ярким и бросающимся в глаза. По словам Ньюкомба, это не очень заметный эффект, но он справляется со своей задачей — отделяет фон от активного предмета.

Последнее художественное решение, о котором рассказал Ньюкомб — это тени и цвета. В Assemble with Care тень на объектах — это не просто более тёмный участок, а совершенно иная текстура. У всех объектов в игре есть два вида текстур — освещённая и неосвещённая (unlit). Разработчики использовали такой подход, чтобы сохранить правильные цвета при затенении.

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

#арт #опыт