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

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

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

Почему Figma?

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

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

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

Двойная работа, которая экономит время

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

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

Конструктор объектов в Figma
Конструктор объектов в Figma
Комнаты собранные с помощью конструктора в Figma
Комнаты собранные с помощью конструктора в Figma

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

Вот как выглядит Throworm в Figma и в движке
Вот как выглядит Throworm в Figma и в движке

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

Габаритная модель движений персонажа
Габаритная модель движений персонажа

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

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

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

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

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

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

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

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

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

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

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

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

  • Система компонентов. Их стоит заранее заготовить и сохранить в «Компонентах». Повторять готовые и знакомые элементы для Figma легче, когда они дублируются сотни и тысячи раз, и оперативка меньше напрягается.
  • Минимум эффектов. Даже обычная полупрозрачность, не говоря уже о режимах наложения и любых других украшательствах с многократным размножением могут вызывать одно подвисание за другим. Так что повторяющиеся сотни раз базовые блоки лучше очистить от излишков.
  • Растр вместо вектора. Несмотря на преимущество в весе, векторные объекты с улучшениями бывает полезнее перевести в растр, иначе с каждым изменением масштаба или смещением ПК придется вычислять параметры всех этих блюров и координат. Растр он просто отрисует там, куда вы его поместите. Да и итоговый объем файла не сильно пострадает.

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

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

120120
21 комментарий

Ни котиков, ни ортеги, ни жоп - пост обречён на забвение...

8
Ответить

Следующую игру будем делать с котиками... или жопами.

3
Ответить

Молодцы ребята!
Так держать)

4
Ответить
2
Ответить

Мы просто пользовались тем инструментом, с которым уже были знакомы.

1
Ответить

Комментарий недоступен

2
Ответить

Тут у нас классический случай - какой инструмент умеем, тем и работаем. Это для этапа планирования, где геймдизайнер или кто-нибудь ещё может не запуская юнити/анрил прикинуть 5 макетов за полчасика. Меня, левел дизайнера, тоже иногда просят в начале спланировать и показать идею на картинке...

Ответить