Полностью переписали UI в игре. Старый интерфейс в Blockworld жил на «классическом» Unity UI (uGUI). Каждый экран — отдельный префаб, всё расставлено руками. Долго, неудобно, а переход на новый дизайн растягивается на немалый срок.
😭 Отдельная боль — адаптив. Из коробки Unity почти не умеет подстраиваться под разные экраны: якоря и стандартные лайауты не вывозят, и под нормальную вёрстку всё равно приходится писать кучу своих компонентов.
Можно было взять UI Toolkit от Unity, но для рантайма он нормально заработал только в Unity 6 — а мы сидим на 2022-й версии движка. Там он ещё сырой. Поэтому сделали свой движок интерфейса 😏.
Новый подход
В новой системе интерфейс описывается текстом (JSON), а не собирается в редакторе. Вёрстка, логика и внешний вид разнесены по разным местам. Это позволяет быстро собирать интерфейс и стилизовать его, описывая правила как в том же css.
Что уже умеет движок:
✔️ Свой layout-движок — flex/grid как в вебе, адаптив из коробки
✔️ MVVM и реактивные привязки — пишешь
"Text": "@PlayerName" в JSON, и текст сам обновляется при смене значения. Двусторонние привязки для слайдеров и тумблеров — из коробки.✔️ Темы — все цвета, пресеты описываются в одном месте, при желании можно сделать разные темы для ui
✔️ Анимации — система твинов, задаются прямо в JSON, без кода
✔️ Виджеты — заготовки элементов интерфейса: слайдеры, тумблеры, прогресс-бары, счетчик валют и т.д. Описал один раз и испольуещь где угодно
✔️ Safe-area — встроенная поддержка безопасной зоны, ui всегда располагается в ней, не будет проблем с вырезами и чёлкой на телефонах и планшетах
🔥 Hot-reload — правим вёрстку прямо во время игры, экран пересобирается на лету.
✔️ Редактор инструменты — превью в редакторе, без захода в Play Mode. Итерации с нейронкой стали в разы быстрее, она сама может быстро смотреть результат и делать скриншоты для анализа.
🤖 Нейронка наш верный друг
Так же удобно создавать интерфейсы через нейронку, экономя кучу времени и сил. С json нейронка работает намного лучше, чем с префабами юнити. Просто говорим нейронке что хотим и она собирает это. Специально для этого был создан отдельный скилл, в котором описаны правила и лучшие практики по дизайну и работе с новой системой, так чтчо нейронка сразу понимает какие есть стили, готовы виджеты и т.д, плюс может предложить что то новое, чего еще нет.
🧩 База под моддинг
Blockworld идёт к кастомным режимам и пользовательским мини-играм. Новая система открываем крутые возможности для этого. Игроки и мы разработчики в частности, сможем делать интерфейс прям в игре (в режиме создания кастомного лобби). Все сохраняется в json и легко хранится в базе данных и передается по сети.
📌 Прикрепил видосы с демонстрацией адаптива, плюс в коменты выложил пример как это выглядит в json.
#blockworld #devlog #gamedev