Hi, Hope you are fine and in good health. I’m facing this type of issue when I click on the button then the value that I have fixed of the image width easily moves from start to end with the help of lerp but once I click the second time then it happens to move but doesn’t seem to lerp functionality work.
Build:
editor:
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.attributes.add('button', {type: 'entity'});
ProgressBar.prototype.initialize = function() {
// use our own rect object to set the size of
// the progress bar
this.imageRect = this.progressImage.element.rect.clone();
this.button.element.on('click', this.press, this);
// initialize progress to 0
// this.setProgress(0);
// if true the progress bar will increase
// otherwise it will decrease in update
this.start=0;
this.progressWidth=350;
this.totalValue=0;
this.startingValue=0;
};
ProgressBar.prototype.press = function () {
let data=this.progressWidth/20;
this.totalValue+=data;
this.increase = true;
this.progressImageMaxWidth=parseInt(this.totalValue);
this.progress=parseInt(this.startingValue);
this.setProgress(parseInt(this.startingValue));
this.startingValue+=this.totalValue;
};
// Set progress - value is between 0 and 1
ProgressBar.prototype.setProgress = function (value) {
// clamp value between 0 and 1
console.log("value comes first ",value);
this.value = pc.math.clamp(value, 0,1);
this.progress = this.value;
console.log("value ",this.value);
// find the desired width of our progress fill image
var width = pc.math.lerp(0, this.progressImageMaxWidth, this.value);
// set the width of the fill image element
console.log("width ",width);
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.imageRect.copy(this.progressImage.element.rect);
this.imageRect.z = this.value;
// force rect update
this.progressImage.element.rect = this.imageRect;
};
// Increase or decrease the progress automatically
ProgressBar.prototype.update = function(dt) {
var diff = this.increase ? dt :null;
this.setProgress(this.progress + diff);
if (this.progress >= 1)
{
this.increase = false;
}
};