Услуги по UX/UI дизайну для игр

UX/UI для игр

Открываете чужой Unity-проект — и видите: один Canvas на всю игру, сотня вложенных панелей, Layout Groups внутри Layout Groups, и профайлер показывает 4 ms только на пересчёт UI в каждом кадре. Это не редкость. UI в играх часто дописывается по мере необходимости, без архитектуры, и к концу проекта превращается в источник постоянных багов и просадок производительности.

Мы проектируем и реализуем игровой UI: от вайрфреймов до готовых компонентов в движке, с прицелом на производительность и поддерживаемость.

Прототипирование и проектирование

Любой UI начинается с понимания информационных потоков: что игрок должен видеть в каждый момент, какие действия доступны, как переходить между экранами. Без этого разработка превращается в серию итераций «сделали — не то — переделали».

Инструмент для прототипирования — Figma. Причина выбора не в моде, а в конкретных возможностях:

• Компонентная система с вариантами — позволяет сразу проверить, как кнопка выглядит в состояниях Normal/Hover/Pressed/Disabled
• Auto Layout — честная симуляция поведения UI при разных размерах текста (критично для мультиязычных игр)
• Прототипы с переходами — можно протестировать навигационный флоу до строчки кода

На этапе прототипа выявляется большинство UX-проблем: неочевидные переходы, перегруженные экраны, неверная иерархия информации. Исправить это в Figma — 15 минут. Исправить в готовом Unity-проекте — полдня.

uGUI против UI Toolkit

В Unity сейчас два фреймворка для UI, и выбор между ними не очевиден.

uGUI (Canvas-based) — зрелая система, существует с Unity 4.6. Работает с RectTransform, имеет богатую экосистему готовых компонентов и ассетов. Практически весь существующий игровой UI на Unity написан на uGUI.

UI Toolkit — новая система на основе XML (UXML) и CSS-подобных стилей (USS). Изначально создавалась для редакторных инструментов (Editor Extensions), с Unity 2021 официально поддерживается для рантайм UI. Архитектурно ближе к веб-разработке.

Когда выбирать UI Toolkit:

• Новый проект, команда готова к обучению
• Нужна сложная система тем и скинов
• Активно разрабатываются кастомные редакторные инструменты

Когда оставаться на uGUI:

• Идёт поддержка существующего проекта
• Нужна максимальная совместимость с ассетами Asset Store
• Команда уже знает uGUI, сроки сжатые

Глубже: производительность Canvas и draw calls

Это та область, где игровой UI кардинально отличается от UI в обычных приложениях. В игре UI обновляется каждый кадр, и неэффективная реализация может съедать 3–5 ms из бюджета кадра.

Как работает батчинг в Canvas

Unity объединяет элементы одного Canvas в единый draw call, если они используют одинаковый материал и текстурный атлас. Нарушение батча означает дополнительный draw call, что напрямую бьёт по производительности.

Что ломает батч:

• Разные текстуры у соседних элементов (решение: спрайтовый атлас через Sprite Atlas)
• Mask компонент создаёт стенсил и разрывает батч (альтернатива: RectMask2D — работает дешевле)
• Canvas с разными Render Mode — батчинг работает только внутри одного Canvas
• Любой Graphic Raycaster добавляет overhead — ставьте только на интерактивные Canvas

Разделение Canvas по типам контента

Главная рекомендация по архитектуре Canvas: разделяйте статичный и динамичный контент.

Когда хоть один элемент в Canvas изменяется, Unity перестраивает геометрию всего Canvas. Если на одном Canvas живут и статичная рамка HUD, и анимированная шкала здоровья — каждую секунду Canvas перестраивается полностью.

Правильная структура:

Canvas (Screen Space - Overlay)
├── Canvas_Static     — фоны, рамки, иконки без анимации
├── Canvas_Dynamic    — HP-бары, таймеры, счётчик ресурсов
└── Canvas_Popup      — модальные окна, уведомления

Каждый дочерний Canvas изолирует ребилд от родительского. Изменение в Canvas_Dynamic не трогает Canvas_Static.

TextMeshPro и текстовые батчи

TextMeshPro (TMP) — стандарт для текста в Unity. В отличие от старого Text, использует SDF-рендеринг: текст остаётся чётким при любом масштабе. Но у TMP есть нюанс с батчингом: каждый уникальный шрифтовый атлас — отдельный материал, то есть отдельный draw call.

Если в игре используется три варианта шрифта (основной, заголовочный, цифровой) плюс версии для каждого языка — батчинг текста разваливается. Решение: TMP Font Asset Creator с объединением глифов нужных языков в один атлас. Для кириллицы + латиницы + цифр обычно хватает одного атласа 2048×2048.

Адаптивный UI для разных соотношений сторон

Мобильные платформы добавляют задачу, которой нет на PC: UI должен корректно работать на 16:9, 18:9, 19.5:9, 4:3 и iPad-соотношениях одновременно.

Инструменты:

• Canvas Scaler с режимом Scale With Screen Size — базовая настройка. Reference Resolution 1080×1920 для мобильных, Match параметр 0.5 (баланс между шириной и высотой)
• Anchor Presets — каждый элемент должен быть привязан к правильному краю или центру. Элемент в углу экрана — к углу, элемент в центре — к центру
• Safe Area — на устройствах с вырезом и скруглёнными углами кнопки не должны попадать в недоступную зону. Решение: Screen.safeArea в коде, корректирует RectTransform корневого элемента

Проверка делается не только в редакторе Game View — нужно физическое тестирование на устройствах или Device Simulator (встроен в Unity).

Локализация UI

Это не отдельная задача, а требование к архитектуре с первого дня. Типичная проблема: UI спроектирован под русский текст, который занимает N символов. Немецкий перевод в полтора раза длиннее. Кнопки ломаются, текст вылезает за границы.

Что делаем на этапе проектирования:

• Все текстовые поля с Auto Size в TMP или явно заданными минимальным/максимальным размером
• Кнопки с Horizontal Layout Group + Content Size Fitter вместо фиксированной ширины
• Иконки и декоративные элементы не вставлять в строку с текстом через конкатенацию

Для реализации локализации используем Unity Localization Package (официальный) или I2 Localization (ассет, более гибкий для сложных случаев).

Что входит в услугу

• Проектирование навигационной структуры и флоу экранов
• Прототипирование в Figma с передачей макетов в разработку
• Реализация UI-компонентов в Unity (uGUI или UI Toolkit)
• Аудит существующего UI по производительности: анализ draw calls, Canvas rebatch, лишних Raycaster
• Настройка системы локализации и проверка на длинных переводах
• Адаптация под мобильные соотношения сторон и Safe Area