Розробка 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 |
|---|---|---|
| Мобільні (60fps) | 16.7 мс | 2-3 мс |
| Консоль (30fps) | 33.3 мс | 4-5 мс |
| ПК (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 (вбудований з 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.
