Создание иконок и 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 рублей в зависимости от сложности.

Анимированные 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.

Какие форматы экспорта оптимальны для разных типов иконок?

Закажите оценку вашего проекта — получите консультацию по упаковке атласов и стилю.