Nine-Slice в игровом UI и масштабируемые панели: метки Figma / PSD и QA нарезки в движке

Когда панель растягивается шире, размытые углы, повторяющаяся текстура в центре или овальные углы обычно означают, что nine-slice (9-slice / cap insets) не был задан при передаче, либо движок использует масштабирование Simple для всего спрайта. Настройка Image Type и границ в редакторе Unity может спасти один экран, но следующий дроп дизайна перезапишет это — если границы не совпадают с экспортным масштабом, начинаются циклы переделок.

Примеры ниже сосредоточены на Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture и nine-slice спрайтов в Cocos отображаются на те же идеи, включая content padding. Якоря и Safe Area: чек-лист движка + MCP, пункт 6. Отступы в зоне растяжения с локалями: переполнение локалей, проверка дизайна 7.

Чек-лист передачи дизайна, пункт 6 требует чётких nine-slice / зон растяжения. Этот пост охватывает когда нарезать, метки Figma/PSD, приёмку в трёх движках и путь для полноэкранного канваса, плюс таблицу исправлений.

Критерии провала (любой один = не пройдено): угловой арт деформируется при растяжении; непреднамеренный повтор или швы в зоне растяжения; радиус угла меняется с размером панели; масштабируемый фон масштабируется вместе с фиксированными иконками/аватарами; экспортный масштаб не совпадает с пикселями границ в движке (зазоры в 1px или мягкие края).

---

Когда nine-slice обязателен, а жёсткое растяжение запрещено

Тип ассета	Делать	Не делать
Фон диалога / панели настроек	Nine-slice + content padding	Один Simple-спрайт на всю область
Контейнеры ввода / полос	Nine-slice или L/R cap + повтор центра	Сжимать высоту без правил арта
Основные кнопки (фиксированный размер)	Фиксированный спрайт или nine-slice + мин. ширина	Бесконечно широкая скруглённая кнопка как одно растяжение
Иконки, аватары, рамки навыков	Фиксированный размер, без nine-slice	Объединять с фоном панели в одно растягиваемое изображение
Полноэкранный фон (без рамки)	Полное изображение или стратегия тайлинга в спецификации	Переиспользовать границы панели на полный экран

Правило: Если ширина или высота меняется с разрешением, текстом или содержимым списка, а углы должны сохранять форму → nine-slice или эквивалент в движке. Контролы фиксированного размера → фиксированный спрайт + ограничения лейаута.

---

Метки передачи Figma / PSD (чек-лист)

#	Проверка	Стандарт прохождения
1	Слой растяжения отделён от декора / иконок / текста	Рескин фона панели + нарезка; иконки не масштабируются с фоном
2	Border / cap inset в px (четыре стороны)	Совпадает с @1x или командным экспортным масштабом в заметках о передаче
3	Фиксированный экспортный масштаб (@1x/@2x или базовая линия 1080)	Инженеры не угадывают математику границ
4	Радиус угла вне зоны растяжения или спецификация допускает нерастягиваемые углы	Никаких пропусков в духе «углы превращаются в капсулы»
5	Зона растяжения дружелюбна к тайлингу или однородна	Повтор центра без заметного смещения
6	Семантические имена	Например, Panel_Shop_9s, Input_Field_9s
7	Мультисостояние (normal / disabled) с одинаковой границей	Инсеты совпадают; меняются только цвет/скин
8	PSD slice или заметки об экспорте Figma прозрачного паддинга	Не считать тень в границе, если спецификация не говорит иначе
9	Передавать вместе с пунктом 5 передачи состояний кнопок	Не латать отсутствующие состояния неправильным 9s-артом
10	Рескин события меняет только арт, граница неизменна	См. спецификацию рескина

Figma: указывайте cap inset в документации компонента при использовании resizable frames или плагинов нарезки. PSD: выравнивайте слайсы с PSD в Unity за 5 минут.

---

Три движка: компоненты и приёмка

Пункт	Unity UGUI	Godot 4 Control	Cocos UI
Компонент	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
Источник границ	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
Область содержимого	RectTransform + паддинг дочерних	MarginContainer + Theme	Widget / паддинг лейаута
Типичный провал	Неверное использование Simple; граница не в том масштабе	Несовпадение patch и размера текстуры	Поворот в атласе ломает inset
Прохождение	При 150% / 200% ширины: чёткие углы, чистый центр	То же; превью Theme совпадает с Play	То же; проверка на устройстве длинного списка

Приёмка в редакторе Unity (отображается на другие движки):

1. Установите Image в Prefab на Sliced с границами, совпадающими с дизайном.
2. Перетащите RectTransform панели до минимальной и максимальной ширины дизайна.
3. Сравните углы, края и центр со скриншотом Figma/PSD.
4. Если в режиме Play всё в порядке → одна проверка на устройстве по чек-листу перед релизом.

---

Полноэкранная концепция: разделение канваса и повторный экспорт

Имея только PNG или AI-арт полного экрана, границу вывести нельзя. Путь: VberAI Studio (AI Studio, ≠ Google AI Studio) разделение на месте → разметка масштабируемых панелей → экспорт Prefab (детерминированный, не LLM YAML).

Шаг	Действие	Приёмка
1	Полный экран на канвасе; разделить Panel_* и фиксированные иконки	Именованная иерархия
2	Подтвердить намерение 9-slice панели на канвасе или перед экспортом	Владелец инсета задокументирован
3	Экспорт Prefab для Unity / Godot / Cocos	Sliced QA по таблице выше
4	После рескина / локалей — повторный экспорт всего дерева	Если спецификация границ не изменилась, инсеты не меняются

Слоистые Figma/PSD: предпочитайте Figma → Unity или PSD в UGUI, затем мелкие правки границ в движке — избегайте повторного экспорта 20 отдельных PNG на каждое событие.

---

Маршрутизация исправлений

Симптом	Вероятная причина	Действие	Владелец
Размытые углы	Масштаб Simple на всём изображении	Sliced + правильная граница; дизайн добавляет метку инсета	Инженерия + Дизайн
Шов в центре / блоки повтора	Инсет смещён на 1–2px; несовпадение масштаба	Совместить с px дизайна; переимпортировать спрайт	Инженерия
Углы растягиваются в овал	Арт не должен использовать nine-slice	Фиксированный размер или новый арт углов	Дизайн
Граница меняется после рескина	Новый размер арта или паддинг	Зафиксировать размер канваса в спецификации рескина; повторный QA после рескина	Дизайн
Фон строки списка деформируется	Фон строки растягивается как целая панель	9s для строки или фиксированная высота	Дизайн
Провал только на некоторых разрешениях	Нецелочисленный масштаб Canvas Scaler	Чек-лист движка Anchor/Scaler	Инженерия

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

---

Против передачи «только PNG-пак»

Подход	Подходит	Не подходит
Ручной экспорт + инженерия заполняет границы	Мало панелей, демо	Частый рескин, много экранов
Figma/PSD + структурированный экспорт VberAI Studio	Много экранов, много движков, события	Замена меток инсетов и QA
Временный Sliced в движке	Хотфикс одного экрана	Долгосрочно без источника дизайна

Рекомендуется: метки инсетов в дизайне → структурированный экспорт Prefab → Sliced в редакторе Unity на двух ширинах → MCP для логики. Raycast и привязка: чек-лист движка + MCP.

---

Часто задаваемые вопросы

Могут ли скруглённые панели использовать nine-slice?
Да, но инсеты должны лежать на прямых растягиваемых краях; углы остаются в нерастягиваемых угловых тайлах. Если радиус угла растёт с размером панели → провал; исправьте арт или ограничьте максимальный размер.

Считаются ли тени в границе?
Решает спецификация продукта. Если тень не растягивается, разделите слои или отметьте инсет на сплошном прямоугольнике без внешнего свечения.

Tiled или Sliced?
Sliced для панелей с рамкой; Tiled (или дружелюбный к тайлингу арт центра) для повторяющейся текстуры середины. Пишите в спецификации — не оставляйте инженерам угадывать.

Отдельные слайсы для Godot / Cocos?
Одна семантика инсетов; переключайте цель экспорта через мультидвижковый экспорт канваса и проверяйте patch/cap по таблице.

Автоматически ли VberAI Studio заполняет границы?
Зависит от экспорта и ассетов; приёмка всегда — Sliced/StyleBox в движке. Нет инсета в дизайне → инженерия задаёт границы в редакторе и фиксирует в спецификации.

VberAI Studio — то же самое, что Google AI Studio?
Нет. См. сравнение.