Tachometer On Car

Help & Support
1

Hello,

I have been trying to simulate the tachometer on a car in my game. The progress bar should go up and down as I press and release ‘0’.

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() {
    // initialize progress to 0
    this.setProgress(0);
    // if true the progress bar will increase 
    // otherwise it will decrease in update
    this.increase = true;  
    
    
    this.timerKey = 0;
    this.check = 2;
    check1 = 1;
    this.OneCounter = 0;

    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.keyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.keyUp, this);
};

// 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, 1);
    
    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;
};

ProgressBar.prototype.update = function(dt) {
    
};


ProgressBar.prototype.keyDown = function (e, dt) {
    if (e.key === pc.KEY_0) {
        if (check1 === 1){
            if (this.timerKey <= this.check) {
                this.timerKey += dt;
                this.OneCounter += 0.0075;
                this.setProgress(this.OneCounter);
            }

            else {
                this.timerKey = 0;
                dt = 0;
                check1 ++;
            }
        }
        
        else if (check1 === 2) {
            this.OneCounter = 0;
        }
    }
};

ProgressBar.prototype.keyUp = function (e, dt) {
    if (e.key === pc.KEY_0) {
        console.log(this.timerKey);
        if (this.timerKey > 0) {
            this.timerKey -= dt;
            this.OneCounter -= 0.0075;
            this.setProgress(this.OneCounter);
        }
    }
};

I have used the Progress Bar tutorial to try and show this. However, the attached problem shows up.

51%20PM
Screenshot 2019-11-30 at 4.55.51 PM.jpg1440×794 110 KB

As visible, the progress bar doesn’t go up and down as I press and release the key, but stops after a small margin. Could someone please help me out?

2

There’s no error on the screenshot?

3

My bad. Shouldn’t have said error. But the script doesn’t work as intended, as described above. Is there any way I can fix this?

4

dt doesn’t get passed to the key up/down function. It’s tricky to use the concept of deltatime in the keydown callbacks.

I would recommend using the keyboard isPressed function in the update loop: https://developer.playcanvas.com/en/api/pc.Keyboard.html

eg

ProgressBar.prototype.update = function(dt) {
  if (this.app.keyboard.isPressed(pc.KEY_0)) {
    // Do something
  }    
};
5

Tried that before. How would I do isReleased? It won’t go up and down like a car without that.

6 
ProgressBar.prototype.update = function(dt) {
  if (this.app.keyboard.isPressed(pc.KEY_0)) {
    // Do something when key is down
  } else {
    // Do something when key is not pressed
  }
};
7

Thanks, I’ll try and get back.

8

@yaustar, it works but is there any way I can make it rev faster in first, slightly slower in second, and so on?

9

I’d like to know the answer to this as well.