Создание иконок и 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 density. Для 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 — всегда учитываем.
Иконки предметов (Item Icons). Одинаковый фрейм + уникальный предмет. Система: фрейм по редкости (серый — обычный, синий — редкий, золотой — легендарный) + иконка предмета на нём. Фреймы — один атлас, иконки предметов — отдельный (добавляются по мере выхода контент-патчей без переработки атласа фреймов).
Кнопки. Normal, Pressed (scale 0.95 + tint), Disabled (opacity 50%). В Unity Button: ColorTintTransition или AnimationTransition с анимацией через Animator. Для критичных кнопок (купить за реальные деньги) — Highlighted состояние с glow эффектом.
Иконка приложения (App Icon). Отдельная задача. 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 недели. Стоимость рассчитывается индивидуально.