Безопасная зона игрового UI и QA на устройствах: порядок отладки и исправления Prefab

Самая частая жалоба: в Game view всё выглядит нормально, но на высоком телефоне HUD оказывается под вырезом, или кнопки кажутся кликабельными, а попадания не срабатывают. Safe Area — это не «подвинуть Anchor», это политика корневого Canvas, полноэкранный фон против вставленного контента и то, совпадает ли runtime safeArea с каналом.

классы сбоев, порядок отладки Unity UGUI, правила исправления Prefab и оговорки по каналам/мини-играм. Пункт 7 передачи дизайна — метки safe-zone — обобщён в разделе «что должен предоставить дизайн»; пункт 1 перед релизом — охват устройств — расширен здесь, это не повтор чек-листа движка + MCP по Raycast / первому Play.

Godot / Cocos: сопоставьте с DisplayServer.get_display_safe_area() / виджетами SafeArea движка; порядок шагов тот же, что для Unity ниже.

Критерии провала (любой один = не пройдено): основной читаемый UI или обязательные кнопки под системным перекрытием (вырез, индикатор home, скруглённые углы); очевидное смещение визуала относительно попадания; только Editor 16:9 без целевого соотношения на устройстве; поведение Safe Area в Dev и Release различается без спецификации.

---

Сначала классифицируйте: обрезка, смещение или только фон

Симптом	Первый подозреваемый	Инженерное действие
Визуальная обрезка (текст/иконки в вырезе)	Контент не вставлен; корень считается полноэкранным	Проверить safeArea против прямоугольников контента
Смещение тапа (выглядит правильно, но не попадает)	Режим масштабирования Canvas, несколько Canvas, несовпадение камеры	Raycast EventSystem + renderMode Canvas
Фон обрезан, кнопки в порядке	Полноэкранный фон по дизайну, контент вставлен	Не провал, если спецификация это допускает
Неверно после поворота	Нет слушателя изменения ориентации / safeArea	Пересчитать вставку при повороте
Только сборка одного канала	SDK меняет safeArea или разрешение	Проверить именно эту сборку; не полагаться только на общий Android

---

Unity UGUI: рекомендуемый порядок отладки (6 шагов)

1. Зафиксируйте воспроизведение

Запишите устройство, ОС, Dev/Release, ориентацию, разрешение Game view. Пункт 5 перед релизом: прогоните основной HUD на Dev и Release.

2. Залогируйте safeArea и reference resolution

После загрузки основного UI залогируйте:

• Screen.width / Screen.height
• Screen.safeArea
• Display.cutouts (Android 11+ если используется)

Чтение: safeArea меньше экрана → требуется вставка контента. В Editor safeArea часто равна полному экрану → это не замена устройству.

3. Корень Canvas и Canvas Scaler

Проверка	Типичная ошибка	Направление исправления
Корневой Render Mode	Смешение Screen Space / Camera UI → смещение луча	Один режим для UI
Canvas Scaler	Reference resolution ≠ базовый портретный ориентир проекта	Сопоставить с чек-листом движка, пункт 1
Match width/height	Длинное соотношение масштабируется неверно; краевые виджеты уезжают	Согласовать Match с дизайном/продом; исправить Prefab, а не только Scene
Сортировка нескольких Canvas	Попадания уходят на неверный слой	Согласовать sortingOrder и цели raycast

4. Слои: полноэкранный фон против безопасного контента

Рекомендуемая иерархия Prefab:

Canvas
├── Background_FullBleed   (полный anchor, может заходить в вырез, без ввода)
└── SafeRoot               (компонент Safe Area или padding на основе safeArea)
    ├── HUD_Content
    └── Popups

Используйте Unity Safe Area (или проектный код, задающий offsetMin/Max из Screen.safeArea). Не растягивайте интерактивные кнопки на весь экран без вставки.

Экспорт из студии одним плоским слоем: см. nine-slice / структурированный повторный экспорт и canvas → Prefab.

5. Точечная проверка тапов на устройстве

3–5 критичных кнопок на основном потоке; сравните визуальный центр с пальцем. Смещение только на одном попапе → проверьте вложенный Canvas или двойной Scaler.

6. Зафиксируйте Prefab в репозитории

Критерии прохождения живут в версионированном Prefab, а не в переопределениях тестовой Scene (пункт 6 перед релизом). После изменений Anchor прогоните смоук переполнения локалей на стресс-языках.

---

Канал / мини-игра (инженерия)

Сценарий	Примечание
Нативное приложение	Screen.safeArea + реальные устройства
Некоторые мини-игры / быстрые приложения	Контейнер safeArea / systemInfo ≠ симуляция Editor
Вырезы Android	cutout и safeArea могут различаться
PC / deck	safeArea часто полный экран

Паттерн: ISafeAreaProvider (или эквивалент); внедряйте по платформе — избегайте #if в HUD Prefab.

---

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

Симптом	Вероятная причина	Действие	Владелец
Обрезка на устройстве, Editor в порядке	Нет SafeRoot / нет драйвера safeArea	Слоистый Prefab + Safe Area; перетестировать на устройстве	Инженерия
Фон в порядке, кнопки обрезаны	Кнопки под слоем bleed	Переместить в SafeRoot; повторный экспорт слоёв из студии	Инженерия + дизайн
Смещение тапа	Несколько Canvas / camera UI / вложенный Scaler	Объединить Canvas или унифицировать камеру raycast	Инженерия
Дрейф при смене разрешения	Только фиксированные anchors	Исправить anchors; пункт 6 движка	Инженерия
В дизайне нет safe frame	Отсутствует пункт 7 передачи	Дизайн добавляет референсы выреза/home; повторный экспорт	Дизайн
Плоский экспорт из студии	BG + HUD не разделены	Разделение на месте, затем повторный экспорт	Инженерия + дизайн

---

Что предоставляет дизайн (вторично)

Поставка	Инженерное использование
Целевое разрешение + безопасный референс (вырез / home bar)	Reference Resolution и ожидания по вставке
Именованные слои full-bleed и HUD	Prefab Background_* / SafeRoot
Краевые вкладки внутри safe или намеренный bleed	Стратегия Anchor

Дизайнерам не нужно писать скрипты — чёткие метки уменьшают угадывание вставки в px.

---

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

Достаточно ли разрешения iPhone в Game view?
Только смоук в Dev; для релиза нужны целевые устройства (пункт 1 перед релизом). В Editor safeArea часто отличается.

Компонент Safe Area против ручного offset?
Выбор команды; ручной должен обновляться при изменениях safeArea/ориентации — избегайте дублирования логики.

Исправить обрезку только через Canvas Scaler?
Scaler масштабирует; вставка — отдельно. Обрезка — это прямоугольник контента; Scaler — глобальный масштаб.

Могут ли помочь MCP/Cursor?
Хороши для переименований Prefab, подключения Safe Area, смоука Play — числа всё равно из логов устройства. Чек-лист движка + MCP.

Safe Area плюс переполнение локалей?
Сначала исправьте layout SafeRoot, затем стресс-локали — вставка уменьшает ширину.

VberAI Studio против Google AI Studio?
Нет. См. сравнение.