Верстка графічних елементів UI у рушії ігор
Дизайнерський макет у Figma — лише відправна точка. Коли гра запускається на iPhone SE з 4-дюймовим екраном, а потім на iPad Pro 12.9", один і той самий UI може або акуратно підлаштуватися, або роз'їхатися, налізти на системні кнопки чи обрізатися. Без правильної архітектури верстки адаптація під мультиплатформу перетворюється на нескінченне редагування префабів. Наша команда з досвідом понад 7 років та 30+ проєктами допомагає уникнути цих проблем. Ми гарантуємо якість верстки та адаптивність на всіх пристроях.
Системи верстки UI: uGUI проти UI Toolkit
В Unity два актуальних підходи: uGUI (Canvas + RectTransform) — перевірена роками система, та UI Toolkit (UXML + USS) — сучасний flexbox-підхід. UI Toolkit використовує єдиний Mesh Builder, що на складних екранах може бути до 2x швидшим, але поки не підтримує World Space Canvas та вбудовані анімації переходів.
| Характеристика | uGUI | UI Toolkit |
|---|---|---|
| Layout-модель | RectTransform + Layout Groups | Flexbox (USS) |
| Рендеринг | Canvas batching | Єдиний Mesh Builder |
| Підтримка World Space | Так | Ні |
| Тематизація | Через зміну спрайтів | Через перемикання USS-файлів |
| Крива навчання | Низька | Середня |
Згідно з офіційною документацією Unity, вибір між системами — архітектурне рішення, яке приймається на початку проєкту. Зміна системи в середині розробки фактично означає переверстку всього UI.
Як адаптувати UI до різних роздільностей у uGUI?
Якірна система RectTransform — основний інструмент адаптації. Елемент з якорями min(0,0) max(1,1) розтягується на весь батьківський контейнер. Canvas Scaler у режимі Scale With Screen Size масштабує весь Canvas як єдине ціле — зручно для статичних екранів, але для HUD біля країв потрібна Safe Area адаптація.
Для мобільних пристроїв критично правильне налаштування Safe Area через Screen.safeArea. Проміжний Panel-контейнер підганяє відступи, і всі HUD-елементи розміщуються всередині. Тестувати верстку слід на реальних пристроях або через Device Simulator — простий Game View не відтворює Safe Area коректно. Ми гарантуємо, що UI буде коректно відображатися на всіх поширених пристроях.
Чому Safe Area критична для мобільних UI?
Мобільний ринок — це зоопарк співвідношень сторін від 4:3 до 21:9. Без Safe Area елементи інтерфейсу можуть опинитися під системною панеллю або Dynamic Island. Реалізація через Screen.safeArea обов'язкова для всіх елементів HUD біля країв екрана. При Letterbox (Canvas Scaler Match = 0.5) на широких екранах з'являються смуги, але нічого не обрізається; при Crop (Match = 1.0 з Expand) екран заповнюється, але частина UI може вийти за межу — вибір залежить від дизайну.
Кейс з нашої практики: верстка магазину з динамічним контентом
Наш клієнт звернувся з екраном магазину, який мав непередбачувану кількість категорій (від 3 до 12) та товарів. Рішення: горизонтальна ScrollView з HorizontalLayoutGroup для вкладок, сітка товарів через GridLayoutGroup у вертикальній ScrollView. Prefab товару з ContentSizeFitter для адаптації тексту. Половина часу пішла на вирішення проблеми вкладених ContentSizeFitter — вони вимагають ручного виклику LayoutRebuilder. У підсумку верстка зайняла 4 дні, а завдяки оптимізації batching draw calls скоротилися на 40%.
Що входить у роботу
- Аналіз Figma-макетів та вимог до платформ
- Вибір оптимальної системи верстки (uGUI / UI Toolkit)
- Створення префабів та налаштування адаптивності
- Адаптація під Safe Area та multiple aspect ratios
- Інтеграція з геймплеєм та прив'язка даних
- Оптимізація продуктивності (draw calls, batching)
- Тестування на пристроях (мінімум 5 різних роздільностей)
Як ми верстаємо UI: покроковий процес
- Аналіз макетів — виявлення проблем верстки (плаваюча довжина тексту, різна кількість елементів).
- Вибір архітектури — визначення системи та підходу до адаптації.
- Створення префабів — гнучкі компоненти з правильними якорями та layout groups.
- Адаптація під роздільності — налаштування Safe Area, Letterbox/Crop, тестування на симуляторах.
- Інтеграція та тестування — прив'язка UI до геймплею, запуск на реальних пристроях.
| Тип задачі | Терміни | Орієнтовна вартість |
|---|---|---|
| 1 статичний екран (меню, налаштування) | 1–2 дні | $200–$400 |
| 1 складний динамічний екран (інвентар, магазин) | 3–7 днів | $500–$1000 |
| Повний UI-комплект (10–20 екранів) | 3–8 тижнів | $3000–$8000 |
| Адаптація до Safe Area + мультиплатформа | +3–7 днів до будь-якого обсягу | +$500–$1000 |
Вартість розраховується індивідуально після аналізу Figma-макетів та вимог до платформ. Наша команда — 7+ років на ринку геймдеву, 30+ виконаних проєктів. Якщо вам потрібна якісна верстка UI для вашої гри — зв'яжіться з нами. Ми оцінимо ваш проєкт і запропонуємо оптимальне рішення. Замовте розробку та отримайте безкоштовний аудит поточного інтерфейсу.