Послуги з UX/UI дизайну для ігор

UX/UI для ігор

Відкриваєте чужий Unity-проект — і бачите: один Canvas на всю гру, сотня вкладених панелей, Layout Groups всередині Layout Groups, і профайлер показує 4 мс просто на перерахунок UI у кожному кадрі. Це не рідкість. UI в іграх часто дописується за потребою, без архітектури, і до кінця проекту перетворюється на джерело постійних багів і падінь продуктивності.

Ми проектуємо та реалізуємо ігровий UI: від вайрфреймів до готових компонентів у рушієві, з урахуванням продуктивності та легкості підтримки.

Прототипування та проектування

Будь-який UI починається з розуміння інформаційних потоків: що гравець повинен бачити в кожен момент, які дії доступні, як переходити між екранами. Без цього розробка перетворюється на серію ітерацій «зробили — не то — переробили».

Інструмент для прототипування — Figma. Вибір обґрунтований не модою, а конкретними можливостями:

• Компонентна система з варіантами — одразу перевіряю, як кнопка виглядає в станах Normal/Hover/Pressed/Disabled
• Auto Layout — чесна симуляція поведінки UI при різних розмірах тексту (критично для багатомовних ігор)
• Прототипи з переходами — можна протестувати навігаційний флоу до строки коду

На етапі прототипу виявляються більшість UX-проблем: неочевидні переходи, перевантажені екрани, невірна ієрархія інформації. Виправити це в Figma — 15 хвилин. Виправити у готовому Unity-проекті — півдня.

uGUI проти UI Toolkit

У Unity зараз два фреймворки для UI, і вибір між ними не очевидний.

uGUI (Canvas-based) — зріла система, існує з Unity 4.6. Працює з RectTransform, багата екосистема готових компонентів та ассетів. Практично весь існуючий ігровий UI на Unity написаний на uGUI.

UI Toolkit — нова система на основі XML (UXML) та CSS-подібних стилів (USS). Спочатку створювалася для редакторних інструментів (Editor Extensions), з Unity 2021 офіційно підтримується для рантайм UI. Архітектурно ближче до веб-розробки.

Коли обирати UI Toolkit:

• Новий проект, команда готова до навчання
• Потрібна складна система тем і скинів
• Активно розробляються кастомні редакторні інструменти

Коли залишатися на uGUI:

• Підтримка існуючого проекту
• Потрібна максимальна сумісність з ассетами Asset Store
• Команда вже знає uGUI, терміни стислі

Глибше: продуктивність Canvas та draw calls

Це та область, де ігровий UI кардинально відрізняється від UI у звичайних додатках. У грі UI оновлюється кожен кадр, і неефективна реалізація може з'їсти 3–5 мс з бюджету кадру.

Як працює батчинг у Canvas

Unity об'єднує елементи одного Canvas в один draw call, якщо вони використовують однаковий матеріал та текстурний атлас. Розрив батчу означає додатковий draw call, що прямо бпе по продуктивності.

Що ламає батч:

• Різні текстури в сусідніх елементах (рішення: спрайтовий атлас через Sprite Atlas)
• Mask компонент створює stencil та розриває батч (альтернатива: RectMask2D — працює дешевше)
• Canvas з різними Render Mode — батчинг працює тільки всередині одного Canvas
• Будь-який Graphic Raycaster додає overhead — ставте тільки на інтерактивні Canvas

Розділення Canvas за типами контенту

Головна рекомендація по архітектурі Canvas: розділяйте статичний та динамічний контент.

Коли хоч один елемент у Canvas змінюється, Unity перебудовує геометрію всього Canvas. Якщо на одному Canvas живуть і статична рамка HUD, і анімована шкала здоров'я — щосекунди Canvas перебудовується повністю.

Правильна структура:

Canvas (Screen Space - Overlay)
├── Canvas_Static     — фони, рамки, іконки без анімації
├── Canvas_Dynamic    — HP-бари, таймери, лічильник ресурсів
└── Canvas_Popup      — модальні вікна, сповіщення

Кожен дочірній Canvas ізолює перебудову від батьківського. Зміна в Canvas_Dynamic не торкається Canvas_Static.

TextMeshPro та текстові батчі

TextMeshPro (TMP) — стандарт для тексту у Unity. На відміну від старого Text, використовує SDF-рендеринг: текст залишається чітким при будь-якому масштабі. Але у TMP є нюанс з батчингом: кожен унікальний шрифтовий атлас — окремий матеріал, тобто окремий draw call.

Якщо в грі використовуються три варіанти шрифту (основний, заголовковий, цифровий) плюс версії для кожної мови — батчинг тексту розваліється. Рішення: TMP Font Asset Creator з об'єднанням гліфів потрібних мов в один атлас. Для кирилиці + латиниці + цифр зазвичай хватає одного атласу 2048×2048.

Адаптивний UI для різних соотношень сторін

Мобільні платформи додають задачу, якої немає на ПК: UI повинен коректно працювати на 16:9, 18:9, 19.5:9, 4:3 та iPad-соотношеннях одночасно.

Інструменти:

• Canvas Scaler з режимом Scale With Screen Size — базова налаштування. Reference Resolution 1080×1920 для мобільних, параметр Match 0.5 (баланс між шириною та висотою)
• Anchor Presets — кожен елемент повинен бути привязаний до правильного краю або центру. Елемент у кутку екрана — до кута, елемент у центрі — до центру
• Safe Area — на пристроях з вирізом та скругленими кутами кнопки не повинні попадати в недоступну зону. Рішення: Screen.safeArea у коді, коригує RectTransform кореневого елемента

Перевірка робиться не тільки в Game View редактора — потрібне фізичне тестування на пристроях або Device Simulator (вбудований у Unity).

Локалізація UI

Це не окрема задача, а вимога до архітектури з першого дня. Типова проблема: UI спроектований під російський текст, що займає N символів. Німецький переклад в півтора раза довший. Кнопки ломаються, текст вилазить за границі.

Що робимо на етапі проектування:

• Усі текстові поля з Auto Size в TMP або явно заданими мінімальним/максимальним розміром
• Кнопки з Horizontal Layout Group + Content Size Fitter замість фіксованої ширини
• Іконки та декоративні елементи не вставляти в строку з текстом через конкатенацію

Для реалізації локалізації використовуємо Unity Localization Package (офіційний) або I2 Localization (ассет, більш гнучкий для складних випадків).

Що входить у послугу

• Проектування навігаційної структури та флоу екранів
• Прототипування в Figma та передавання макетів у розробку
• Реалізація UI-компонентів у Unity (uGUI або UI Toolkit)
• Аудит існуючого UI за продуктивністю: аналіз draw calls, Canvas rebatch, зайвих Raycaster
• Налаштування системи локалізації та перевірка на довгих перекладах
• Адаптація під мобільні соотношення сторін та Safe Area