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

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

Принципы масштабирования интерфейса

При проектировании интерфейса для различных устройств важно учитывать, что экран может иметь разные размеры и плотности пикселей. Чтобы интерфейс был корректно отображён, его элементы должны адаптироваться к изменениям этих параметров. Основной принцип, который используется для решения этой задачи — масштабирование. В PlayCanvas существует несколько способов, как сделать интерфейс адаптивным.

Координатная система и Canvas

PlayCanvas использует координатную систему, основанную на пикселях экрана. Все элементы UI, такие как кнопки, текстовые поля и другие компоненты, привязаны к этой системе. Когда экран меняет разрешение, требуется правильно изменять размеры элементов, чтобы они оставались в пределах видимой области.

Площадь экрана в PlayCanvas представлена объектом Canvas, который действует как контейнер для всех UI-элементов. Canvas имеет возможность динамически изменять размеры в зависимости от разрешения экрана. Для того чтобы элементы UI адекватно изменялись в зависимости от разрешения, можно использовать различные подходы:

  • Масштабирование UI относительно разрешения экрана
  • Использование фиксированных размеров для элементов
  • Использование пропорциональных размеров для элементов

Масштабирование с использованием соотношения сторон

Одним из наиболее распространённых подходов является использование соотношения сторон экрана для масштабирования интерфейса. В PlayCanvas это можно настроить с помощью параметра screenMode объекта Canvas. Определяя этот параметр, можно настроить, как будет изменяться размер интерфейса в зависимости от разрешения экрана.

  1. fullscreen — Интерфейс будет растягиваться на весь экран.
  2. fixed — Размер интерфейса остаётся фиксированным, и элементы не масштабируются.
  3. letterbox — Интерфейс масштабируется, но оставляет полосы по бокам, если соотношение сторон устройства не совпадает с заданным.
  4. fill — Интерфейс масштабируется с сохранением пропорций, заполняя экран.

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

Пропорциональные размеры UI-элементов

Для того чтобы элементы интерфейса адекватно отображались на разных экранах, можно использовать пропорциональные размеры. Например, можно задать размер элементов в виде процента от ширины и высоты экрана.

Для этого в PlayCanvas используются два ключевых метода:

  • Использование размерных коэффициентов: Установка ширины и высоты элементов как процент от ширины и высоты экрана.
  • Ориентация в пространстве: Позиционирование элементов по осям X и Y можно делать с использованием процентных значений.

Пример кода для позиционирования кнопки с пропорциональными размерами:

var button = new pc.ElementEntity();
button.element.width = 0.2 * screen.width;  // 20% от ширины экрана
button.element.height = 0.1 * screen.height;  // 10% от высоты экрана
button.setLocalPosition(0.5 * screen.width, 0.5 * screen.height, 0);  // Центр экрана

Использование адаптивных шрифтов

Шрифты также должны изменяться в зависимости от разрешения экрана, чтобы текст был читаемым на всех устройствах. В PlayCanvas можно адаптировать размер шрифта с помощью процентных значений или коэффициентов, чтобы он соответствовал пропорциям экрана.

var label = new pc.ElementEntity();
label.element.fontSize = 0.05 * screen.height;  // 5% от высоты экрана

Это позволяет сохранить читабельность текста на экранах с различными разрешениями.

Работа с плотностью пикселей

Плотность пикселей (DPI) — важный фактор, который влияет на отображение элементов интерфейса на экране. Экраны с высокой плотностью пикселей (например, Retina-дисплеи) требуют специальной настройки для предотвращения размытости элементов.

В PlayCanvas можно использовать параметр devicePixelRatio для учета плотности пикселей. Этот параметр позволяет подгонять размеры интерфейса в зависимости от разрешения экрана, чтобы элементы выглядели чётко и не растягивались.

var scaleFactor = window.devicePixelRatio;  // Плотность пикселей
canvas.scale = new pc.Vec2(scaleFactor, scaleFactor);

Программная настройка интерфейса в зависимости от разрешения

Чтобы интерфейс динамически подстраивался под изменение разрешения, можно использовать события изменения размера экрана. В PlayCanvas можно отслеживать изменение разрешения с помощью событий resize и обновлять параметры UI-элементов в ответ на эти изменения.

app.graphicsDevice.on('resize', function (width, height) {
    var scale = Math.min(width / 1920, height / 1080);
    canvas.scale = new pc.Vec2(scale, scale);  // Масштабирование относительно разрешения 1920x1080
});

Этот подход позволяет интерфейсу изменяться пропорционально экрану, обеспечивая комфортную работу на устройствах с различными характеристиками.

Резюме

Корректное масштабирование UI в PlayCanvas — это важный аспект разработки приложений и игр, которые должны хорошо работать на устройствах с различными разрешениями экрана. Для достижения необходимой гибкости необходимо учитывать несколько факторов, таких как соотношение сторон, плотность пикселей и использование пропорциональных размеров для элементов интерфейса. При этом важно помнить, что необходимо тщательно тестировать интерфейс на разных разрешениях, чтобы гарантировать его удобство и визуальную гармонию.

Оглавление