2D UI-графіка для ігор: іконки, кнопки, HUD та атласи

В RPG погано намальована іконка меча руйнує занурення — гравець дивиться на неї сотні разів за сесію. Неякісний UI вбиває імерсію. Тому відмальовка 2D-елементів для ігор — інженерне завдання: вписатися в технічні обмеження рушія, формати, роздільну здатність і зберегти читабельність на будь-яких екранах.

Наша команда має 8+ років досвіду в ігровій UI-графіці, виконала понад 50 проєктів для мобільних, PC та консолей. Атласна упаковка скорочує draw calls у 10 разів порівняно з окремими текстурами — кожен атлас = один batch.

Чому важливо планувати атласи до відмальовки?

Спрайт-атлас (Sprite Atlas) — базовий інструмент упаковки UI-графіки в Unity. Усі іконки та елементи інтерфейсу упаковуються в один або кілька атласів, щоб мінімізувати кількість draw calls під час рендеру Canvas. Один атлас = один batch. Якщо іконки розкидані по окремих текстурах — кожна іконка на екрані = окремий draw call.

З цього випливає обмеження на розмір та кількість атласів: зазвичай 2048×2048 пікселів максимум для мобільних, 4096×4096 для ПК. Увесь UI одного екрана — в один атлас. Це означає, що дизайнер має заздалегідь знати: чи поміщаються всі іконки інвентарю в 2048×2048? При 64×64 пікселів на іконку — 1024 іконки. При 128×128 — 256. Планування атласів починається на етапі технічного завдання, а не після фінальної відмальовки.

Формати експорту: PNG без стиснення для вихідників, всередині Unity текстури конвертуються залежно від платформи. Згідно з документацією Unity, для Android використовуємо ETC2, для iOS — ASTC, для ПК — DXT5. Альфа-канал — окремий PNG або через RGBA в одному файлі, залежить від налаштувань проєкту. Прозорість через окремий маск-канал іноді дає кращу якість при стисненні.

Шари та overrides у Figma — стандарт підготовки UI-графіки. Кожен елемент — окремий компонент із варіантами станів (normal, hover, pressed, disabled). При підсумковому експорті всі варіанти нарізаються автоматично через Figma-плагіни на кшталт Spriter Pro або ручний експорт через Assets → Export.

Як досягти читабельності іконок на будь-якому фоні?

Іконку потрібно перевіряти не лише на нейтральному сірому фоні у Figma. У грі вона з'являється на фоні панелі інвентаря, на фоні динамічної сцени через напівпрозорий HUD, на темних і світлих варіантах теми, якщо гра підтримує кілька колірних схем. Іконка, яка чудово читається на темному фоні, може повністю загубитися на світлому.

Стандартний прийом — обводка (outline) з контрастним кольором. Для темних іконок — світла обводка 1–2 пікселі. Для світлих — темна. Але outline у uGUI через стандартний компонент Outline генерує додаткові копії mesh і погано працює з TextMeshPro. Для іконок правильніше випікати outline прямо в текстуру або використовувати SDF-підхід через ShaderGraph: іконка рендериться як SDF текстура, обводка додається через шейдерний параметр без зміни mesh.

Інший прийом — Drop Shadow під іконкою. М'яка тінь діаметром 4–6 пікселів відокремлює іконку від будь-якого фону. Це один із найнадійніших методів для UI з динамічним фоном (коли іконки HUD накладаються на ігрове оточення).

Відмальовка у Figma vs ігровий екран — різниця може сягати 30% втрати контрасту через пост-ефекти рушія. Наш досвід показує, що найкращий спосіб — тестувати на цільовій платформі з реальними налаштуваннями камери.

Що входить у відмальовку UI-елементів?

Іконки — найтрудомісткіший тип. RPG-ігри часто мають 200–500+ іконок предметів. Стандартний пайплайн: стиль-гайд на 10–20 референсних іконок → затвердження → серійна відмальовка за шаблоном. Кожна іконка при серійному виробництві займає 30–60 хвилин, унікальна «showcase»-іконка — 2–4 години.

Рамки та панелі — декоративні обрамлення для вікон, діалогів, інвентарю. Критично важлива підтримка 9-slice (NineSlicedSprite в Unity): рамка має коректно масштабуватися без розтягування кутових декоративних елементів. При відмальовці кути та краї рамки мають займати рівно стільки пікселів, скільки потрібно для правила 9-slice — це документується в передавальних матеріалах.

HUD-елементи — health bar, mana bar, таймери, маркери. Тут важлива читабельність при анімації: заповнюваний health bar має бути видимим навіть при швидкому русі. Тестуємо на реальному роздільній здатності цільової платформи, не на Figma-прев'ю.

Кнопки та елементи навігації — усі стани (normal/hover/pressed/disabled/focused для геймпада). Focused-стан часто забувають при відмальовці під мобілку і згадують лише при портуванні на консоль.

Кейс: редизайн інвентарю з 300 іконками

З нашої практики: на одному проєкті ми виконали редизайн системи предметів для action-RPG — зміна візуального стилю з реалістичного на стилізований. 312 іконок, дедлайн 6 тижнів. Рішення через шаблонізацію: розробили 8 базових силуетних форм (меч, щит, лук, зілля, броня, аксесуар, ресурс, квестовий предмет) та стиль-гайд із правилами накладання кольору, бликів і тіней. Кожна іконка будувалася на базі силуету з варіацією деталей. Це знизило середній час відмальовки з 45 до 25 хвилин при збереженні стилістичної єдності.

Взаємодія з програмістами та художниками

UI-графіка завжди робиться в тісному контакті з програмістом, який верстає інтерфейс. До початку відмальовки узгоджуємо: розміри атласів, правила іменування файлів (convention для автоматичної упаковки Sprite Atlas), чи потрібна підтримка кількох роздільних здатностей (x1/x2/x3), формат передачі вихідників.

Зміни в розмірах або формах елементів після початку верстки — дорогі правки. Тому фінальний специфікаційний документ (розміри в пікселях, правила 9-slice, кольорові коди) узгоджується до експорту, а не після.

Етапи роботи над UI-графікою

1. Аналіз вимог — визначаємо платформи, стиль, кількість елементів.
2. Створення стиль-гайду — 10–20 референсних іконок.
3. Відмальовка елементів за узгодженим пайплайном.
4. Перевірка в рушії — тест читабельності, 9-slice, анімацій.
5. Упаковка в атласи та передача програмісту.

Вартість розраховується індивідуально виходячи з кількості елементів, унікальності кожного та вимог до якості. Ми гарантуємо стилістичну єдність та читабельність на будь-яких екранах. Зв'яжіться з нами для оцінки вашого проєкту — ми підберемо оптимальний пайплайн під ваш бюджет і терміни. Отримайте консультацію щодо вашого UI прямо зараз.