Case studies

Как Subcult Joint управляла 2 000+ листами спрайтов и 10 000+ 2D-светами в Cookie Cutter

Feb 22, 2024|11 мин.
Cookie Cutter by Subcult Joint - Key Art featuring Cherry
Эта страница была переведена с использованием машинного перевода. Для просмотра исходной версии, которая является точной и служит источником достоверной информации,

Узнайте об их 2D-инструментах, а также о последнем обновлении версии Unity LTS, которое открыло новые возможности для этого разрушающего формы beat-em-up.

Задача:
Оптимизация активов высокого разрешения и освещения для работы на разных платформах
Персонал проекта:
15
Платформы:
PC, PlayStation®5, Xbox Series X|S
Расположение:
Брайтон, Великобритания.

Как небольшой команде показать нарисованную вручную анимацию в лучшем свете на разных платформах? Subcult Joint потратила шесть лет на работу над Cookie Cutter, которая включает в себя тысячи активов высокого разрешения, созданных с использованием традиционных методов анимации и оптимизированных в Unity. Студии нужно было найти баланс между четкими визуальными эффектами и быстрым геймплеем, и она широко использовала 2D Lights, чтобы добавить глубины графике и игровому дизайну, ориентированному на исследования.

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

Черри расчленяет врага-робота
Резак для печенья от Subcult Joint

Художник, аниматор, преподаватель Unity Learn и основатель Subcult Joint Стефано Гульельмана начал работу над Cookie Cutter в 2018 году. Он был вдохновлен отвергнутым персонажем из предыдущего проекта Unity: Черри, андроид с жестким характером. "Я был влюблен в ее дизайн, поэтому начал создавать для нее анимацию", - говорит он. У Стефано было четкое видение геймплея метроидвании Cookie Cutterв стиле beat-em-up, но для его реализации требовалась поддержка разработчика. Получив финансирование, он нанял программиста Франческо Биццини (Francesco Bizzini) и целый ряд художников и дизайнеров для совместной работы над проектом.

Результаты:

- Продано 60 000 экземпляров и выручено 1 200 000 долларов за месяц после запуска.

- Удобное управление 2 000+ спрайтовыми листами и 50+ спрайтовыми атласами

- Зажгите в игре более 10 000 двухмерных огней

- Успешное обновление до Unity 2022 LTS в середине проекта

Упаковка содержимого

Визуальное оформление Cookie Cutter, нарисованное от руки, является одним из главных достоинств игры. Стефано знал, что создать их будет непросто, но дополнительные усилия будут стоить того, чтобы получить отдачу. "Глазная конфета - это то, что заставляет нас влюбляться в видеоигры", - говорит он. "В Subcult Joint мы восхищаемся мастерами Studio Ghibli и Disney. Мы не достигли такого уровня, но с Cookie Cutter мы хотели расширить наши анимационные навыки и сделать действительно крутую игру".

Этот проект чрезвычайно амбициозен для небольшой команды. Большинство художественных активов (более 1 000 фонов, спрайтов, анимаций и эффектов частиц) визуально сложны и кропотливо созданы с использованием традиционных техник анимации. Между персонажем игрока (Черри) и NPC (27 стандартных типов врагов и пять гигантских боссов), каждый персонаж в Cookie Cutter имеет 20-40 анимаций. Работа над каждой из этих отдельных анимаций может занять от восьми до 48 часов. Разные художники использовали несколько разных DCC, но Стефано создал большинство объектов в Adobe Photoshop.

После того как Стефано закончил работу над иллюстрацией, он использовал PSD Importer для преобразования ее в 8K-текстуру, а затем оптимизировал ее в редакторе, чтобы избежать проблем с переполнением видеопамяти. Умелое использование настроек импорта текстур помогло уменьшить размер текстур для каждой платформы, а следование лучшим практикам, таким как сила двух, позволило добиться дальнейшей оптимизации.

Анимации Cookie Cutter открываются в редакторе Unity
Обзор различных состояний анимации в редакторе Cherry. Subcult Joint потратила много времени на проработку анимационных переходов, чтобы обеспечить плавность игрового процесса.

"После того как я закончил работу в Photoshop, я вручную создал листы спрайтов, помещая анимационные ячейки одну за другой в новый файл, всегда кратный 512 x 512, следуя правилу силы двух в Unity", - говорит Стефано. "Редактор листа спрайта Unity позволяет легко нарезать лист или выполнять другие трюки, перемещая шарнир или пиксель листа в кадре". Эти рабочие процессы обеспечили оптимизацию визуальных эффектов Cookie Cutterна всех платформах с минимальными проблемами производительности.

К концу проекта Subcult Joint упаковал более 2 000 спрайтов в 50+ атласов спрайтов, упорядочив их по персонажам. "Sprite Atlases позволил с легкостью экспортировать игру на различные целевые консоли, сохраняя при этом стабильную частоту кадров, - говорит Стефано. "Мы практически сфокусировались на том, чтобы выжать 60 FPS, чтобы геймплей и общая производительность были плавными, как по маслу. Это позволило значительно оптимизировать использование памяти и ускорить загрузку".

Черри сбивает противника, атакуя его на мотоцикле
Резак для печенья от Subcult Joint

Настройка игрового процесса

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

В связи с этим ему нужен был способ работать в редакторе и быстро вносить изменения в геймплей без риска сломать проект. Это привело к тому, что Франческо называет одним из самых больших технических препятствий со стороны программирования: Построение гибкой системы в Unity, которая работает при слабом вмешательстве в код.

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

Боевые способности Черри
Резак для печенья от Subcult Joint

Чтобы обеспечить динамичный геймплей и брутальные комбо, Франческо использовал сторонний визуальный инструмент ActionGraph для модульного создания и структурирования конечных автоматов в Unity. Когда спрайты анимации загружены, ActionGraph позволяет добавить логику игрового процесса в каждый кадр, позволяя художникам на лету изменять такие параметры, как коллайдеры или количество повреждений. Например, Стефано может использовать ActionGraph для добавления хитбокса к атаке и установки его активности на определенные кадры, включения и отключения счетчиков прыжков, запуска генерации и расходования боевых ресурсов и так далее - без привлечения программиста.

Франческо также запрограммировал ряд собственных настроек редактора, чтобы дать возможность большему количеству художников из команды Subcult Joint внести свой вклад в проект. Основанная на системе визуализации xNode, UpWire позволяет художникам легко управлять человеческим и искусственным интеллектом, редактировать коллайдеры, добавлять визуальные эффекты к определенным узлам анимации и многое другое.

Upwire для управления входами, коллайдерами и VFX
Cookie Cutter's Graph Combo System - здесь Subcult Joint может настраивать хитбоксы и параметры для создания атак, которые соединяются в цепочки, добавлять визуальные эффекты вроде дрожания камеры, а также настраивать реакцию врагов на атаки.

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

Лист босса Спрайта из кукри-резака
Графическое комбо для боя с боссом. Здесь Subcult Joint может настроить такие факторы, как сила, направление и величина отталкивания хитбоксов атак, а также настроить реакцию босса на атаки из различных видов оружия Черри.

Timeline EZ Events, еще один инструмент Франческо, позволяет дизайнерам отправлять сообщения и вызывать функции прямо в редакторе, практически без ограничений по параметрам, включая объекты сцены, и добавлять множество функций к GameObjects. Например, команда может создать рычаг, который отпирает дверь, если его потянуть, и одновременно скрыть маркер "запертая дверь" на карте и миникарте.

Timeline EZ Events
Subcult Joint использовала Timeline EZ Events для создания катсцен Cookie Cutter. Этот инструмент позволяет создавать кинематографические моменты путем последовательной анимации персонажей, движения камеры, звука и визуальных эффектов.

Чтобы помочь дизайнерам в работе над миникартой Cookie Cutter- а это очень важно для любой игры, ориентированной на исследование, - Франческо создал EzMiniMapPro. "Он используется для создания карт игровых зон и имеет несколько полезных настроек и оптимизаций для генерации изображений", - говорит Франческо. "Во время работы поддерживаются анимированные маркеры наложения и автоматические маски исследования, основанные на том, что видит камера. Маска может быть записана и восстановлена через SaveGame".

Создание и внедрение этих настроек потребовало много работы, но это дало творческую свободу всей команде, предоставив каждому в Subcult Joint место за столом переговоров по дизайну, механике и игровому балансу Cookie Cutter.

EzMinimapPro
С помощью EzMiniMapPro компания Subcult Joint смогла запечатлеть всю карту, созданную в редакторе, и экспортировать изображение в Photoshop. После этого Стефано мог рисовать поверх сгенерированной карты, чтобы она соответствовала визуальному стилю игры, а затем импортировать ее обратно в Unity.

Проектирование мира

В огромном мире Cookie Cutter, Мегаструктуре, есть девять областей для исследования. После того как концепт-арт области был завершен, дизайнер уровней Subcult Joint Габриэль Реймонд Рой (Gabriel Raymond Roy) закрашивал каждую область, чтобы создать лабиринт, который игроки должны были раскрыть.

"Хороший дизайнер уровней умеет создавать основные и второстепенные пути, которые интересно исследовать, а также прокладывать заново, - говорит Стефано. "Каждый тупик должен иметь какую-то награду для игрока, а в каждой открытой области должны быть враги, чтобы игроки могли добывать материалы".

После того как область была выделена серым цветом, Стефано и дизайнеры украсили сцену деталями окружающей среды, расположив нарисованные вручную спрайты слоями в четырех точках по оси Z. Cookie Cutter использует перспективный вид камеры без кодированного параллакса, поэтому при движении игрок может видеть "неправильно расположенные" элементы в перспективе. Вишня стоит на точке "по умолчанию" рядом с взаимодействующими GameObjects, такими как враги, предметы и платформы, а неинтерактивные элементы переднего плана, фона и "дальнего" плана добавляют симулированную глубину в вид сцены.

Освещение мегаструктуры

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

Чтобы придать каждой зоне свой собственный визуальный колорит, Subcult Joint активно использовали в URP точечные и фриформные 2D-светильники. Мир Cookie Cutterосвещен более чем 10 000 из них. "Каждый свет в игре освещает наши спрайты в режиме реального времени, создавая ощущение плотности и согласованности между персонажами, анимацией и окружением", - говорит Стефано. "В темных местах персонажи затенены, а в наружных купаются в свете, когда выходят на насыщенную, загрязненную поверхность световых люков. Мне так нравятся эти детали!"

Широкомасштабный мир Cookie Cutter, Мегаструктура
Резак для печенья от Subcult Joint

Subcult Joint использовал 2D Lights из Unity без специального управления, применяя их на тех же слоях по оси Z, что и окружающие спрайты. "2D Lights по умолчанию отлично освещают игровую область, и это здорово, что можно выбирать, на какие слои они могут повлиять", - объясняет Стефано. "Мы хотели, чтобы слой по умолчанию всегда был понятен игроку, чтобы он понимал, где можно ходить, а где нет. Затем мы добавили свет на фоновый, передний и дальний слои".

Привлекательное 2D-освещение в Cookie Cutterиграет важную роль в общем дизайне игры. Как Metroidvania, эта игра ориентирована на исследования. Освещение используется для создания подсказок для игрока. "Освещение рассказывает историю - оно показывает игроку, куда идти, направляя его по главному пути или скрывая второстепенные необязательные пути", - объясняет Стефано.

Мерцающие огоньки привлекают внимание игрока. Стефано рассказывает, как он создал этот эффект: "Самое прекрасное в 2D Lights то, что их можно анимировать, - говорит он. "Создать мерцающие огни очень просто: Вы выбираете свет, переходите в окно анимации, создаете другую анимацию и играете с интенсивностью - 0, 9, 0, 9 - и копируете эту анимацию на другие светильники, если хотите создать тот же эффект в другом месте".

Разблокирование бонусных преимуществ с помощью обновления версии в последнюю минуту

Ближе к концу разработки Cookie Cutterпроблемы с переполнением видеопамяти стали препятствием для сборки для PlayStation 5. Subcult Joint поняли, что для устранения проблемы им необходимо обновить версию Unity.

Делать это так близко к запуску было не идеально, но не охватить массовую аудиторию PlayStation было невозможно, поэтому они засучили рукава и принялись за работу, перенеся проект на 2022 год LTS. Эта версия с долгосрочной поддержкой дала им доступ к новым инструментам профилирования и отладки, таким как обновленный Memory Profiler.

"Новая функция сравнения моментальных снимков в Memory Profiler помогла нам выявить и устранить проблемы переполнения видеопамяти, - говорит Франческо. "2022 LTS также быстрее импортирует текстуры, и в итоге обновление сделало нашу игру гораздо более стабильной".

Черри регенерирует HP, используя свои способности Пустоты
Резак для печенья от Subcult Joint

Как оказалось, переход на последнюю версию Unity позволил им добавить в Cookie Cutter последний слой визуальной полировки, который был бы невозможен в противном случае, поскольку теперь у них был доступ к готовой к производству системе 2D Lights. Это означало индивидуальный пересмотр и исправление тысяч ранее экспериментальных 2D-освещений в игре в соответствии с новыми параметрами - процесс, который, к счастью, ускорился благодаря новым возможностям.

С помощью обновленных Sprite Atlases 2022 LTS компания Subcult Joint смогла проще и эффективнее вывести сотни нарисованных вручную анимаций на различные целевые платформы. А полноценная версия 2D Lights в URPпомогла придать окружению еще большую глубину и настроение.

"Мы использовали новый 2D Light Explorer, чтобы выбрать каждый свет и настроить его вручную", - объясняет Стефано. "Мы в основном использовали Spot и Freeform lights, а в 2022 LTS появилась обновленная функция falloff для Freeform lights, которая выглядела гораздо лучше, чем старая. Это была большая работа, но мы смогли устранить мелкие недочеты и еще больше улучшить игру".

Дебютная игра Subcult Joint "Cookie Cutter" - пример волшебства, которое происходит, когда художники и программисты работают в ногу. Эта небольшая команда создала визуально амбициозную и успешную игру в жанре Metroidvania, которая разошлась тиражом более 60 000 копий в первый же месяц, и им удалось придерживаться своего оригинального видения без ущерба для графики и геймплея.

Обновление до 2022 LTS не только помогло Subcult Joint решить остававшиеся технические проблемы, но и позволило максимально расширить платформу Cookie Cutterи раскрыть весь потенциал игры.

Вишенка из Cookie Cutter едет на мотоцикле
Резак для печенья от Subcult Joint

Усильте свои амбиции с помощью Unity 2022 LTS

Unity 2022 LTS, созданный на основе многолетних отзывов и пользовательского тестирования, предоставляет стабильные новые функции и улучшения, чтобы вы могли уверенно творить, используя новейшие технологии. Оптимизируйте свою игру для новейших платформ и создавайте высококачественные визуальные эффекты, масштабируемые на разных устройствах.

Изучите конкретный пример

Заполните эту форму, чтобы получить доступ к последним историям о создателях.