[SOLVED] How to create a task progress bar?

In my horror game, I want there to be lootable objects like trash cans and such, basically you walk up to the object and hold e, then some sort of bar shows and it slowly progresses as you hold e. I did this in my last game but the issue with it was that it was run by a picture moving with no timer so tasks would move at different speeds based on the device. I also want a random spawn, like only one trash can has a key. This is based on the game by Dave Microwave Games. Any Help?
Below are some examples of what I want to achieve.
Screenshot 2023-11-30 11.04.18 PM

Please help… ;( this is like the biggest mechanic in my game

I’m not sure what your question is. What did you try so far? Which part is working and which part is not?

1 Like

PlayCanvas 3D HTML5 Game Engine was how I did it in the old game but it does not work well like I said before, I am not sure what approach or method I should use this time, something a bit more specific is the progress animation and random spawns.

You can share your project, but I expect to see something you want to achieve? Users don’t have the time to check a big project in the hope they can find what you mean.

Ok I will explain and share, PlayCanvas | HTML5 Game Engine
That is the game I am working on right now, I want to make objects (Right now the trash cans) lootable, I mean lootable as in the player would walk to the trash can an an option that says “press e” will appear, when the player holds e a progress bar like the one in the image above (it does not have to be square, just a progress bar in general) will start to go up, when the progress bar reaches it the end, text on the screen will tell the player if they found something, ex. “You found nothing…” “You found a silver key” And instead of random math one key will “spawn” in of the trash cans.
The issue the last game had → PlayCanvas | HTML5 Game Engine was that since there was no timer the bar would move at different speeds depending on the device it is being played on.

Just start with the basics. If that works you can add more functionality. Below some things I think you need.

1 Like

Alright, since there are many trash cans, I will put platforms near them all, but make them child entities of a entity with a compound collision, and put the “press e” display on that so it effects all trash cans

How do I put a timer on the progresscount?

Test.prototype.update = function(dt) {
    if (this.app.keyboard.isPressed(pc.KEY_E)) {
        this.entity.translateLocal(0.5, 0, 0);
        proggressCount = proggressCount + 10;
    }

    if (proggressCount > 6100) {
        this.ProggressText.enabled = false;
        this.ProggressBar.enabled = false;
        this.ProggressTank.enabled = false;
        this.Text.enabled = false;
        this.Lock.enabled = false;
        this.entity.enabled = false;
        Completed = 1;
        console.log(Completed);
    }
};

Sorry I don’t know, I also need to study the project I shared to be able to know what I have to do.

1 Like

Alright, thanks!

Can this work as a timer?

this.app.tween({}).to({}, 1, pc.Linear).delay(0)
            .on('complete', function() {
            // do whatever here
        }, this).start();

Maybe, but that’s a method of tween that’s not working anymore.

A timer is realy simple to make without a tween.

// initialize
this.timer = 0;
this.timerActive = false;
// update
if (this.timerActive) {
    this.timer += dt;
    if (this.timer > 1) {
        this.timer = 0;
        // do something here
    }
}
1 Like

what does dt stand for?

It’s detla time and based on the frame rate of the screen as far as I know.

You can also replace it with something like 0.01.

What would be the difference? Here is my code btw

var Barfill1 = pc.createScript('barfill1');

// pC Stands For Progress Count
var pC1 = 0;

// initialize code called once per entity
Barfill1.prototype.initialize = function() {
    this.timer = 0;
this.timerActive = false;
};

// update code called every frame
Barfill1.prototype.update = function(dt) {
    if (this.timerActive) {
    this.timer += dt;
    if (this.timer > 1) {
        this.timer = 0;
        if (this.app.keyboard.isPressed(pc.KEY_E)) {
        this.entity.translateLocal(0.5, 0, 0);
        pC1 = pC1 + 10;
    }
    }
}
};

// swap method called for script hot-reloading
// inherit your script state here
// Barfill1.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/

The little white square wont move thou
https://playcanvas.com/editor/scene/1903823

Sorry, I don’t understand how you try to use the timer here?

Be aware this.timerActive is set to false by default.

I just switched it to true but it still wont work, basically when holding e, every (specific delay) the white square will move closer to the other side, when it does, the looting is complete

I don’t think you need a timer for that?

var Barfill1 = pc.createScript('barfill1');

// pC Stands For Progress Count
var pC1 = 0;

// initialize code called once per entity
Barfill1.prototype.initialize = function() {

};

// update code called every frame
Barfill1.prototype.update = function(dt) {
    if (this.app.keyboard.isPressed(pc.KEY_E)) {
        this.entity.translateLocal(0.5, 0, 0);
        pC1 = pC1 + 10;
    }
};

What happens if you just start with this?

Then the progress will go at different speeds based on the device, which is kinda dumb.