Как адаптировать UI под разные разрешения экрана в Unity?

Адаптация UI под разные разрешения в Unity

Адаптация пользовательского интерфейса под различные разрешения экрана — критически важная задача для обеспечения кросс-платформенной совместимости. В Unity для этого используется система Canvas и Rect Transform вместе с несколькими ключевыми технологиями.

Основные подходы к адаптации UI

1. Настройка Canvas Scaler

Canvas Scaler — основной компонент для управления масштабированием UI. Существует три режима:

• Constant Pixel Size — UI элементы сохраняют одинаковый размер в пикселях независимо от разрешения

// Настройка через инспектор:
// Canvas Scaler -> UI Scale Mode: Constant Pixel Size
// Reference Resolution: 1920x1080 (опорное разрешение)
// Scale Factor: 1 (базовый масштаб)

• Scale With Screen Size — наиболее популярный режим для адаптивного UI

// Настройка:
// UI Scale Mode: Scale With Screen Size
// Reference Resolution: 1920x1080
// Screen Match Mode: Match Width or Height (обычно 0.5 для баланса)
// Reference Pixels Per Unit: 100

• Constant Physical Size — для приложений, где важны реальные физические размеры (AR/VR)

2. Использование якорей (Anchors) и точек привязки

Rect Transform позволяет настроить привязку UI элементов к краям или центру экрана:

// Программная настройка якорей
RectTransform rt = GetComponent<RectTransform>();
// Растянуть на весь экран
rt.anchorMin = new Vector2(0, 0);
rt.anchorMax = new Vector2(1, 1);
// Добавить отступы
rt.offsetMin = new Vector2(20, 20); // left, bottom
rt.offsetMax = new Vector2(-20, -20); // -right, -top

3. Реализация адаптивных макетов

Для сложных интерфейсов используйте:

• Layout Group компоненты (Horizontal/Vertical/Grid Layout)
• Content Size Fitter для динамического изменения размеров контейнеров
• Aspect Ratio Fitter для сохранения пропорций элементов

Практические стратегии

Для простых интерфейсов:

• Используйте Canvas Scaler в режиме Scale With Screen Size
• Настройте якоря для ключевых элементов
• Используйте относительные размеры (проценты) через привязки

Для сложных адаптивных интерфейсов:

1. Создайте несколько префабов UI для разных ориентаций экрана
2. Используйте медиа-запросы через собственные скрипты:

public class ResponsiveUI : MonoBehaviour
{
    public RectTransform panel;
    public float mobileWidth = 300f;
    public float desktopWidth = 600f;
    
    void Update()
    {
        if (Screen.width < 768) // Mobile
        {
            panel.sizeDelta = new Vector2(mobileWidth, panel.sizeDelta.y);
        }
        else // Desktop/Tablet
        {
            panel.sizeDelta = new Vector2(desktopWidth, panel.sizeDelta.y);
        }
    }
}

1. Реализуйте систему событий для перестроения UI при изменении разрешения:

public class UIResolutionHandler : MonoBehaviour
{
    private Vector2 lastResolution;
    
    void Start()
    {
        lastResolution = new Vector2(Screen.width, Screen.height);
        AdjustUI();
    }
    
    void Update()
    {
        Vector2 currentResolution = new Vector2(Screen.width, Screen.height);
        if (currentResolution != lastResolution)
        {
            lastResolution = currentResolution;
            AdjustUI();
        }
    }
    
    void AdjustUI()
    {
        // Перестраиваем UI элементы
        LayoutRebuilder.ForceRebuildLayoutImmediate(GetComponent<RectTransform>());
        
        // Можем отправлять события другим компонентам
        BroadcastMessage("OnResolutionChanged", SendMessageOptions.DontRequireReceiver);
    }
}

Рекомендации по работе с разными устройствами

1. Тестируйте на ключевых разрешениях:

   • 16:9 (1920x1080, 1280x720)
   • 18:9 (2160x1080)
   • 4:3 (1024x768)
   • 9:16 для вертикальной ориентации

2. Используйте Safe Area для устройств с "чёлками" (iPhone X+):

// В Unity 2019.3+ можно использовать Canvas.SafeArea
RectTransform rectTransform = GetComponent<RectTransform>();
Rect safeArea = Screen.safeArea;
rectTransform.anchorMin = safeArea.position / new Vector2(Screen.width, Screen.height);
rectTransform.anchorMax = (safeArea.position + safeArea.size) / new Vector2(Screen.width, Screen.height);

1. Оптимизируйте для производительности:
   • Минимизируйте использование Layout Rebuild
   • Кэшируйте ссылки на RectTransform
   • Используйте Canvas компоненты с умом (Pixel Perfect, Override Sorting)

Работа с текстом

Для текстовых элементов особенно важно:

• Использовать TextMeshPro вместо Legacy Text
• Настраивать Auto Size для динамического изменения шрифта
• Использовать Content Size Fitter для текстовых блоков

Заключение

Адаптация UI в Unity — многоуровневый процесс, требующий комбинации инструментов: правильной настройки Canvas Scaler, грамотного использования якорей, реализации адаптивных скриптов и тщательного тестирования на целевых устройствах. Ключевой принцип — проектировать UI с учетом самого маленького и самого большого целевого разрешения, обеспечивая корректное отображение на всех промежуточных вариантах. Современный подход также предполагает создание дизайн-системы с компонентами, которые могут перестраиваться в зависимости от доступного пространства.