Основы пользовательского интерфейса

Пользовательские интерфейсы в PlayCanvas строятся из двух элементов. Компонент экрана описывает область, содержащую все элементы пользовательского интерфейса, а затем к нескольким объектам с компонентами элементов присоединяются ниже объекта Screen Entity в иерархии. Экран определяет область пользовательского интерфейса и способ его отображения (в 2D-пространстве или в 3D-мире). Элементы составляют изображения и текстовые компоненты интерфейса.

Размещение и позиционирование

Одно большое отличие между обычными объектами Entity и объектами Entity, использующими компонент Element в качестве части экрана, заключается в способе их позиционирования относительно их родителей. Компоненты элементов имеют два свойства, которые изменяют способ расчета их окончательного положения. Свойство anchor определяет, как дочерний элемент позиционируется относительно своего родителя, а свойство pivot определяет, где находится центральная точка элемента. Узнайте больше на странице Element.

Порядок отрисовки

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

Чтобы изменить порядок отрисовки, просто измените порядок объектов в иерархии редактора. Вы можете изменить порядок элементов программно, вызвав entity.reparent(...). Однако обратите внимание, что это заставляет порядок отрисовки пересчитываться для всего компонента экрана.

9-срезка элементов

9-срезка (или 9-патч) - это графическая техника создания масштабируемых элементов пользовательского интерфейса из растровой графики. Вы можете настроить 9-срезку с использованием атласа текстур и спрайтовых ассетов. Узнайте больше.

Ввод

Существует дополнительный способ обработки ввода для элементов пользовательского интерфейса. Экземпляр pc.ElementInput предоставляется в объекте приложения, обычно доступном как this.app.elementInput. Это позволяет вам прослушивать ввод непосредственно на компонентах элементов, например, this.entity.element.on('click', ...). Узнайте больше на странице Input.

Локализация

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