Отрисовка 2D-элементов UI графики игр
Иконки, кнопки, рамки, индикаторы здоровья, панели инвентаря — всё это UI-графика. Её качество либо погружает игрока в атмосферу, либо мешает. Плохо нарисованная иконка меча в RPG разрушает впечатление сильнее, чем средняя текстура на стене, потому что на иконки игрок смотрит сотни раз за сессию.
Отрисовка UI-элементов для игр отличается от веб-дизайна по нескольким принципиальным параметрам: требования к форматам и разрешениям другие, работа строго внутри технических ограничений движка, и финальный результат оценивается не в браузере, а на разных экранах с разными dpi.
Технические ограничения, которые определяют стиль
Спрайт-атлас (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 текстуры конвертируются в зависимости от платформы (ETC2 для Android, ASTC для iOS, DXT5 для PC). Альфа-канал — отдельный PNG или через RGBA в одном файле, зависит от настроек проекта. Прозрачность через отдельный маск-канал иногда даёт лучшее качество при сжатии.
Слои и overrides в Figma — стандарт подготовки UI-графики. Каждый элемент — отдельный компонент с вариантами состояний (normal, hover, pressed, disabled). При итоговом экспорте все варианты нарезаются автоматически через Figma-плагины типа Spriter Pro или ручной экспорт через Assets → Export.
Что входит в отрисовку 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 минут при сохранении стилистического единства.
Читаемость иконок на разных фонах
Иконку нужно проверять не только на нейтральном сером фоне в Figma. В игре она появляется на фоне инвентарной панели, на фоне динамичной сцены через полупрозрачный HUD, на тёмных и светлых вариантах темы если игра поддерживает несколько цветовых схем. Иконка, которая отлично читается на тёмном фоне, может полностью потеряться на светлом.
Стандартный приём — обводка (outline) с контрастным цветом. Для тёмных иконок — светлая обводка 1–2 пикселя. Для светлых — тёмная. Но outline в uGUI через стандартный Outline компонент генерирует дополнительные копии mesh и плохо работает с TextMeshPro. Для иконок правильнее выпекать outline прямо в текстуру или использовать SDF-подход через ShaderGraph: иконка рендерится как SDF текстура, обводка добавляется через шейдерный параметр без изменения mesh.
Другой приём — Drop Shadow под иконкой. Мягкая тень диаметром 4–6 пикселей отделяет иконку от любого фона. Это один из самых надёжных методов для UI с динамическим фоном (когда иконки HUD накладываются на игровое окружение).
Взаимодействие с программистами и художниками
UI-графика всегда делается в тесном контакте с программистом, который верстает интерфейс. До начала отрисовки согласовываем: размеры атласов, правила именования файлов (convention для Sprite Atlas автоматической упаковки), нужна ли поддержка нескольких разрешений (x1/x2/x3), формат передачи исходников.
Изменения в размерах или формах элементов после начала вёрстки — дорогостоящие правки. Поэтому финальный спецификационный документ (размеры в пикселях, правила 9-slice, цветовые коды) согласовывается до экспорта, а не после.
| Объём работы | Сроки |
|---|---|
| 20–50 иконок (серийная отрисовка по стилю) | 1–2 недели |
| Полный UI-кит: кнопки, рамки, иконки (до 100 элементов) | 3–5 недель |
| 200–400 иконок предметов | 6–12 недель |
| Редизайн существующего UI с новым стилем | 4–8 недель |
Стоимость рассчитывается индивидуально исходя из количества элементов, уникальности каждого и требований к качеству.