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

UI у VR — не екран, який користувач бачить перед собою. Це об'єкти в просторі, з якими він взаємодіє руками чи променями. Наші інженери з 8-річним досвідом у геймдеві вирішують це завдання під ключ: від прототипу до фінального деплою. Звичний Canvas у Screen Space не працюватиме. World Space Canvas — відправна точка, але й тут починаються складнощі.

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

Чому стандартний Canvas Screen Space не підходить для VR?

Screen Space Canvas прив'язаний до екрана. У VR він не враховує глибину — текст і кнопки накладаються на сцену, викликаючи конфлікт акомодації та конвергенції. Це призводить до швидкої втомлюваності та запаморочення. World Space Canvas розміщує UI в реальних координатах: ви можете підійти, відійти, зазирнути за панель.

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

У VR все вимірюється в кутових градусах, не в пікселях і не в метрах. Комфортна зона читання — 1.5–2 метри від очей користувача. На цій відстані шрифт повинен займати мінімум 0.5° кута огляду для впевненого читання — це приблизно 1.5 см висоти символу на відстані 2 м.

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

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

Як правильно налаштувати XR Interaction Toolkit для UI?

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

Базова налаштування: 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 відчуваються «мертвими».

Що входить у роботу

Орієнтовні терміни

Вартість розраховується індивідуально після ознайомлення з дизайн-макетами та сценаріями взаємодії. Отримайте консультацію — напишіть нам, ми оцінимо проєкт протягом 2 робочих днів.

VR та AR розробка

Коли ми вперше запускаємо проєкт у VR-гарнітурі, більшість команд стикається з одним і тим же: технічно все працює, але в гарнітурі або заколисує, або руки «плавають» із затримкою, або сцена виглядає сіпаною на периферії погляду. Це не баги у звичному розумінні — це наслідок того, що VR/AR розробка вимагає іншого підходу до архітектури рендеру, взаємодії та UX з самого початку проєкту. Наш досвід — понад 7 років у геймдеві, 15+ завершених VR/AR-проєктів для Meta Quest, SteamVR, PSVR2, HoloLens.

Платформи та SDK

Працюємо з усім актуальним стеком. OpenXR використовуємо як базовий шар скрізь, де це можливо — він дає кроссплатформеність між Meta, Valve Index, HP Reverb та іншими PC VR-пристроями. Поверх OpenXR будуємо на XR Interaction Toolkit (Unity) або VR Expansion Plugin (Unreal).

Як мінімізувати заколисування при локомоції у VR?

Locomotion — головне джерело motion sickness для недосвідчених VR-користувачів. Згідно з дослідженнями, близько 70% користувачів відчувають дискомфорт при неправильному налаштуванні руху (Oculus Developer Guidelines). Teleportation — стандартний спосіб навігації, коли плавне переміщення небажане.

Компоненти з XR Interaction Toolkit: TeleportationArea, TeleportationAnchor, TeleportationProvider. Базова реалізація працює «з коробки», але для продакшну доопрацьовуємо її в чотири кроки:

1. Налаштування XRRayInteractor з вигнутим променем (Bend Ray) — дуга телепортації виглядає натуральніше прямого променя, краще зчитується користувачами.
2. Додавання валідної зони приземлення — візуальний індикатор змінює колір при наведенні на перешкоду (червоний/зелений).
3. Впровадження fade transition — плавне згасання екрану (black fade) перед телепортом знижує дезорієнтацію.
4. Rotation snapping — після телепорту пропонуємо snap-поворот на 45° або 90° замість плавного, що знижує ризик заколисування.

Для проєктів, де потрібна плавна локомоція (екшн-ігри, симулятори), використовуємо comfort settings: віньєтування при русі, зниження FOV під час прискорення. Налаштування доступні користувачеві в меню — різні люди мають різний поріг чутливості.

Як зробити захоплення об'єктів у VR фізично реалістичним?

Це найнедооціненіша частина VR-розробки. Клієнти часто сприймають її як «просто анімація рук», але на практиці — складна система, де фізична коректність, відгукливість та комфорт вступають у суперечність.

Grab (захоплення)

XR Interaction Toolkit надає три типи Interactable для захоплення:

• XRGrabInteractable — стандартне захоплення, об'єкт слідує за контролером через фізичний joint або direct position/rotation
• XRSimpleInteractable — для об'єктів без фізичного переміщення (кнопки, важелі)
• Кастомні Interactable через наслідування від XRBaseInteractable

Attach Transform — часто ігнорована деталь. У кожного Interactable має бути правильно налаштований Attach Transform (точка, до якої рука «прилипає»). Без нього рукоятка пістолета опиниться по центру меша, а не там, де її тримають.

Для зброї та інструментів з дворучним захопленням — окрема система TwoHandGrab: ведуча рука визначає позицію, друга — орієнтацію. XR Interaction Toolkit підтримує це через XRTwoHandGrabInteractable або кастомну логіку з двома Attach Points.

Throw (кидок)

Чому velocity smoothing критичний для реалістичного кидка? Проблема в тому, що Rigidbody.velocity в момент відпускання контролера відображає миттєву швидкість, яка часто некоректна через дискретизацію трекінгу. Користувач робить швидкий рух зап'ястям — а об'єкт летить вдвічі повільніше.

Рішення: velocity smoothing за останні N кадрів (типово 5-10 кадрів, ~80-160 мс при 60 Гц) перед відпусканням. XR Interaction Toolkit робить це через VelocityEstimator. Додатково застосовуємо velocity scaling multiplier — невелике множення швидкості (1.2-1.5x) робить кидки суб'єктивно більш задовільними. Кутову швидкість (для об'єктів, які мають крутитися в польоті) також усереднюємо аналогічним чином.

AR: Plane Tracking та робота з оточенням

AR додає інший клас проблем — роботу з реальним, непередбачуваним оточенням. AR Foundation — кроссплатформенний шар поверх ARKit та ARCore. Більшість базових функцій (plane detection, raycasting, image tracking, face tracking) доступні через єдиний API.

Plane Detection

ARPlaneManager виявляє горизонтальні та вертикальні площини. Практичні нюанси:

• Ініціалізація займає час — користувач повинен оглянути приміщення, поки система будує карту. Потрібен явний onboarding з інструкцією «повільно водіть камерою по поверхнях».
• Площини нестабільні — їх межі та позиція оновлюються в міру накопичення даних. Об'єкти, розміщені на площині, потрібно прив'язувати через parenting до ARPlane, а не до світових координат.
• Злиття площин — два виявлені сегменти підлоги можуть злитися в один, що рухає якір. Для критичних якорів використовуємо ARAnchor замість прямої прив'язки до площини.

Оптимізація для VR: фреймрейт та комфорт

VR вимагає стабільного високого фреймрейту. Близько 60% часу розробки в мобільному VR йде на оптимізацію, а не на функціонал — ретрофіт у два рази дорожче правильної архітектури з першого спринту.

Single Pass Instanced Rendering

Головна оптимізація рендеру у VR. Без неї сцена рендериться двічі (для кожного ока), що подвоює draw calls. Single Pass Instanced рендерить обидва ока за один прохід через instancing: geometry обробляється один раз, шейдер отримує два view/projection matrix через GPU instancing. Вмикається в Unity через XR Plug-in Management > Rendering Mode: Single Pass Instanced. Важно: кастомні шейдери повинні підтримувати SPI — стандартні URP/HDRP шейдери підтримують, кастомні HLSL вимагають правки (UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX та пов'язані макроси). Застосування цієї техніки скорочує кількість draw calls на 40-50%.

Foveated Rendering

На Meta Quest доступний Fixed Foveated Rendering (FFR) — зниження роздільної здатності на периферії кадру, де гострота сприйняття нижча. Налаштовується через OVRManager або Meta XR SDK:

OVRManager.fixedFoveatedRenderingLevel = OVRManager.FixedFoveatedRenderingLevel.High;
OVRManager.useDynamicFixedFoveatedRendering = true;

Dynamic FFR автоматично підвищує рівень при просадці фреймрейту — зручніше фіксованого в сценах зі змінним навантаженням.

IPD та Comfort Settings

IPD (Inter-Pupillary Distance) — відстань між зіницями, впливає на сприйняття глибини. На програмованому рівні в більшості пристроїв доступне лише читання IPD (OVRPlugin.GetSystemDisplayFrequency), фізичне налаштування — на гарнітурі. Для додатків з точним позиціонуванням (медичні симулятори, тренінги) враховуємо IPD у розрахунках масштабу сцени.

Haptics

Тактильний фідбек — недооцінений інструмент. Навіть простий вібраційний відгук при захопленні об'єкта або попаданні значно підвищує відчуття присутності. В середньому інтеграція тактильних патернів займає 30–80 годин на проєкт.

XR Haptics через OpenXR:

var hapticImpulse = new UnityEngine.XR.HapticCapabilities();
InputDevice device = InputDevices.GetDeviceAtXRNode(XRNode.RightHand);
device.SendHapticImpulse(0, amplitude: 0.5f, duration: 0.1f);

Для складних патернів (тактильна «текстура» поверхні при дотику, наростаюча вібрація при натягу тятиви лука) використовуємо Meta Haptics Studio — дозволяє дизайнити haptic-кліпи візуально.

Що входить у розробку VR/AR-додатку

При замовленні проєкту під ключ ми надаємо:

• Архітектурний документ з описом стеку, логіки рендеру та системи взаємодії
• Робочий прототип (MVP) для тестування на цільовому пристрої
• Інтеграцію необхідних SDK (Meta XR, OpenXR, AR Foundation та ін.)
• Оптимізацію під цільові частоти 72/90/120 Гц з профілюванням draw calls та FPS
• Тестування на фізичному обладнанні (Quest, SteamVR, HoloLens) із залученням користувачів
• Повну документацію по збірці, деплою та підтримці
• Навчання команди замовника (воркшоп по роботі з XR Toolkit)
• Гарантійну підтримку протягом 1 місяця після здачі

Що впливає на вартість та терміни

VR/AR проєкти дорожчі за звичайні ігри аналогічного обсягу. Ітерації повільніші — кожну правку потрібно тестувати в гарнітурі, емулятор не передає реальний досвід. Motion sickness змушує переробляти частину концептуальних рішень після першого плейтесту. Оптимізація займає суттєву частку часу — для мобільного VR (Quest) до 60-70% циклу. Для проєктів під Quest починаємо оптимізацію з першого спринту.

Отримайте консультацію по вашому проєкту — оцінимо задачу, стек та терміни. Замовте розробку VR/AR-додатку під ключ з гарантією стабільного фреймрейту.