Якоря и pivot: адаптивная верстка

Якоря и Pivot: Адаптивная верстка в PlayCanvas

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

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

Пример применения якоря

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

var element = new pc.Entity();
element.addComponent('element', {
    anchor: [0, 1, 0, 0] // Якорь в верхнем левом углу
});
this.app.root.addChild(element);

В данном примере:

  • Массив anchor определяет позицию якоря относительно экрана. Четыре значения в массиве — это координаты верхнего левого и нижнего правого углов:

    • Первые два значения: верхний левый угол, где 0 — это верхняя граница экрана, а 1 — это нижняя.
    • Вторые два значения: нижний правый угол, где 0 — это левая граница экрана, а 1 — правая.

Подобная настройка позволяет элементу оставаться на своем месте при изменении размеров экрана или изменении ориентации устройства.

Расширенное использование якорей

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

var menu = new pc.Entity();
menu.addComponent('element', {
    anchor: [0.5, 1, 0.5, 0],  // Центр по вертикали и горизонтали
    pivot: [0.5, 0.5]          // Ориентируем относительно центра
});
this.app.root.addChild(menu);

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

Pivot: точки опоры объектов

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

Как работает Pivot

По умолчанию pivot располагается в центре объекта (точка [0.5, 0.5]). Однако, в зависимости от нужд приложения, pivot можно перемещать, что позволит гибко управлять позиционированием объекта на экране. Например:

var button = new pc.Entity();
button.addComponent('element', {
    pivot: [0, 1]  // Пивот в верхнем левом углу
});
this.app.root.addChild(button);

При таком расположении pivot объект будет вращаться и масштабироваться относительно верхнего левого угла. Это полезно, например, при создании кнопок, панелей и других элементов интерфейса, которые должны двигаться или изменяться в зависимости от экрана.

Совмещение Pivot и Anchor

Один из мощных подходов в адаптивной верстке — использование как якорей, так и pivot для создания элементов интерфейса, которые могут менять свои размеры и позиции в зависимости от ориентации экрана.

var header = new pc.Entity();
header.addComponent('element', {
    anchor: [0, 1, 1, 0],  // Якорь по четырем углам
    pivot: [0.5, 0.5]      // Пивот в центре
});
this.app.root.addChild(header);

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

Практическое применение якорей и Pivot

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

Пример: Адаптивный экран загрузки

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

var loadingScreen = new pc.Entity();
loadingScreen.addComponent('element', {
    anchor: [0.5, 0.5, 0.5, 0.5],  // Центр экрана
    pivot: [0.5, 0.5],              // Центр объекта
    width: this.app.graphicsDevice.width,
    height: this.app.graphicsDevice.height
});
this.app.root.addChild(loadingScreen);

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

Сложности и рекомендации

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

  • Тестирование: Необходимо тщательно тестировать изменения ориентации экрана и масштабирования на разных устройствах, чтобы избежать ошибок с позиционированием объектов.
  • Производительность: Следует избегать чрезмерного использования динамически изменяемых якорей и pivot в сложных сценах, так как это может повлиять на производительность приложения, особенно на мобильных устройствах.

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

Оглавление