UI-кит для игры: как выбрать и настроить под разные экраны

Интерфейс — первое, что видит игрок, и первое, что выдаёт «программистскую» графику. Готовый UI-кит для игры закрывает эту проблему за вечер, но только если он подходит по жанру, нормально тянется под разные экраны и не ломается на русском тексте.

Разберём, из чего состоит хороший кит, как выбрать его под свою игру и как настроить, чтобы кнопки не расплывались на 4K и не обрезались на телефоне.

Из чего состоит UI-кит

Минимальный набор, без которого кит придётся постоянно дорисовывать:

• Кнопки в нескольких состояниях: обычное, наведение, нажатие, неактивное. Если есть только одно состояние, интерфейс будет ощущаться «мёртвым».
• Панели и окна — фоны для меню, диалогов, инвентаря, настроек.
• Рамки и разделители — чтобы группировать элементы внутри окна.
• Полосы — здоровье, мана, опыт, загрузка. Хорошо, когда фон полосы и заливка идут отдельными картинками.
• Элементы настроек — ползунки, переключатели, флажки, выпадающие списки.
• Слоты — ячейки инвентаря, панель умений, рамки для иконок предметов.
• Иконки — хотя бы базовые: настройки, звук, пауза, закрыть, назад, монеты.
• Курсор и подсказки — для ПК-игр с мышью.

Дополнительно в хороших китах встречаются табы, всплывающие уведомления, рамки диалогов с портретом, экраны победы и поражения.

Как выбрать кит под жанр

Стиль интерфейса должен совпадать со стилем игры. Короткая шпаргалка:

Жанр	Что обычно нужно
Пиксельный платформер	Пиксельные рамки и кнопки того же размера пикселя, что и графика уровня; минимум окон
RPG и рогалики	Много окон: инвентарь, характеристики, диалоги, магазин, слоты экипировки
Мобильная казуалка	Крупные кнопки под палец, яркие цвета, всплывающие награды, экраны уровней
Стратегия и симулятор	Компактные панели, таблицы, много мелких иконок, читаемость на высоком разрешении
Хоррор и атмосферные игры	Сдержанный, почти невидимый интерфейс, акцент на шрифте

Если кит сделан в пиксель-арте, проверьте, что размер его пикселя совпадает с вашим. Кнопка с пикселями вдвое крупнее, чем у персонажа, сразу бросается в глаза. Про согласование пиксельной графики подробнее в гайде «Пиксельные тайлсеты».

Что проверить перед покупкой

Текст не впечатан в картинки. Кнопка с надписью Play или Settings прямо в PNG бесполезна для русской версии. Нужны чистые кнопки, а текст — отдельным шрифтом поверх.

Шрифт в комплекте поддерживает кириллицу. Многие киты идут со шрифтом, в котором есть только латиница. Тогда русский текст превратится в квадратики, и шрифт придётся подбирать отдельно. Как это проверить и что с лицензиями шрифтов — в статье «Шрифты для игр».

Есть исходники. PSD, Figma, Aseprite или SVG позволяют перекрасить кит под свою палитру и дорисовать недостающие элементы. Без исходников вы привязаны к тому, что нарисовал автор.

Элементы готовы к растягиванию. Окна и кнопки должны быть нарисованы так, чтобы их можно было резать по 9-slice (об этом ниже). Если окно — одна картинка фиксированного размера, под длинный текст его не растянуть.

Разрешение исходников. Для гладкого (не пиксельного) интерфейса картинки должны быть нарисованы с запасом под большой экран. Если кит сделан под 720p, на 4K он будет мыльным.

9-slice: как растягивать окна без искажений

Окно 200×100 и окно 600×400 должны выглядеть одинаково аккуратно. Для этого используется 9-slice (его также называют 9-patch): картинку делят на девять частей.

• Четыре угла не растягиваются никогда.
• Верхняя и нижняя стороны тянутся только по горизонтали, левая и правая — только по вертикали.
• Центр тянется в обе стороны (или повторяется плиткой).

В итоге рамка любой ширины сохраняет толщину и аккуратные углы.

В Unity. У спрайта откройте Sprite Editor и задайте границы (Border) — зелёные линии, отделяющие углы. Затем у компонента Image поставьте тип Sliced. Для узорного центра подойдёт тип Tiled.

В Godot. Для этого есть узел NinePatchRect, где отступы задаются в инспекторе. Для кнопок и панелей удобнее StyleBoxTexture в теме — там такие же поля отступов.

Важно, чтобы автор кита нарисовал элементы с ровными сторонами: если на верхней грани окна есть уникальный узор, он растянется вместе со стороной. Хорошие киты отдельно указывают, что элементы подготовлены под 9-slice.

Масштабирование под разные экраны

Игру будут запускать на мониторах 1080p и 4K, на ноутбуках, на телефонах с вытянутым экраном. Интерфейс должен оставаться читаемым везде.

Задайте базовое разрешение. Рисуйте и верстайте интерфейс под одно опорное разрешение, например 1920×1080, а движок пусть масштабирует его под реальный экран.

• В Unity у Canvas есть компонент Canvas Scaler: режим Scale With Screen Size, опорное разрешение и ползунок Match, который решает, по ширине или по высоте подгонять интерфейс.
• В Godot это настройки проекта в разделе отображения окна: режим растяжения (stretch mode) и правило сохранения пропорций (aspect).

Привязывайте элементы к краям. Полоса здоровья должна быть прижата к углу, а не стоять на фиксированных координатах. В Unity для этого якоря (anchors) у RectTransform, в Godot — якоря и контейнеры у узлов Control.

Учитывайте разные пропорции. Экран 16:9 и телефон с соотношением около 20:9 — разные случаи. Проверьте интерфейс хотя бы на трёх пропорциях: 16:9, 4:3 (или 16:10) и вытянутом мобильном. На телефонах ещё есть вырезы под камеру — важные элементы не должны туда попадать.

Пиксельный интерфейс масштабируйте целыми числами. Пиксель-арт при увеличении в 2,5 раза получает неровные пиксели. Масштабируйте в 2, 3, 4 раза, а остаток экрана заполняйте фоном. В Godot 4 для этого есть целочисленный режим масштабирования в настройках растяжения, в Unity с этим помогает Pixel Perfect Camera.

Лицензия

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

Готовые наборы интерфейсов с оплатой в рублях собраны в разделе UI-киты.

Коротко

• В нормальном ките есть кнопки с состояниями, окна, полосы, элементы настроек, слоты и иконки.
• Стиль кита должен совпадать с жанром и размером пикселя игры.
• Проверяйте, что текст не впечатан в кнопки, а шрифт поддерживает кириллицу.
• Окна и кнопки растягивайте через 9-slice, а не масштабированием картинки.
• Верстайте под одно базовое разрешение, привязывайте элементы к краям и тестируйте на разных пропорциях.