Skip to content

Сборка экрана из готовых компонентов игры

Экран описывается в YAML — компоненты и данные, без координат. Вёрстку раскладывает flexbox, а хром (панели, кнопки, рамки, бары, ячейки навигации) берётся из библиотеки спрайтов игры по таблице ролей role-map.yaml. Генерируется только то, чего в игре нет: задник и иллюстрации.

Собрать экран

just screen guild/screen-s3a-real

Печатает 28 parts: 20 from the game's library, 8 generated — сколько деталей взято готовыми из игры. Рядом со спеком появляются:

файл что это
screen-s3a-real.html сам экран, самодостаточный: арт и шрифты вшиты
coverage-s3a-real.md по деталям: какой спрайт ответил и как выбран
components-s3a-real.json что стоит на экране — для проверки связи
sprite-map-s3a-real.json какие узлы Unity должен переиспользовать, а не выгружать заново

Рецепт делает два прохода, и это не оптимизация. Растяжимую панель надо запечь в PNG под тот размер, который она займёт, а размер известен только после раскладки. Без второго прохода в разметке остаётся CSS border-image, который html.to.design не реализует: правило вырождается в сплошную рамку дефолтного цвета, и панель приезжает в Figma чёрным прямоугольником.

Проверить экран

just screen-check guild/screen-s3a-real                    # пропорции и анти-паттерны
just screen-check guild/screen-s3a-real /tmp/screen.json   # плюс связь компонентов

Второй аргумент — выгрузка из Figma (get-selection) или UI IR. Проверять надо на обеих стадиях: в Figma попадают правки дизайнера, а IR читает Unity, и компонент может пережить первое и потеряться во втором.

Проверка связи отвечает на вопрос, на который скриншот ответить не может: переиспользованная кнопка — всё ещё та же кнопка или новая картинка, похожая на кнопку. Ответить по возвращённому файлу нельзя, и это не вопрос усилий: Figma называет слои по содержимому, data-* при импорте выбрасывается, а сверка по содержимому не сходится, потому что узел рендерится в размере по вёрстке. Поэтому идентичность везётся в манифесте, а не восстанавливается.

Различает два провала — на скриншоте они выглядят одинаково:

  • потерян — слой переименован или исчез. Это и есть «кнопка стала новой»;
  • схлопнулся — слой на месте, но части перестали быть отдельными слоями, и вместо кнопки лежит картинка. Ровно это делает проход image-модели по скриншоту, и проверка только по имени назвала бы это успехом.

Отсюда ограничение на доводящий проход: как рендер для оценки — любой; если результат едет в Unity — только добавляющиеся слои поверх, без замены пикселей компонентов.

Аудит пропорций возвращает 1, если внутри одной роли разброс ≥8%. Детектор молчит, когда чисто; если сомневаешься, что он работает, прогони его на файле с заведомой ошибкой — на 9px тексте и цветном glow даёт четыре находки.

Сколько компонентов общие

just screen-census

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

Дальше в Unity — обязательно с картой спрайтов

~/.agents/skills/canon-figma-to-unity/scripts/import_figma.sh \
    --config overlord/tools/figma_unity_pipeline/pipeline.config.json \
    --screen GuildS3a --file-key <KEY> --root-id <ID> \
    --library-map game_design_features/guild/sprite-map-s3a-real.json

Без --library-map экспорт выгрузит копию каждой взятой из игры детали в Assets/Sprites/UI/<Screen>/ — двадцать дубликатов на экран, каждый с новым GUID. Это ровно то дублирование, ради устранения которого сборщик и писался, только на шаг позже.

Сверка по хешу здесь не спасает: она сравнивает внутри одной папки, а библиотека лежит в Assets/InternalAssets/Sprites/UI. Расширить сверку тоже не выход — Figma рендерит узел в размере по вёрстке, и кнопка 290x109, выгруженная как 178x67, даёт другой хеш, чем исходный спрайт. Знание о том, какой файл ответил, есть только у сборщика — он его и записывает.

Переиндексировать библиотеку

Нужно после того, как художник добавил или переименовал спрайты:

uv run --project art-generator mockupforge-index-ui-assets \
    --root overlord/frontend/unity/Assets/InternalAssets/Sprites/UI \
    --out  game_design_features/_ui-kit/asset-index.json

Индекс тянет из Unity-.meta границы 9-slice, поэтому растяжимые панели растягиваются так, как их задумал художник, а не background-size: 100% 100%.

Что править, если деталь выглядит не так

Почти всегда — role-map.yaml, а не код. Роль → спрайт решается там, один раз на всю игру. Ищите кандидатов по метаданным индекса, а не по именам папок: заявка «в игре нет тянущейся по всем сторонам панели» была написана после поиска только в Shared/ — панель нашлась в LoadingScreen/. И не верьте именам: NavBar/icon_selected — это красный крестик закрытия.