Верстка интерфейсов игр для пространственного взаимодействия

tags: [vr-ar]

Верстка интерфейсов игр для пространственного взаимодействия

UI в VR — не экран, который пользователь видит перед собой. Это объекты в пространстве, с которыми он взаимодействует руками или лучами. Привычный Canvas в Screen Space работать не будет. World Space Canvas — отправная точка, но и здесь начинаются сложности.

Стандартная ошибка: взять UI из 2D-игры, переключить Canvas на World Space, поместить перед игроком — и получить панель, которая либо слишком близко (неудобно читать в VR на расстоянии 30 см), либо слишком далеко, либо не реагирует на контроллеры.

Дистанция и угловой размер элементов

В VR всё измеряется в угловых градусах, не в пикселях и не в метрах. Комфортная зона чтения — 1.5–2 метра от глаз пользователя. На этом расстоянии шрифт должен занимать минимум 0.5° угла обзора для уверенного чтения — это примерно 1.5 см высоты символа на расстоянии 2 м.

Кнопки требуют ещё большего размера для уверенного нажатия лучом: минимум 3×3 см физических на 2 метрах — это 0.86°. Мелкие элементы UI, которые прекрасно работают на мониторе, в VR становятся неюзабельными.

Интерфейс следует размещать в «зоне комфорта» — горизонтально в пределах ±35° от направления взгляда, вертикально в пределах ±15°. Панель, размещённая сбоку или снизу, требует постоянного поворота головы и утомляет.

XR Interaction Toolkit: Ray Interactor и Direct Interactor

XR Interaction Toolkit (XRI) — стандарт для взаимодействий в VR на Unity. Для UI предоставляет TrackedDeviceGraphicRaycaster (замена GraphicRaycaster для World Space Canvas) и XR Ray Interactor на контроллере.

Базовая настройка: Canvas → добавить TrackedDeviceGraphicRaycaster, убрать стандартный GraphicRaycaster. На контроллере — XR Ray Interactor с LineType = StraightLine или ProjectileLine для более органичного вида. UI Press Threshold — чувствительность «нажатия» лучом, обычно 0.1–0.2 для Trigger-based взаимодействия.

Проблема с EventSystem в XRI: стандартный StandaloneInputModule конфликтует с XRUIInputModule. В сцене должен быть только один EventSystem с XRUIInputModule. При импорте XRI пакета это иногда настраивается автоматически, но при работе с несколькими канвасами могут возникать конфликты — особенно если часть UI была создана до подключения XRI.

World Space Canvas и разрешение текстур

World Space Canvas рендерится в мировых координатах через CanvasScaler с Scale Factor. Разрешение текстуры канваса зависит от физического размера Canvas × Reference Pixels Per Unit. По умолчанию Reference Pixels Per Unit = 100 — для Canvas 1×0.5 м это 100×50 условных единиц. При рендере в VR это будет выглядеть размыто.

Правильная настройка: CanvasScaler → Scale With Screen Size не применимо для World Space. Используем Constant Physical Size с Physical Unit = Centimeters — это даёт предсказуемый размер элементов независимо от Canvas dimensions. Текст рендерим через TextMeshPro — его distance field рендеринг значительно лучше стандартного Unity Text при масштабировании в пространстве.

Дополнительно: для World Space Canvas в VR обязательно включать Pixel Perfect = false (он ломает пространственный рендер) и проверять Dynamic Pixels Per Unit в CanvasScaler — для VR обычно нужно значение 2–4 для чёткого текста.

Интерфейс на предплечье: «наручные часы» паттерн

Один из наиболее принятых паттернов в VR UI — интерфейс, прикреплённый к предплечью недоминантной руки. Игрок поднимает левую руку, поворачивает ладонью к себе — появляется панель с инвентарём, картой или настройками.

Реализация: Canvas как дочерний объект LeftHandController с локальным смещением и ротацией. Активация через Palm Up detection: берём Vector3.Dot(leftHand.up, Camera.main.transform.forward) — когда значение выше порога (~0.7), рука повёрнута ладонью к лицу, показываем UI.

Важно: UI должен появляться плавно (Lerp alpha + scale за 0.15–0.2 сек), иначе мгновенное появление панели прямо перед глазами пугает. И не должен появляться случайно при движениях в бою — нужен минимальный threshold по времени удержания позы (0.3–0.5 сек).

Haptic Feedback и визуальное подтверждение

В VR нет звука клика мышью и нет физического нажатия кнопки. Без обратной связи игрок не понимает, попал ли он лучом в кнопку и нажал ли её.

Минимальный набор: визуальный hover state (кнопка меняет цвет при наведении луча), визуальный pressed state (кнопка «вдавливается» — scale по Z на 0.05–0.1 единицы), haptic pulse при нажатии через XRBaseController.SendHapticImpulse(0.3f, 0.05f). Трёх сотых секунды лёгкой вибрации достаточно для подтверждения. Без хаптики кнопки в VR ощущаются «мёртвыми».

Стоимость рассчитывается после получения дизайн-макетов и понимания типов взаимодействий в проекте.