Левел дизайн в Figma

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

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

В левел-дизайне задействована почти вся наша не очень большая команда. Разбрасываться ключами от Unity неудобно и не то чтобы безопасно, поэтому мы попробовали применить более привычный для нас, разрабов, инструмент — Figma. И у нас получилось.

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

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

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

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

На Throworm мы посмотрели, теперь перейдем к Gennady. Проектировать комнаты нам помогает габаритная модель физики персонажа.

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

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

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

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

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

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

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

Figma отлично оптимизирована, но с ростом количества комнат и элементов растет и число подлагов. Мы с этой проблемой справляемся в три приема:

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

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