Типы Element: image, text, group

PlayCanvas предоставляет разработчикам гибкость в работе с различными типами элементов, которые могут быть использованы для создания пользовательских интерфейсов (UI) или взаимодействий в 3D-сценах. Среди этих элементов важными являются: image, text и group. Каждый из этих типов элементов имеет свои особенности и применяется в различных ситуациях в зависимости от требований проекта.

Элемент image

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

Основные свойства:
  • asset: текстура или изображение, которое будет отображаться на элементе. С помощью этого свойства можно привязать изображение из ассетов PlayCanvas.
  • width и height: размеры изображения на экране. Эти параметры могут быть заданы в пикселях, либо через относительные величины (например, проценты).
  • opacity: прозрачность изображения. Значение варьируется от 0 (полностью прозрачное) до 1 (полностью непрозрачное).
  • uvRect: используется для настройки области текстуры, которая будет отображаться. Это особенно полезно, если текстура на изображении используется не полностью, а только её часть.
Применение:
  • Изображения в интерфейсах. Простой и быстрый способ отображения иконок, фонов или графических элементов на экране.
  • Текстуры для 3D-объектов. С помощью текстур можно улучшать внешний вид объектов в сцены, добавляя детали поверхности.
  • Динамические изображения. Изображение может быть обновлено в реальном времени, например, при загрузке новых данных или переключении состояния интерфейса.

Элемент text

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

Основные свойства:
  • text: строка текста, который будет отображаться на экране.
  • font: шрифт, который используется для отображения текста. PlayCanvas позволяет использовать как стандартные шрифты, так и кастомные, добавленные в ассеты.
  • fontSize: размер шрифта в пикселях. Это свойство влияет на визуальную читаемость текста.
  • color: цвет текста. Цвет задается в формате rgba (например, rgba(255, 0, 0, 1) — красный).
  • lineHeight: высота строки текста, позволяющая настроить интерлинияж.
  • maxWidth: максимальная ширина блока, в пределах которой будет отображаться текст. Если текст превышает эту ширину, он будет автоматически обрезан или перенесен на следующую строку.
  • textAlign: выравнивание текста (влево, вправо, по центру).
Применение:
  • Вывод статической и динамической информации в интерфейсе: заголовков, описаний, подсказок.
  • Кнопки, где текст используется в качестве метки действия.
  • Сложные текстовые блоки, где необходимо форматировать текст (например, создание диалоговых окон или сообщений).

Элемент group

Тип элемента group используется для объединения нескольких других элементов в одном контейнере. Это особенно полезно, когда требуется организовать группу UI-элементов, чтобы манипулировать ими как с единой сущностью.

Основные свойства:
  • children: массив элементов, которые являются потомками группы. Эти элементы могут быть любых типов, включая image, text, другие group и т. д. С помощью этого свойства можно создать структуру иерархии UI-элементов.
  • position: положение всей группы на экране. Элементы внутри группы будут перемещаться и изменяться относительно координат группы.
  • rotation: поворот всей группы относительно своей оси. Это может быть полезно, например, для поворота панели с элементами интерфейса.
  • scale: масштаб всей группы. Позволяет изменять размер группы элементов целиком.
Применение:
  • Композиция UI: когда нужно собрать несколько элементов в единую группу, чтобы с ними можно было работать как с одной сущностью (например, панель с кнопками и текстом).
  • Анимации и трансформации: при применении анимаций или изменений положения, поворота или масштаба группе, все её элементы изменяются одновременно.
  • Контейнеры для сложных интерфейсов: например, создание выпадающих меню или панелей инструментов, где каждый элемент внутри группы может быть отдельным объектом, но управляется как единое целое.

Работа с элементами в PlayCanvas

Все три типа элементов — image, text и group — могут быть использованы вместе для создания сложных пользовательских интерфейсов. В PlayCanvas для работы с этими элементами используются различные методы и события, которые позволяют взаимодействовать с элементами в реальном времени.

  • Управление видимостью: через свойство enabled можно скрывать или показывать элементы, что полезно при динамическом изменении интерфейса.
  • Обработчики событий: для каждого элемента можно настроить обработку событий, таких как click, touchstart, mouseenter и другие. Это позволяет создавать интерактивные интерфейсы, где пользователи могут взаимодействовать с элементами.
  • Анимации: элементы могут анимироваться с использованием встроенных средств PlayCanvas или через JavaScript, чтобы создавать плавные переходы или изменения состояний.

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

  1. Простой UI с изображением и текстом:
var imageElement = new pc.Element(canvas, {
    type: pc.ELEMENTTYPE_IMAGE,
    asset: imageAsset,
    width: 200,
    height: 100
});

var textElement = new pc.Element(canvas, {
    type: pc.ELEMENTTYPE_TEXT,
    text: "Привет, мир!",
    fontSize: 24,
    color: new pc.Color(1, 1, 1)
});

var groupElement = new pc.Element(canvas, {
    type: pc.ELEMENTTYPE_GROUP,
    children: [imageElement, textElement],
    position: new pc.Vec2(100, 100)
});
  1. Группа элементов с кнопкой и текстом:
var button = new pc.Element(canvas, {
    type: pc.ELEMENTTYPE_TEXT,
    text: "Нажми меня",
    fontSize: 30,
    color: new pc.Color(0, 0, 0)
});

var group = new pc.Element(canvas, {
    type: pc.ELEMENTTYPE_GROUP,
    children: [button],
    position: new pc.Vec2(400, 300)
});

button.on('click', function () {
    console.log('Кнопка нажата');
});

Заключение

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

Оглавление