Slow Motion Effect

Help & Support
1

Hi playcanvas community hope yall doing well, So I am a bit confused at what I am trying to do. The thing is I am trying to make a slow motion effect and make that effect last for given sec and within that time I want to spawn an entity and show it moving slowly. I have tried some things but it doesn’t work like I want so I need some help here. Here is a bit of code

GameController.prototype.slowTime = async function(dt){
    this.timer += dt;
    
    if(this.timer >= this.timeToSlow){
        this.problemTime = true;
    }
    
    if(this.problemTime){
        let particles = this.flareParticles.clone();
        this.app.timeScale = 0.1;
        particles.enabled = true;
        
        await waitForSeconds(this.timeToSlow);
        this.app.timeScale = 1;
        this.problemTime = false;
    }
};

I am calling it in update and it is giving some weird behaviour

2

Can anybody help me with this?? I really need to finish this by days end

3

How do you want it to work? What is not working/shows/behaving to what you expect?

Can you share a small reproducible project?

 await waitForSeconds(this.timeToSlow);

await is a blocking call, is this intentional?

4

Here is the link to the game https://launch.playcanvas.com/1246545?debug=true

Yes the await call is intentional I want the game to return to normal speed after given time which is why it’s there

In the game the particles just keep on spawning I only want to spawn it once and then slow the game for some time.

5

How do you reproduce the issue?

Which particles are we talking about?

Where is the code that people should be looking at to help with?

Please give as much information as you can so that it’s easier for the community to quickly take a look and try to help

6

Sorry if I wasn’t clear enough this code is what I am having problem with

GameController.prototype.slowTime = async function(dt){
    this.timer += dt;
    
    if(this.timer >= this.timeToSlow){
        this.problemTime = true;
    }
    
    if(this.problemTime){
        let particles = this.flareParticles.clone();
        this.app.timeScale = 0.1;
        particles.enabled = true;
        
        await waitForSeconds(this.timeToSlow);
        this.app.timeScale = 1;
        this.problemTime = false;
    }
};

the 'particles variable is spawning the particles in the game and timeScale is usesd to slow the game speed after lets say 10 seconds I want timeScale back at 1 for which the await call is used.

https://launch.playcanvas.com/1246545?debug=true

I am using ‘timer’ to calculate time after which particles need to spawn which should reset to 0 after it goes above the required time.

7

Have you debugged this and checked?

And again:

8

Calling the above code in the update method seems to cause the issue but I can’t see how else I could achieve the functionality.

9

Having a quick look at the code, there is heavy use of awaits that rely on realtime rather than the scaled time in the engine. This will cause you issues further down the line as spawning of asteroids for example will not be affected by the ‘slow down’ time.

As for your current issue, I don’t understand the logic of it needing slowTime to be called every frame.

It should be called the once when it is needed and only in the frame that it passes the time.

There is a script here that can help with one shot timers: Timers | Learn PlayCanvas

Or you can do something like:

GameController.prototype.update = function (dt) {
    var prevTime = this.timer;

    this.timer += dt;

    if (prevTime < this.timeToSlow && this.timer >= this.timeToSlow) {
        this.slowTime();
    }
};

GameController.prototype.slowTime = async function (dt) {
    let particles = this.flareParticles.clone();
    this.app.timeScale = 0.1;
    particles.enabled = true;

    await waitForSeconds(this.timeToSlow);
    this.app.timeScale = 1;
};

The slowTime function is just called the once now and only in the frame where the timer has exceeded this.timeToSlow

10

Thanks works great, I was confused at how to do this.