Progress Bar Coin

Help & Support
1

I want to increase the progress bar by collecting gold, slow it down how can I do it?

var ProgressBar = pc.createScript('progressBar');

// The entity that shows the fill image 
ProgressBar.attributes.add('progressImage', {type: 'entity'});
// The maximum width of the fill image
ProgressBar.attributes.add('progressImageMaxWidth', {type: 'number'});

ProgressBar.prototype.initialize = function() {
        this.sphere = this.app.root.findByName('Player');


    // initialize progress to 0
    this.setProgress(0);
    // if true the progress bar will increase 
    // otherwise it will decrease in update
    this.increase = true;        
};

// Set progress - value is between 0 and 1
ProgressBar.prototype.setProgress = function (value) {    
    // clamp value between 0 and 1
    value = pc.math.clamp(value, 0, 50);
    
    this.progress = value;
    
    // find the desired width of our progress fill image
    var width = pc.math.lerp(0, this.progressImageMaxWidth, value);
    // set the width of the fill image element
    this.progressImage.element.width = width;
    
    // Set the width of the element's rect (rect.z) to be the same
    // value as our 0-1 progress.
    // This is so that the fill image will only show the portion
    // of the texture that is visible
    this.progressImage.element.rect.z = value;
    // force rect update
    this.progressImage.element.rect = this.progressImage.element.rect;
};

// Increase or decrease the progress automatically
ProgressBar.prototype.update = function(dt) {
    var diff = this.increase ? dt : -dt;
    this.setProgress(this.progress + diff);
    
    if (this.sphere.script.controller.gold >= 25)
        this.increase = false;
    else if (this.sphere.script.controller.gold <= 0)
        this.increase = true;
        
};

https://playcanvas.com/editor/scene/1257975

2

Hi @Ozden_Delibas!

Your question is not clear, can you rephrase it please?

3

I want the progress bar to fill up by collecting the gold item and then I want it to empty when I use the gold

4

What is the current result? Which part is not working as expected?

5

I don’t want the progress bar to fill up by itself, I want it to fill up by collecting gold in the game

6

You have to execute this part when you collect the gold, so you have to remove it from the update function.

7

Can you show me with the code that I couldn’t do it?

8 
ProgressBar.prototype.update = function(dt) {

    var diff = this.increase ? dt : -dt;

    this.setProgress(this.progress + this.sphere.script.controller.gold);

   

    if (this.sphere.script.controller.gold >= 25)

    {

        this.increase = false;

    }

    else if (this.sphere.script.controller.gold <= 1)

    {

        this.increase = true;

    }};

is this the way

9

Where do you add the gold? At that point you also need to update the progress bar.

2 Likes