跳到主要内容

用户界面：数值计数器

使用按钮、进度条并与元素交互。查看完整场景。

本教程使用内置 Element 创建几个简单控件，通过点击加减按钮调整属性数值。

每个属性需要减号按钮、加号按钮、进度条，以及显示当前值的文字。

层级​

界面层级如下：

层级

屏幕配置​

首先添加新的二维 Screen，配置如下：

屏幕

由于这是二维屏幕，我们勾选 Screen Space（屏幕空间）。Reference Resolution（参考分辨率）设为目标分辨率，本例为 1080 × 1920。Scale Mode（缩放模式）选择 Blend，使屏幕适应分辨率变化；Scale Blend（缩放混合）设为 1，使屏幕只根据高度变化缩放。

属性控件配置​

为每个属性创建单独的 Group 元素，使子元素锚定到组边缘，并将每个属性视为独立控件。

这里只介绍 Boost 属性，其他属性完全相同。stats-boost 实体在视口中的效果如下：

Boost 控件

它的属性如下：

Boost 属性

它的 Group 元素组件具有容纳所有子元素的合适尺寸，并锚定在屏幕底部。Script 组件挂载 uiStats 脚本，负责处理组内元素的交互。

组的层级如下：

Boost 层级

组具有以下子元素：

  • text-title：显示组标题的 Text 元素，锚定在组顶部。
  • btn-minus：带有 Text 子元素的 Image 元素，作为减号按钮，锚定在组左下方。
  • btn-plus：带有 Text 子元素的 Image 元素，作为加号按钮，锚定在组右下方。
  • progress-bar：锚定在组底部的进度条。它的 Image 元素显示背景，具有两个子元素：
    • image-progress：可改变尺寸的 Image 元素，实际显示进度，锚定在 progress-bar 左侧。
    • text：显示数值的 Text 元素，锚定在 progress-bar 中央。

脚本​

每个按钮上都有脚本根据悬停状态更换纹理，类似按钮教程中的做法。另有脚本处理进度条，更多信息见进度条教程。

处理每个属性交互的主脚本为 uiStats：

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

UiStats.prototype.initialize = function() {
    // find our widgets
    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');

    // initialize value to 0
    this.setValue(0);

    // increase value with plus button
    this.btnPlus.element.on('click', function (evt) {
        this.setValue(this.value + 1);
    }, this);

    // decrease value with minus button
    this.btnMinus.element.on('click', function (evt) {
        this.setValue(this.value - 1);
    }, this);
};

// Sets the stat value
UiStats.prototype.setValue = function (value) {
    // clamp between min and max
    this.value = pc.math.clamp(value, 0, 10);
    // set progress
    this.progressBar.script.progressBar.setProgress(this.value / 10);
    // update progress text
    this.progressText.element.text = this.value + ' / ' + 10;
};

脚本查找子元素，在点击加号或减号时增加或减少数值，并更新进度条及其文字。