Компонент Button и ProgressBar

Button — это UI-элемент, который реагирует на клики пользователя, позволяя взаимодействовать с приложением. В PlayCanvas компонент кнопки реализуется через класс pc.ButtonComponent, который обеспечивает простую обработку событий взаимодействия с пользователем. Этот компонент может быть добавлен к объекту в сцене для создания интерактивных кнопок с различными стилями и поведением.

Создание кнопки

Для начала необходимо создать объект, который будет выступать в качестве кнопки. Обычно для этого используется простая плоскость или прямоугольник. После создания объекта добавляется компонент кнопки:

var buttonEntity = new pc.Entity('button');
buttonEntity.addComponent('button', {
    text: 'Нажми меня',  // Текст на кнопке
    color: new pc.Color(1, 1, 1),  // Цвет текста
    width: 200,  // Ширина кнопки
    height: 50,  // Высота кнопки
});

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

Обработка событий

Для реализации логики взаимодействия с кнопкой необходимо подписаться на событие click, которое будет срабатывать при нажатии на кнопку. Это можно сделать с помощью события on('click', callback).

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

Метод on позволяет добавлять обработчики для различных событий кнопки, таких как mousedown, mouseup, mouseenter, mouseleave и другие. Важно понимать, что PlayCanvas использует систему событий, аналогичную DOM-событиям, но с возможностью расширения для работы в 3D-пространстве.

Применение стилей и анимаций

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

buttonEntity.button.on('mouseenter', function (event) {
    buttonEntity.element.color = new pc.Color(0.8, 0.8, 0.8);  // При наведении меняем цвет
});
buttonEntity.button.on('mouseleave', function (event) {
    buttonEntity.element.color = new pc.Color(1, 1, 1);  // При уходе мыши восстанавливаем исходный цвет
});

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

Компонент ProgressBar в PlayCanvas

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

Создание прогресс-бара

Прогресс-бар создается путём добавления двух элементов в сцену: одного для фона, второго для самой полосы прогресса. Эти элементы могут быть объектами с компонентами element, которые будут отвечать за визуализацию и обновление прогресса.

var progressBar = new pc.Entity('progressBar');

// Фон прогресс-бара
progressBar.addComponent('element', {
    type: 'image',
    width: 300,
    height: 20,
    color: new pc.Color(0.2, 0.2, 0.2)  // Тёмный цвет фона
});

// Полоса прогресса
var progress = new pc.Entity('progress');
progress.addComponent('element', {
    type: 'image',
    width: 0,  // Начальная ширина 0
    height: 20,
    color: new pc.Color(0, 1, 0)  // Зелёный цвет полосы прогресса
});

// Добавляем полосы к прогресс-бару
progressBar.addChild(progress);

Обновление прогресса

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

function updateProgressBar(progressEntity, progressValue) {
    var width = 300 * progressValue;  // Прогресс от 0 до 1
    progressEntity.element.width = width;
}

Этот метод позволяет динамически изменять прогресс-бар в реальном времени, основываясь на значении прогресса, где progressValue — это число от 0 до 1, указывающее степень завершённости задачи.

Визуальные эффекты и стилизация

Как и с кнопками, прогресс-бар можно стилизовать. Можно добавить анимации для плавного изменения размера полосы прогресса или изменить цвет в зависимости от значений. Например, можно плавно менять цвет полосы с зелёного на красный по мере завершения задачи:

function updateProgressBarWithColor(progressEntity, progressValue) {
    var width = 300 * progressValue;
    progressEntity.element.width = width;

    if (progressValue < 0.3) {
        progressEntity.element.color = new pc.Color(1, 0, 0);  // Красный, если прогресс менее 30%
    } else if (progressValue < 0.7) {
        progressEntity.element.color = new pc.Color(1, 1, 0);  // Желтый, если прогресс между 30% и 70%
    } else {
        progressEntity.element.color = new pc.Color(0, 1, 0);  // Зелёный, если прогресс больше 70%
    }
}

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

Пример использования прогресс-бара в игровом процессе

Прогресс-бары часто используются в играх для отображения здоровья, энергии, прогресса выполнения миссий или загрузки контента. Один из возможных вариантов использования — это индикатор загрузки, который обновляется по мере загрузки ресурсов игры.

var loadProgress = 0;
var progressBar = createProgressBar();  // Функция для создания прогресс-бара

function updateLoadingProgress() {
    loadProgress += 0.01;
    updateProgressBar(progressBar, loadProgress);

    if (loadProgress >= 1) {
        console.log('Загрузка завершена');
    }
}

// Обновляем прогресс каждую секунду
setInterval(updateLoadingProgress, 100);

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

Заключение

Работа с компонентами кнопок и прогресс-баров в PlayCanvas — это не только возможность создавать интерактивные элементы UI, но и предоставление пользователю визуальной обратной связи о выполнении различных задач в игре или приложении. Важно правильно использовать события для обработки взаимодействия, а также применять анимации и стили для улучшения пользовательского опыта.

Оглавление