Створення іконок та UI-елементів мобільної гри

Створення іконок та UI-елементів мобільної гри

Ігровий інтерфейс — не веб-іконки і не корпоративний UI. Він повинен працювати на екранах від 4.7" до 6.7", читатися під час активного геймплею (поки гравець стежить за тим, що відбувається, а не за інтерфейсом), передавати стиль гри без тексту. Наша команда має понад 5 років досвіду на ринку ігрового UI: понад 30 успішних проєктів, від гіперказуалок до RPG. Ми гарантуємо якість кожного елемента, використовуючи перевірені техніки оптимізації. При цьому ключовий біль — пакування текстур без втрати продуктивності та єдиний стиль на всіх екранах. Помилки в 9-slice або атласах призводять до перевитрати пам'яті та падіння FPS. Розберемо, як цього уникнути.

Мінімальний tap target — 44×44pt — Apple HIG.

Технічні вимоги для ігрового UI

• Розміри та щільність: Мінімальний tap target за Apple HIG — 44×44pt. Для ігрових кнопок в екшн-грі краще 60×60pt і більше, гравець натискає не дивлячись. Дрібні іконки в інвентарі — від 64×64px до 128×128px залежно від кількості на екрані.
• Чому 9-slice критичний для кнопок?: Кнопки та рамки не просто розтягуються — вони масштабуються через 9-slice: кути фіксовані, краї тягнуться. У Unity Sprite Editor → Sprite Border задає межі. Одна кнопка 40×40px з 9-slice працює для кнопки 80×200px без спотворень.
• Sprite Atlas: пакування UI: Усі UI-елементи одного екрана — в одному атласі. Unity UI → Canvas → Render Mode: Screen Space Overlay малює все за один раз за умови одного Material / Atlas. Різні атласи для HUD (постійно на екрані) та інвентарю (відкривається рідко).
• Налаштування піксельної щільності: Для pixel art UI — Filter Mode: Point, Compression: None. Для векторно-намальованого UI — ASTC 6x6 нормально. Іконки з тонкими лініями (1–2px) погано переносять ASTC — потрібно ASTC 4x4 або без компресії.

Типові ігрові UI-елементи

HUD: постійний інтерфейс

Смуга здоров'я, мана, досвід, рахунок, таймер — постійно на екрані під час геймплею. Повинні бути мінімально інвазивні: займати краї екрана, не перекривати ігрову область. Safe Area на iPhone з notch — завжди враховуємо.

Іконки предметів: система фреймів

Однаковий фрейм + унікальний предмет. Система: фрейм за рідкістю (сірий — звичайний, синій — рідкісний, золотий — легендарний) + іконка предмета на ньому. Фрейми — один атлас, іконки предметів — окремий (додаються в міру виходу контент-патчів без переробки атласу фреймів).

Кнопки: стани та анімація

Normal, Pressed (scale 0.95 + tint), Disabled (opacity 50%). У Unity Button: ColorTintTransition або AnimationTransition з анімацією через Animator. Для критичних кнопок (купити за реальні гроші) — Highlighted стан з glow ефектом.

З практики: RPG колектор, Unity

Іконки предметів робилися окремими PNG без атласу — 200 іконок × 2 draw call кожна = 400 зайвих draw calls на екрані інвентарю. FPS в інвентарі падав до 40. Після пакування в 2 атласи 2048×2048 — draw calls інвентарю стали 8, FPS — 60.

Як пакування в атласи впливає на продуктивність?

Використання атласів безпосередньо знижує кількість draw calls. Ось порівняння для типового екрану інвентарю:

Економія очевидна — правильне пакування звільняє ресурси для геймплею. Вартість окремої іконки предмета з фреймом — від 1000 до 3000 гривень залежно від складності. Завдяки 9-slice та атласам продуктивність зростає в 5 разів порівняно з неоптимізованим UI.

Анімовані UI-елементи

Particle effects в канаві

Canvas Particle System в Unity — система частинок, що працює в Canvas space. Для збору монет, level up ефектів, нагород. Sort Layer повинен бути вищим за ігрові об'єкти, але нижчим за головний HUD.

Tween-анімації: DOTween

DOTween (Unity) або LeanTween — стандарт для ігрового UI. Bounce при отриманні нагороди: transform.DOPunchScale(Vector3.one * 0.3f, 0.3f). Shake при помилці: transform.DOShakePosition(0.3f, 5f). Флоатинг текст при отриманні XP: DOTween.Sequence() з Move + Fade.

Шрифти в ігровому UI

Ігровий шрифт — частина арт-стайлу. TMP (TextMeshPro) в Unity — стандарт, SDF рендеринг читаємий у будь-якому масштабі. Кириличні шрифти вимагають окремої генерації TMP Font Asset з кириличним Character Set (Window → TextMeshPro → Font Asset Creator). Fallback шрифти — для emoji або спеціальних символів.

Процес та обсяг робіт

Що входить у проєкт

• Іконки предметів / персонажів / здібностей в єдиній стилістиці
• Фрейми за рідкістю / типом
• HUD елементи: смуги, лічильники, таймери
• Кнопки в кількох станах (normal, pressed, disabled)
• Панелі, рамки, фони діалогів з 9-slice
• Іконка додатку для iOS та Android (включаючи адаптивну)
• Експорт у правильних розмірах + налаштовані атласи для Unity / Godot
• При необхідності: анімовані елементи (іконки нагород, ефекти)

Приблизний кошторис термінів

Базовий UI-kit для одного екрана (10–20 елементів) — 3–7 робочих днів, вартість від 50 000 до 100 000 гривень. Повний UI-kit для гри (HUD, інвентар, меню, магазин, іконки предметів) — 1–3 тижні. Вартість розраховується індивідуально, орієнтовно від 150 000 до 400 000 гривень залежно від складності. Зв'яжіться з нами — оцінимо ваш проєкт за 1 день.

Покроковий процес створення UI

1. Визначення стилістики та збір референсів.
2. Створення базових форм у векторі або растрі.
3. Перевірка на реальному пристрої з урахуванням safe area та щільності.
4. Пакування в атласи з правильним 9-slice.
5. Експорт з налаштуваннями: ASTC для текстур, Point для pixel art.

Які формати експорту оптимальні для різних типів іконок?

Замовте оцінку вашого проєкту — отримайте консультацію з пакування атласів та стилю. Ми надаємо гарантію на всі роботи та сертифікати про проходження курсів Unity.