Компонент Screen и Element: UI в сцене

PlayCanvas предоставляет мощный набор инструментов для создания и управления пользовательскими интерфейсами (UI). Одним из ключевых компонентов, отвечающих за отображение и управление элементами интерфейса в 3D-сценах, является компонент screen. Он используется для создания интерфейса, который может быть наложен на 3D-сцену и взаимодействовать с ней. Для работы с элементами UI используются объекты element, которые позволяют контролировать визуальные компоненты интерфейса. Понимание работы этих элементов и их взаимодействие с 3D-объектами является важной частью разработки в PlayCanvas.

Компонент Screen

Компонент screen отвечает за отображение элементов интерфейса в 2D-пространстве, которое обычно накладывается на основное 3D-пространство. Он предоставляет контейнер для всех элементов UI и позволяет удобно управлять их расположением, размером и взаимодействием.

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

Основные параметры компонента Screen

  • Aspect Ratio (соотношение сторон): Компонент screen позволяет задавать соотношение сторон, которое будет использоваться для масштабирования элементов UI. Это важно для адаптации интерфейса под различные разрешения экранов.
  • Resolution (разрешение): Разрешение экрана определяет, с каким разрешением элементы UI будут отображаться. PlayCanvas использует систему адаптивного дизайна, чтобы интерфейс корректно отображался на устройствах с разными экранами.
  • Sort Order (порядок сортировки): Каждый объект с компонентом screen может быть отсортирован по порядку рендеринга. Это полезно, когда требуется отображать несколько слоев интерфейса или наложение.

Элементы интерфейса: Компонент Element

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

Основные типы элементов

  • Button (кнопка): Этот элемент используется для создания интерактивных кнопок, которые могут быть нажаты пользователем. Кнопки могут вызывать функции или изменять состояние игры.
  • Image (изображение): Элементы изображения позволяют отображать графику, такие как фоны, иконки или текстуры.
  • Text (текст): Элементы текста используются для отображения букв, цифр или других символов. Этот элемент имеет широкие возможности настройки шрифтов, размера и цвета.
  • Slider (ползунок): Ползунок позволяет пользователю изменять значения, например, для регулировки громкости или яркости.

Стилизация элементов UI

Компонент element имеет множество параметров, которые позволяют детально настраивать внешний вид элементов UI. Ключевые из них:

  • Anchor (якорь): Позиционирование элемента относительно контейнера (screen) или его родительского элемента. Якорь позволяет гибко располагать элементы при изменении разрешения экрана.
  • Pivot (опорная точка): Определяет точку, вокруг которой происходит трансформация элемента (например, его вращение или масштабирование).
  • Size (размер): Элемент может быть задан в пикселях или в процентах от размера контейнера.
  • Position (положение): Элемент можно перемещать по координатам x и y относительно его родительского контейнера.
  • Color (цвет): Элемент может быть окрашен в разные цвета, что важно для стилизации интерфейса.

Взаимодействие с пользователем

Компоненты screen и element PlayCanvas поддерживают взаимодействие с пользователем через события. С помощью таких событий можно отслеживать клики, движения мыши, касания на сенсорных устройствах и другие действия.

События и обработчики

  • onClick: Событие, которое срабатывает, когда элемент UI был кликнут.
  • onHover: Событие срабатывает, когда пользователь наводит курсор на элемент.
  • onTouch: Для мобильных устройств, где элемент реагирует на касания.

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

Пример использования компонента Screen и Element

Для лучшего понимания работы с компонентами screen и element, рассмотрим пример создания простого интерфейса с кнопкой:

var screen = new pc.Entity();
screen.addComponent('screen', {
    resolution: new pc.Vec2(1920, 1080),
    aspectRatio: 1.77,
});

var button = new pc.Entity();
button.addComponent('element', {
    type: 'button',
    width: 200,
    height: 50,
    anchor: new pc.Vec4(0.5, 0.5, 0.5, 0.5),
    pivot: new pc.Vec2(0.5, 0.5),
    color: new pc.Color(0, 0, 1),
    text: 'Click me',
});

button.setLocalPosition(0, 0, 0);
screen.addChild(button);

button.element.on('click', function () {
    console.log('Button clicked!');
});

app.root.addChild(screen);

В этом примере создается экран с разрешением 1920x1080, на который добавляется кнопка. При нажатии на кнопку в консоль выводится сообщение. Использование компонента element для создания кнопки и настройки ее параметров, таких как размер, цвет и текст, демонстрирует базовые принципы работы с UI в PlayCanvas.

Важные моменты

  • Масштабируемость: UI-компоненты в PlayCanvas автоматически масштабируются в зависимости от разрешения экрана, что позволяет создавать интерфейсы, адаптирующиеся под разные устройства.
  • Рендеринг: Элементы UI рендерятся в 2D-пространстве поверх 3D-сцены. Это позволяет создавать сложные интерфейсы, которые могут взаимодействовать с элементами сцены.
  • Производительность: Как и с любыми графическими объектами, важно следить за производительностью. Если в интерфейсе много элементов или сложных анимаций, это может повлиять на производительность, особенно на мобильных устройствах.

Работа с компонентами screen и element является основой создания интерактивных пользовательских интерфейсов в PlayCanvas, и их правильное использование открывает возможности для создания высококачественных приложений с динамичными UI.

Оглавление