User Interface - Stats Counter

How to use buttons, progress bars and interact with elements. See the full scene.

In this tutorial we are going to use the built-in Elements to create a few simple widgets that allow you to increase a stat by clicking on plus / minus buttons.

For each stat we need a minus button, a plus button, a progress bar and some text to show the current stat value.


This is what our UI looks like in the Hierarchy:


Screen setup

First we start by adding a new 2D Screen. This is what our Screen looks like:


Since it's a 2D screen we have ticked Screen Space. Our Reference Resolution is the resolution that we are targeting - in this case it's 1080 x 1920. We choose Blend for Scale Mode so that our Screen adapts to resolution changes and we set Scale Blend to 1 so that the Screen will adapt only to height changes.

Stats setup

For each stat we will create a different Group Element. This allows us to treat sub-elements of the Group to be anchored to the Group edges and allows us to treat each stat as a separate widget.

We will only examine the Boost stat - the others are exactly the same. This is that the stats-boost Entity looks like in the viewport:


And these are its attributes:

Boost Attributes

As you can see it has a Group Element component with the appropriate size to contain all our elements and it's anchored to the bottom of the screen. It also has a Script Component with the script uiStats assigned to it. This script will allow us to handle interactions with the Elements of the group.

This is what our group looks like in the Hierarchy:

Boost Hierarchy

Our group has the following child Elements:


We have a script on each button to allow us to change their texture based on hover states. This is similar to the script found in this tutorial. We also have a script to handle our progress bar. There is more info on progress bars in this tutorial.

The main script that handles the interactions for each stat is 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

    // 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;

In this script we find our child elements and when the plus or minus buttons are clicked we increase / decrease the stat and update the progress bar and its text.