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

Как использовать кнопки, индикаторы выполнения и взаимодействовать с элементами. Смотрите полную сцену.

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

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

Иерархия

Вот как выглядит наш пользовательский интерфейс в иерархии:

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

Сначала мы добавляем новый 2D Screen. Вот как выглядит наш экран:

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

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

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

Мы рассмотрим только статистику Boost - остальные точно такие же. Вот как выглядит сущность stats-boost в окне просмотра:

И это его атрибуты:

Как видите, у него есть компонент Group Element с соответствующим размером для размещения всех наших элементов, и он закреплен в нижней части экрана. У него также есть компонент Script с назначенным ему скриптом uiStats. Этот скрипт позволит нам обрабатывать взаимодействия с элементами группы.

Вот как выглядит наша группа в иерархии:

Наша группа имеет следующие дочерние элементы:

• text-title: Текстовый элемент для заголовка группы - закреплен в верхней части группы.
• btn-minus: Изображение элемента, которое имеет дочерний текстовый элемент. Это наша кнопка минус, и она закреплена в нижнем левом углу группы.
• btn-plus: Изображение элемента, которое имеет дочерний текстовый элемент. Это наша кнопка плюс, и она закреплена в нижнем правом углу группы.
• progress-bar: Наш индикатор выполнения, закрепленный в нижней части группы. Это элемент изображения для фона индикатора выполнения, и у него есть 2 дочерних элемента:
  • image-progress: Изменяемый элемент изображения, который фактически отображает выполнение. Закреплен слева от элемента progress-bar.
  • text: Текстовый элемент, который отображает нашу статистику. Закреплен в центре элемента progress-bar.

Скрипты

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

Основной скрипт, который обрабатывает взаимодействия для каждой статистики, называется uiStats:

var UiStats = pc.createScript('uiStats');

UiStats.prototype.initialize = function() {
    // найти наши виджеты
    this.btnPlus = this.entity.findByName('btn-plus');
    this.btnMinus = this.entity.findByName('btn-minus');
    this.progressBar = this.entity.findByName('progress-bar');
    this.progressText = this.progressBar.findByName('text');

    // инициализировать значение 0
    this.setValue(0);

    // увеличить значение с помощью кнопки плюс
    this.btnPlus.element.on('click', function (evt) {
        this.setValue(this.value + 1);
    }, this);

    // уменьшить значение с помощью кнопки минус
    this.btnMinus.element.on('click', function (evt) {
        this.setValue(this.value - 1);
    }, this);
};

// Устанавливает значение статистики
UiStats.prototype.setValue = function (value) {
    // зажать между минимумом и максимумом
    this.value = pc.math.clamp(value, 0, 10);
    // установить прогресс
    this.progressBar.script.progressBar.setProgress(this.value / 10);
    // обновить текст прогресса
    this.progressText.element.text = this.value + ' / ' + 10;
};

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