Пользовательский интерфейс - Кнопки

Простые кнопки с использованием компонентов Element и Button. Смотрите полную сцену.

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

В этой сцене мы создали 2D Screen, который выглядит так в иерархии:

Hierarchy

Настройка экрана

Наш экран настроен следующим образом:

Screen

Поскольку это 2D-экран, мы отметили Screen Space. Наша опорная разрешение - это разрешение, которое мы нацеливаем - в данном случае это 1080 x 1920. Мы выбираем Blend для режима масштабирования, чтобы наш экран адаптировался к изменениям разрешения, и устанавливаем Scale Blend на 1, чтобы экран адаптировался только к изменениям высоты.

У нашего экрана есть разные дочерние элементы, такие как элемент изображения для отображаемого логотипа, текстовый элемент для отображения текста "SELECT QUALITY" и 3 кнопки.

Добавление кнопки в пользовательский интерфейс

Есть два способа добавить кнопку на сцену.

Через панель иерархии

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

С существующим элементом

Если есть существующий элемент, который мы хотели бы превратить в кнопку, мы можем добавить компонент Button к нему в панели Inspector и настроить его самостоятельно.

Не забудьте включить Use Input на компоненте Element, чтобы пользователь мог взаимодействовать с ним:

И установите свойство Image Entity на компоненте Button таким же, как и Entity, на котором находится компонент Element.

Настройка кнопки

Давайте подробнее рассмотрим первую кнопку в примере проекта:

Кнопка имеет 3 компонента:

Компонент Element - Позиционирует отображение пользовательского интерфейса кнопки относительно его родительского экрана.
Компонент Button - Обрабатывает, как выглядит кнопка, когда пользователь взаимодействует с ней.
Компонент Script - Слушает события на компоненте Button и обрабатывает логику того, что делать при нажатии.

Сущность кнопки также имеет дочерний элемент Text для отображения текста (это необязательно, в зависимости от стиля вашей кнопки).

Тип элемента - изображение, и он закреплен в нижней части экрана.

После закрепления кнопки мы задаем ей смещение от нижней части, просто перемещая ее вверх.

Мы также включили Use Input, чтобы взаимодействовать с кнопкой.

Изменение внешнего вида кнопки при взаимодействии

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

Hover - Когда курсор мыши находится над кнопкой.
Pressed - Когда пользователь нажимает на кнопку.
Inactive - Когда кнопка неактивна.

Это можно сделать с помощью двух режимов перехода:

Тонирование цвета

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

Следующий эффект:

Изменение спрайта

Мы также можем изменить изображение спрайта кнопки в разных состояниях для случаев, когда вы хотите изменить форму кнопки или хотите создать вид кнопки, которая "нажимается" на экран. Кнопка Low Quality имеет следующую конфигурацию:

Следующий эффект:

События кнопок

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

var ButtonLogic = pc.createScript('buttonLogic');
ButtonLogic.attributes.add('textEntity', {
    type: 'entity',
    description: 'Сущность, которую мы хотим обновить при нажатии кнопки'
});
ButtonLogic.attributes.add('description', {type: 'string'});

// инициализация кода, вызываемая один раз для каждой сущности
ButtonLogic.prototype.initialize = function() {
    this.entity.button.on('click', function(event) {
        this.textEntity.element.text = this.description;
    }, this);
};

Этот скрипт прикреплен к объектам кнопок в сцене.

Компонент Button имеет событие click, на которое можно зарегистрировать функцию обратного вызова, работающую как для ввода мыши, так и для касания.

this.entity.button.on('click', function(event) {
    this.textEntity.element.text = this.description;
}, this);

Issue Tracker

Если вы нашли ошибку или у вас есть предложение по улучшению, пожалуйста, создайте новый тикет в Issue Tracker.

Руководства

Существуют и другие события, на которые можно подписаться, такие как mouseenter и mouseleave. Полный список можно найти в документации API.

Эти события сработают только если Use Input включен на компоненте Element, поэтому убедитесь, что он отмечен в инспекторе.