Розробка UX/UI для ігор, які витримують жорсткі вимоги продуктивності та зручності — це окрема інженерна дисципліна. На прикладі HUD шутера: інформація повинна зчитуватися бічним зором, не відволікаючи від перестрілки. Інвентар у RPG відкривається на кілька секунд, але запам'ятовується надовго. Різні завдання — одне рішення: інтерфейси, які працюють де завгодно, від мобільних пристроїв до консолей. Наш підхід знижує кількість draw calls на 20-30% порівняно з типовою реалізацією, економлячи до 15% часу на промальовування кадру.
Чому ігровий UI — це окрема дисципліна?
На відміну від веб-дизайну, ігровий інтерфейс працює в реальному часі. Кожен зайвий draw call може спричинити просадку FPS. Ми враховуємо це на етапі проєктування: мінімізуємо кількість Canvas, використовуємо batching та правильні атласи шрифтів. 10+ років досвіду в геймдеві дозволяють нам передбачати вузькі місця. Наприклад, типова помилка — використання одного Canvas для всього UI, що призводить до перерисовки сотень елементів при оновленні таймера. Рішення — дроблення Canvas.
Як ми забезпечуємо продуктивність інтерфейсів?
Canvas з Overlay на мобільному
Класична проблема: Unity перерисовує весь Canvas при зміні будь-якого дочірнього елемента. Рішення — розділяти Canvas на статичні та динамічні частини, ставити компонент Canvas на часто оновлювані елементи окремо. Це зменшує кількість ребілдів Canvas у 3–4 рази.
Масштабування під різні співвідношення сторін
Canvas Scaler в режимі Scale With Screen Size з Reference Resolution 1920×1080 і Match = 0.5 — стандарт, але не панацея. На iPad (4:3) або складних пристроях UI роз'їжджається. Ми проставляємо якорі в RectTransform усвідомлено для кожного елемента. Для нестандартних роздільних здатностей додаємо додаткові правила через Layout Group.
TextMeshPro і Dynamic Font Atlas
Якщо у грі кілька мов з кирилицею, грецькою, арабською — одного атласу не вистачить. При рантаймовому додаванні символів Unity перепекає атлас, що дає фриз на 2–5 мс. Для критичних екранів використовуємо статичні атласи з явно заданим набором символів. Це повністю усуває фризи, пов'язані з атласом.
Продуктивність анімацій
Анімації UI часто стають вузьким місцем. DOTween і LeanTween працюють з трансформаціями напряму, минаючи Animator Controller, що знижує навантаження на CPU. Порівняння: анімація масштабу кнопки через Animator займає ~1.2 мс, через DOTween — 0.4 мс. На 20 одночасно анімованих елементах різниця стає критичною. Замовте розробку інтерфейсу з урахуванням цих оптимізацій.
Як виміряти продуктивність UI?
Використовуємо Unity Profiler: дивимося на CPU Usage → Canvas.BuildBatch і Canvas.SendWillRenderCanvases. Норма для мобільних пристроїв — не більше 2 мс на UI-рендеринг. Таблиця цільових показників:
| Категорія | FPS budget | UI budget |
|---|---|---|
| Mobile (60fps) | 16.7 мс | 2-3 мс |
| Console (30fps) | 33.3 мс | 4-5 мс |
| PC (60fps) | 16.7 мс | 3-5 мс |
Перевищення UI budget веде до stutter.
Як проєктуємо ігровий UI
HUD: інформація без відволікання
Хороший HUD робить інформацію доступною, не вимагаючи фокусу. Працюємо за принципом ambient інформації: HP-бар змінює колір при зменшенні, пульсує при критичному рівні. Для кожного елемента визначаємо частоту оновлення: HP — кожен хіт, міні-карта — 0.5 сек, таймер — кожну секунду. Update з накопичувачем замість прямого оновлення кожен кадр знижує навантаження на Canvas rebuild.
Екрани меню та навігація
Навігація через NavigationGraph в Unity UI — для геймпад та клавіатурної підтримки. Прописуємо explicit navigation для кожної кнопки, не залишаємо на automatic. Transition-анімації — через DOTween або LeanTween, не через Animator при простих випадках. Для складних sequence-анімацій використовуємо Animator з AnimationEvent.
Інвентар та drag-and-drop
Drag-and-drop реалізується через інтерфейси IBeginDragHandler, IDragHandler, IEndDragHandler. Основна проблема — поведінка при виході за ScrollRect. Керуємо подіями через EventSystem.current і розділяємо скролінг та перетягування по threshold'у. Віртуалізація довгих списків — через Pooling + ScrollRect, використовуємо ObjectPool<T> (вбудований з Unity 2021 LTS). Для консольної версії додаємо підтримку геймпада за допомогою EventSystem.
Що входить у роботу
- UX-аудит існуючого UI або проєктування з нуля
- Компонентна бібліотека у Figma з варіантами станів
- Збірка в Unity з анімаціями та інтеграцією в геймплей
- Адаптація під усі цільові платформи (iOS, Android, PC, консолі)
- QA на пристроях: безпечна зона notch, різні щільності, співвідношення
- Документація з реалізації та рекомендації з підтримки
Терміни та вартість
| Етап | Терміни |
|---|---|
| UX-аудит | 3–5 днів |
| Дизайн у Figma | 1–2 тижні |
| Реалізація в Unity | 1–3 тижні |
| QA та адаптація | 3–5 днів |
Вартість розраховується індивідуально після аналізу обсягу та вимог до платформ. Простий HUD — від тижня, повний UI-кіт — від місяця. Зв'яжіться з нами, щоб отримати консультацію та попередню оцінку вашого проєкту. Гарантуємо прозорий процес та фіксовані терміни.
Докладніше про технічні аспекти читайте в офіційній документації Unity по Canvas та TextMeshPro.