Как был построен сложный интерфейс Timberborn в реальном времени

Mechanistry сэкономила значительное время на производстве, перейдя на UI Toolkit и создав сложный пользовательский интерфейс для своего строительного симулятора на основе бобров.

Узнайте о дизайне и реализации пользовательского интерфейса в Unity с нашим бесплатным практическим руководством. Загрузить электронную книгу

Оптимизация разработки пользовательского интерфейса

Как небольшой коллектив с ограниченными ресурсами создает сложный пользовательский интерфейс для строительного симулятора? Когда Timberborn стал хитом раннего доступа в Steam, Mechanistry нужно было быстро доработать интуитивно понятный интерфейс для быстро растущей базы игроков. Перейдя с uGUI на UI Toolkit, они смогли ускорить производство с помощью более чистого кода, который легче поддерживать.

Выбор Unity

Приходя из сферы разработки программного обеспечения, Mechanistry ценит чистый код, гибкие рабочие процессы и отличные пользовательские впечатления. Вот почему они выбрали Unity для создания Timberborn. “Это был разумный выбор,” говорит программист Павел Дуда. “Существует множество веб-ресурсов.” Кривая обучения не крутая. И наша команда знакома с C#.”

Результаты

• Ускоренное прототипирование и реализация пользовательского интерфейса, что теперь занимает часы вместо дней.

• Перешли от нескольких конфликтов слияния каждую неделю к нулю

• Достигли рейтинга «Чрезвычайно положительный» на Steam по почти 18,000 отзывам

Выход за пределы uGUI

Mechanistry использовала uGUI на ранних этапах разработки, но проблемы возникли, когда Timberborn стал более сложным. Выравнивание значков нарушало макеты, повторное использование ресурсов было сложным, и поскольку код не был читаемым для человека, возникало несколько конфликтов слияния в неделю. «Если два человека работали над одним и тем же Prefab, это обычно было проблемой», — говорит Павел. «Некоторые конфликты разрешались автоматически. Но если нет, нам приходилось вручную воссоздавать Prefab.»

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

Переход на UI Toolkit

Команда приняла прагматичный подход к миграции в течение нескольких месяцев. Сначала они очистили архитектуру кода пользовательского интерфейса и удалили плохие запахи кода. Затем они воссоздали все свои элементы пользовательского интерфейса в UI Toolkit и переработали свои ресурсы, чтобы получить желаемый вид.

«Переход на UI Toolkit стал переломным моментом», — объясняет Павел. «Ранее мы не хотели создавать красивый пользовательский интерфейс, потому что знали, что это будет большой проблемой. Теперь мы добавили такие вещи, как масштабирование пользовательского интерфейса и скрытые меню в игру, и это было гораздо проще, чем с uGUI.»

Разрешение конфликтов слияния

Mechanistry отмечает, что переход на UI Toolkit практически устранил конфликты слияния, которые были значительным источником замедления в студии. «Если возникает конфликт, мы можем его увидеть и мгновенно знать, как его разрешить», — говорит Павел. «Каждый может работать над UI одновременно, даже над одним и тем же элементом, и это не проблема».

UI Toolkit также позволил им отделить игровую логику от логики UI, что еще больше снизило количество конфликтов. Теперь команда может независимо работать над различными частями UI и тестировать компоненты в изоляции, что приводит к меньшему количеству сломанных сборок. «Это было очень, очень важно для нас», — добавляет Павел.

Отладка в реальном времени

Timberborn’s масштабируемый, адаптивный UI в настоящее время поддерживает 12 языков. Переключение между ними может привести к смещению элементов UI, что, в сочетании с общей сложностью интерфейса, делает его подверженным ошибкам дизайна. Они могут быстро и легко выявлять и решать эти проблемы с помощью отладчика UI Toolkit.

UI Toolkit отображает окно с живым представлением иерархии UI. Mechanistry может выбрать любой элемент в иерархии, чтобы проверить свойства и состояния и проверить наличие ошибок UI. «Это позволяет нам проверять и отлаживать элементы UI в реальном времени», — замечает Павел.

Настройка инструментария

Гибкость UI Toolkit позволяет Mechanistry настраивать его под свои нужды. «У нас есть собственная система, которая позволяет нам добавлять изображения и значки в выпадающее меню», — говорит Павел. «У нас также есть собственные подсказки и локализованные элементы управления. Мы просто добавили атрибут в UXML, и это позволяет нам автоматически локализовать элемент управления.

Например, у команды есть элемент управления, который показывает локализованные спрайты на соответствующем языке с использованием тегов. Они создали представление, показывающее, как панели накладываются друг на друга, что позволяет им легко манипулировать позициями элементов управления UI, отслеживая, что видно на экране, плюс 9-срезов для фонов, кнопок, меток и многого другого.

Переход от дней к часам

С UI Toolkit процесс проектирования Mechanistry стал более чистым и простым, и они могут быстрее добавлять полировку. «Это требует много возни и изменений, что может занять недели», - объясняет Павел. «Теперь процесс занимает дни, максимум неделю. То же самое касается ожидания активов от художника. Дни сокращаются до часов.»

Принятие Unity UI Toolkit существенно изменило UI-пipeline Mechanistry, ускоряя разработку Timberborn по мере их перехода к долгожданному релизу 1.0.

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