Делаем левел-дизайн мобильных игр в Figma. Способ для начинающих

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

Наша геймдев-команда — Feed 64 и сейчас мы разрабатываем две игры: 2D-платформер Gennady и казуальную аркаду Throworm. На днях она выходит на Rustore, затем появится в AppStore и Google Play.

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

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

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

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

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

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

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

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

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

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

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

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

1. Используйте компоненты. Если строить модели уровней из ассетов, Figma будет быстрее обрабатывать сотни и тысячи повторяющихся элементов, а оперативке вашего ПК придется хранить меньше информации.
2. Минимум эффектов. Даже самая простая полупрозрачность (особенно в сочетании с режимами наложения), градиент, скругление — любые добавленные параметры к многократно размноженному компоненту создают каскад подвисаний. Если у вас есть базовый блок, который в большом количестве присутствует в проекте, то лучше хотя бы его очистить от оформительских излишков.
   
3. Картинка всегда лучше вектора. Вектор весит меньше — это понятно, но сложные объекты с эффектами и прозрачностями иногда эффективнее растрировать, иначе при каждом масштабировании или смещении вашему ПК придется вычислять все эти блюры, бленды и прочие координаты точек. С растровыми элементами ему будет гораздо проще: он привычно отрисует уже готовое изображение. К тому же, при создании компонентов объем файла страдает не так уж сильно.
   

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

На этом всё, спасибо, что дочитали до конца. Надеемся, что наш опыт вам пригодится. Будем рады вашим вопросам и комментариям, можете оставлять их и у нас в соцсетях.