ProgressBar: настройка и обновление

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

Создание ProgressBar

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

  • Container — элемент, который будет служить контейнером для шкалы прогресса.
  • Progress Bar — элемент, который будет заполняться в зависимости от текущего прогресса.

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

var progressBarContainer = new pc.Entity();
progressBarContainer.addComponent('element', {
    type: pc.ELEMENTTYPE_RECT,
    anchor: [0, 0, 0, 0],
    pivot: [0, 0],
    width: 400,
    height: 20,
    backgroundColor: new pc.Color(0.1, 0.1, 0.1)
});

var progressBar = new pc.Entity();
progressBar.addComponent('element', {
    type: pc.ELEMENTTYPE_RECT,
    anchor: [0, 0, 0, 0],
    pivot: [0, 0],
    width: 0, // начальная ширина 0
    height: 20,
    backgroundColor: new pc.Color(0, 1, 0)
});

progressBarContainer.addChild(progressBar);
this.app.root.addChild(progressBarContainer);

В этом примере создаются два элемента: контейнер для прогресс-бара и сам прогресс-бар. Контейнеру задается фиксированный размер и фоновый цвет, а прогресс-бару — начальная ширина 0. По мере обновления ширины прогресс-бара будет меняться его визуальное представление.

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

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

Пример кода для обновления ширины прогресс-бара:

var progress = 0.5; // прогресс 50%

progressBar.element.width = progress * progressBarContainer.element.width;

Здесь progress представляет собой значение прогресса от 0 до 1 (где 1 — 100% выполнения). Мы умножаем это значение на ширину контейнера, чтобы рассчитать ширину самого прогресс-бара. Таким образом, прогресс-бар будет заполняться пропорционально прогрессу.

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

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

Пример кода для анимации прогресса:

var targetProgress = 0.8; // целевой прогресс 80%
var animationSpeed = 0.05; // скорость анимации

this.app.on('update', function(dt) {
    var currentProgress = progressBar.element.width / progressBarContainer.element.width;
    
    // плавно увеличиваем или уменьшаем текущий прогресс
    if (currentProgress < targetProgress) {
        progressBar.element.width = Math.min(progressBar.element.width + animationSpeed * progressBarContainer.element.width, targetProgress * progressBarContainer.element.width);
    } else if (currentProgress > targetProgress) {
        progressBar.element.width = Math.max(progressBar.element.width - animationSpeed * progressBarContainer.element.width, targetProgress * progressBarContainer.element.width);
    }
});

Здесь создается анимация, которая плавно изменяет ширину прогресс-бара, чтобы достичь целевого значения. Параметр animationSpeed контролирует, как быстро прогресс-бар будет заполняться.

Работа с несколькими ProgressBar

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

Пример кода для работы с несколькими прогресс-барами:

var progressBar1 = createProgressBar();
var progressBar2 = createProgressBar();

function createProgressBar() {
    var container = new pc.Entity();
    container.addComponent('element', {
        type: pc.ELEMENTTYPE_RECT,
        width: 400,
        height: 20,
        backgroundColor: new pc.Color(0.1, 0.1, 0.1)
    });

    var bar = new pc.Entity();
    bar.addComponent('element', {
        type: pc.ELEMENTTYPE_RECT,
        width: 0,
        height: 20,
        backgroundColor: new pc.Color(0, 1, 0)
    });

    container.addChild(bar);
    this.app.root.addChild(container);

    return bar;
}

// Обновляем два прогресс-бара одновременно
this.app.on('update', function(dt) {
    progressBar1.element.width = Math.min(progressBar1.element.width + 0.01, 400);
    progressBar2.element.width = Math.min(progressBar2.element.width + 0.005, 400);
});

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

Стилизация прогресс-бара

Для улучшения визуального восприятия можно добавить стили к прогресс-бару, например, скруглить его углы, добавить тени или анимацию изменения цвета. С помощью компонента Element можно изменять различные параметры, такие как цвет, тень, а также угол наклона.

Пример стилизации прогресс-бара:

progressBar.element.backgroundColor = new pc.Color(0.3, 0.7, 0.3); // меняем цвет на светлый зеленый
progressBar.element.borderRadius = 10; // скругляем углы
progressBar.element.shadow = new pc.Shadow({ distance: 5, softness: 1 }); // добавляем тень

Обработка завершения задачи

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

Пример:

if (progressBar.element.width >= progressBarContainer.element.width) {
    console.log("Задача завершена!");
    progressBar.enabled = false; // скрываем прогресс-бар
}

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

Оглавление