Створення іконок та UI-елементів для мобільної гри
Іконки та UI-елементи мобільної гри — це не веб-іконки та не корпоративний UI. Ігровий інтерфейс повинен працювати на екранах від 4.7" до 6.7", читатися під час активного геймплею (поки гравець стежить за дією, а не за інтерфейсом) і передавати стиль гри без тексту.
Технічні вимоги для ігрового UI
Розміри та щільність. Мінімальний tap target за Apple HIG — 44×44pt. Для ігрових кнопок в екшн-грі — краще 60×60pt та більше, гравець жме не дивлячись. Дрібні іконки в інвентарі — від 64×64px до 128×128px залежно від кількості на екрані.
9-slice (9-patch). Кнопки та рамки не просто розтягуються — вони масштабуються через 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 (Heads-Up Display). Смуга здоров'я, мана, досвід, очки, таймер — постійно на екрані під час геймплею. Повинні бути мінімально інвазивні: займати краї екрану, не перекривати ігрову область. Safe Area на iPhone з notch — завжди враховуємо.
Іконки предметів. Однакова рамка + унікальний предмет. Система: рамка за редкістю (сірий — звичайний, синій — рідкісний, золотий — легендарний) + іконка предмета на ній. Рамки — один атлас, іконки предметів — окремий (додаються при виході контент-патчів без переробки атласу рамок).
Кнопки. Normal, Pressed (scale 0.95 + tint), Disabled (opacity 50%). У Unity Button: ColorTintTransition або AnimationTransition з анімацією через Animator. Для критичних кнопок (купити за реальні гроші) — стан Highlighted з glow ефектом.
Іконка програми. Окрема задача. iOS вимагає набір: 1024×1024 (App Store), плюс автоматично генеровані розміри через Xcode AppIcon asset. Android: mipmap-xxxhdpi (192×192), xxxhdpi, xxhdpi, xhdpi, hdpi, mdpi. Адаптивна іконка Android 8.0+: foreground layer + background layer, foreground має мати 33% паддинг від краї — системна оболонка може обрізати по різних формах (коло, скруглений квадрат).
З практики: RPG-колекціонер, Unity. Іконки предметів робилися окремими PNG без атласу — 200 іконок × 2 draw call кожна = 400 додаткових draw calls на екрані інвентаря. FPS в інвентарі падав до 40. Після упакування в 2 атласи 2048×2048 — draw calls інвентаря стали 8, FPS — 60.
Анімовані UI-елементи
Particle effects у UI. Canvas Particle System у Unity — система частинок, що працює в Canvas space. Для збирання монет, ефектів level up, нагород. Sort Layer має бути вище ігрових об'єктів але нижче головного HUD.
Tween анімації. 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 робочих днів. Повний UI-kit для гри (HUD, інвентар, меню, магазин, іконки предметів) — 1–3 тижні. Вартість розраховується індивідуально.