Компонент Button: события clicked, hover, pressed

В PlayCanvas компонент Button используется для создания кнопок, с которыми пользователь может взаимодействовать. Этот компонент может обрабатывать различные события, такие как clicked, hover и pressed, позволяя создавать интерактивные элементы интерфейса. В этой статье рассмотрим, как работать с этими событиями и настраивать поведение кнопки в PlayCanvas.

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

Для того чтобы использовать компонент Button, его необходимо добавить к объекту в сцене. Кнопка может быть представлена в виде 2D-спрайта, 3D-объекта или другого типа графического элемента. Как только компонент Button добавлен, он начинает слушать события, которые могут быть обработаны через код.

Вот пример создания кнопки и добавления компонента:

var buttonEntity = new pc.Entity();
buttonEntity.addComponent('button', {
    text: 'Нажми меня',
    color: new pc.Color(0, 1, 0),
    fontSize: 32
});

Этот код создает объект с компонентом Button, который отображает текст «Нажми меня» зеленым цветом. Далее рассмотрим, как можно обработать события, связанные с этим компонентом.

Событие clicked

Событие clicked срабатывает, когда пользователь нажимает на кнопку. Оно является одним из самых популярных и широко используемых событий в UI-интерфейсах. Для обработки этого события нужно подписаться на него с помощью метода on компонента Button.

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

buttonEntity.button.on('click', function (event) {
    console.log('Кнопка была нажата!');
});

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

Событие hover

Событие hover срабатывает, когда курсор мыши наведен на кнопку. Оно полезно для создания визуальных эффектов, таких как изменение цвета кнопки или анимации при наведении.

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

buttonEntity.button.on('mouseenter', function (event) {
    buttonEntity.button.color = new pc.Color(1, 0, 0);  // Изменение цвета на красный при наведении
});

buttonEntity.button.on('mouseleave', function (event) {
    buttonEntity.button.color = new pc.Color(0, 1, 0);  // Возврат к первоначальному цвету
});

В этом примере при наведении курсора на кнопку ее цвет изменяется на красный, а при уходе с кнопки — возвращается к исходному состоянию. Важно понимать, что для работы с этими событиями необходимо подписываться на два события: mouseenter (когда курсор попадает на кнопку) и mouseleave (когда курсор покидает кнопку).

Событие pressed

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

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

buttonEntity.button.on('press', function (event) {
    console.log('Кнопка удерживается!');
});

Это событие активируется, когда пользователь начинает удерживать кнопку. Важно отметить, что событие press срабатывает только на устройствах, поддерживающих длительное нажатие, и работает в сочетании с другими событиями, такими как clicked и released.

Дополнительные опции для компонента Button

Компонент Button в PlayCanvas имеет несколько дополнительных настроек, которые могут быть полезны при настройке поведения кнопки.

  1. text — строка текста, отображаемая на кнопке.
  2. color — цвет кнопки.
  3. fontSize — размер шрифта текста.
  4. texture — текстура для кнопки (например, для использования в 3D).
  5. sound — звук, воспроизводимый при нажатии.

Пример настройки компонента с дополнительными параметрами:

buttonEntity.addComponent('button', {
    text: 'Нажми меня',
    color: new pc.Color(0, 1, 0),
    fontSize: 32,
    texture: 'buttonTexture.png',
    sound: 'clickSound.wav'
});

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

Управление состоянием кнопки

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

  • Normal — обычное состояние, когда кнопка не нажата.
  • Hovered — состояние, когда кнопка находится под курсором.
  • Pressed — состояние, когда кнопка нажата.

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

Пример управления состоянием кнопки:

buttonEntity.button.on('mouseenter', function (event) {
    buttonEntity.button.color = new pc.Color(1, 1, 0); // Изменение цвета на желтый при наведении
});

buttonEntity.button.on('mouseleave', function (event) {
    buttonEntity.button.color = new pc.Color(0, 1, 0); // Возврат к исходному цвету
});

buttonEntity.button.on('press', function (event) {
    buttonEntity.button.color = new pc.Color(0, 0, 1); // Синий цвет при удержании кнопки
});

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

Взаимодействие с другими компонентами

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

Например, можно подключить кнопку к анимации, которая будет запускаться при нажатии:

buttonEntity.button.on('click', function (event) {
    var animation = buttonEntity.animation;
    animation.play('buttonClickAnimation');
});

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

Заключение

Работа с компонентом Button в PlayCanvas позволяет создавать гибкие и интерактивные элементы управления. С помощью событий clicked, hover и pressed можно детально настраивать поведение кнопок, а дополнительные параметры компонента дают широкие возможности для кастомизации визуального и функционального поведения кнопок.

Оглавление