Дизайн уровней в Figma

Привет! Мы — диджитал-агентство Мэйк. Хотим рассказать, какое применение наш арт-директор нашел для Figma.

Из таких элементов состоит наша игра Throworm

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

Вот, например, наша игра Throworm, которая вышла месяц назад:

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

Сразу оговоримся, что Figma мы выбрали по нескольким причинам:

1. У нас уже образовалась целая экосистема при работе над другими проектами агентства, и Figma для нас — что дом родной.

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

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

Была идея сэкономить время и попробовать делать игры с генерацией уровней в случайном и бесконечном порядке. Пробовали разное, а итог один: все делаем вручную, потому что комнаты получались скучными и нелогичными. Кто ж захочет играть в такую игру? Решили создавать комнаты с подключением механизма, который будет генерировать уровни из таких комнат в рандомном порядке. Благодаря этому мы можем управлять сложностью игры, ловушками и препятствиями. А чтобы игроки не успевали соскучиться и выучить все комнаты, мы постоянно добавляем новые комнаты.

Комнаты, из которых в случайном порядке конструируются уровни в Throworm. Цвет рамки означает сложность прохождения

Больше усилий — меньше времени

У нас модульные и двухмерные игры, поэтому левел-дизайн в Figma здесь уместен. Разумеется, для 3D-игр она не подойдет. Прототипы, элементы интерфейса, структуры, готовые и начатые комнаты… — абсолютно все собирается в приложении в готовый проект. Можно быстро переключиться с одного на другое и не прыгать между приложениями, и так же быстро открыть или закрыть доступ для нового сотрудника.

Из этих и подобных элементов мы собираем комнаты

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

Внешний вид комнат в Figma и в движке

Теперь перейдем к Gennady. На самом деле, это и есть наша первая игра. Мы ее создавали для мобильных платформ, да еще и на Unreal Engine 4, но в итоге решили перенести на Unity и перевыпустить на ПК. Это 2D-платформер в нуарном стиле, где нужно собирать монеты, уклоняться от ловушек и устранять врагов.

Чтобы было проще собирать комнаты, мы создали габаритную модель физики персонажа:

Мы вычислили все его параметры: длину и высоту горизонтального и вертикального прыжка, двойного прыжка, дэшей во всех направлениях… Из всех этих траекторий мы сделали набор заготовок. Остается только примерить их на уровень. Не нужно каждый раз вычислять длину ям и высоту препятствий, например. Так, нам не приходится продумывать и визуализировать в Figma маршруты прохождения комнат целиком. В движке это делать трудно и неудобно.

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

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

Сборка комнат в Figma до и после подключения текстур

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

Пример комнаты, собранной в Figma, с игровыми текстурами

В Figma можно удобно и наглядно отсортировать абсолютно все созданные элементы и комнаты. Все комнаты, как новые, так и старые, условно распределены по типу. Например, лутовые, разрушаемые, быстропробегаемые, хардкорно-ловушечные, пазловые и т.д. Это условная типизация, зато не надо зацикливаться на чем-то одном — можно создавать разнообразные ландшафты.

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

Принцип работы конструктора уровней в Figma

Figma отлично оптимизирована, но с ростом количества комнат и элементов ПК становится все сложнее работать без лагов. Есть как минимум три способа справиться с этим недостатком:

• Система компонентов, заготовленных и сохраненных заранее в «Компонентах». Повторять знакомые элементы приложению легче, даже когда они дублируются тысячи раз.

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

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

Не стоит забывать и о том, что приложение — это оболочка браузерной Figma, что накладывает ограничения. Оно удобнее в работе, но нагрузка на ПК меняется не так уж сильно.