Button: состояния, события, кастомизация

В Babylon.js кнопка — это интерактивный элемент, который может быть использован для создания интерфейсов в 3D-пространстве. Кнопки могут быть настроены так, чтобы изменять свои свойства и поведение в зависимости от различных состояний, таких как «наведено», «нажато» или «неактивно».

Состояние наведенной кнопки (hover)

Когда пользователь наводит указатель мыши на кнопку, она может изменять свой внешний вид, чтобы дать понять, что она активна для взаимодействия. Это состояние часто используется для подсветки кнопки, изменения цвета или добавления анимации.

Пример создания кнопки с изменением внешнего вида при наведении:

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Нажми меня");
button.width = "150px";
button.height = "40px";
button.color = "white";
button.background = "green";
button.onPointerOverObservable.add(() => {
    button.background = "yellow";  // Меняем цвет при наведении
});
button.onPointerOutObservable.add(() => {
    button.background = "green";  // Возвращаем исходный цвет
});
advancedTexture.addControl(button);

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

Состояние нажатой кнопки (press)

Когда пользователь кликает на кнопку, она может изменять свое состояние, например, менять цвет или запускать анимацию. В Babylon.js для этого существует событие onPointerDownObservable, которое отслеживает момент нажатия на кнопку.

Пример с изменением состояния кнопки при нажатии:

button.onPointerDownObservable.add(() => {
    button.background = "red";  // Изменяем цвет фона на красный при нажатии
});
button.onPointerUpObservable.add(() => {
    button.background = "green";  // Возвращаем исходный цвет при отпускании кнопки
});

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

Состояние неактивности

Кнопки могут быть также деактивированы, что означает, что они не реагируют на события. В данном случае, событие onPointerDownObservable или onPointerOverObservable не будет срабатывать, и визуальное представление кнопки также может быть изменено, чтобы указать на её неактивность.

Пример создания неактивной кнопки:

button.isEnabled = false;  // Отключаем кнопку
button.background = "gray";  // Меняем цвет кнопки на серый, чтобы указать её неактивность

Таким образом, пользователь не сможет взаимодействовать с кнопкой, пока она находится в неактивном состоянии.

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

Одной из важнейших характеристик кнопки является возможность привязки событий, которые происходят при взаимодействии с ней. В Babylon.js для этого используется система наблюдателей (Observables). Эти события позволяют отслеживать различные виды взаимодействий с кнопкой, такие как нажатие, наведение, отпускание и другие.

Событие нажатия (onPointerDown)

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

Пример:

button.onPointerDownObservable.add(function () {
    console.log("Кнопка нажата");
});

При нажатии на кнопку в консоли появится сообщение “Кнопка нажата”.

Событие отпускания (onPointerUp)

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

Пример:

button.onPointerUpObservable.add(function () {
    console.log("Кнопка отпущена");
});

Событие наведения (onPointerOver)

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

Пример:

button.onPointerOverObservable.add(function () {
    console.log("Навели курсор на кнопку");
});

Событие ухода указателя (onPointerOut)

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

Пример:

button.onPointerOutObservable.add(function () {
    console.log("Курсор покинул кнопку");
});

Кастомизация кнопки

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

Изменение размера кнопки

Для изменения размеров кнопки можно использовать параметры width и height. Размеры могут быть заданы в пикселях или в процентах от экрана.

Пример:

button.width = "200px";
button.height = "60px";

Изменение текста и шрифта

Можно настроить шрифт, размер текста и его цвет с помощью параметров fontFamily, fontSize, и color.

Пример:

button.fontFamily = "Arial";
button.fontSize = 18;
button.color = "white";
button.textBlock.text = "Нажми меня!";

Добавление анимации

Для более сложной кастомизации можно использовать анимации. Например, кнопка может изменять размер или перемещаться при наведении или нажатии.

Пример анимации кнопки:

button.onPointerOverObservable.add(function () {
    var anim = new BABYLON.Animation("anim", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    var keys = [
        { frame: 0, value: 1 },
        { frame: 30, value: 1.2 },
        { frame: 60, value: 1 }
    ];
    anim.setKeys(keys);
    button.animations = [anim];
    scene.beginAnimation(button, 0, 60, true);
});

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

Подсказки и метки

Babylon.js также поддерживает отображение подсказок (tooltips) для кнопок. Подсказка — это небольшое текстовое сообщение, которое появляется, когда пользователь наводит указатель на кнопку. Это полезно для объяснения назначения кнопки или предоставления дополнительной информации.

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

button.tooltipText = "Нажмите для выполнения действия";

Таким образом, можно значительно улучшить взаимодействие с пользователем, предоставив ему больше информации о кнопке.

Итоги

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

Оглавление