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 для PC. Всё 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-состояние часто забывают при отрисовке под мобилку и вспоминают только при портировании на console.

Кейс: редизайн инвентаря с 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 прямо сейчас.