游戏循环增量时间不适用于指定的 fps答案

【问题标题】：game loop delta time is not working with specified fps游戏循环增量时间不适用于指定的 fps
【发布时间】：2022-10-16 18:04:43
【问题描述】：

不知何故，deltaTime 通常是 0.01667s (60fps)，即使 targetFrameRate 是 30 (0.03333s)，是的 targetFrameRate 正在工作（增加延迟）。这使得运动代码在大于或小于 60 时无法按指定的 fps 正常工作，从而导致 velocity * deltaTime 损坏。

问题：deltaTime 始终为 60fps，不受targetFrameRate 影响

这是我的代码

// Initializes the game loop
window.onload = () => {
    PlayerLoop.init();
};

// Gets called every frame
function Update ()
{
    console.log(Time.deltaTime);
}

// The specified fps
const targetFrameRate = 30;

// Class that holds time
class Time
{
    static unscaledTime = 0;
    static unscaledDeltaTime = 0;
    static timeScale = 1;
    static frameCount = 0;
    static time = 0;
    static deltaTime = 0;
    static maximumDeltaTime = 0.3333333;
}

// Game loop class
class PlayerLoop
{
    static #accumulator = 0;
    
    static #requestUpdate ()
    {
        requestAnimationFrame(this.#update.bind(this));
    }
    
    static #update ()
    {
        Time.unscaledDeltaTime = (performance.now() / 1000) - Time.unscaledTime;
        Time.unscaledTime += Time.unscaledDeltaTime;
        
        var deltaT = Time.unscaledDeltaTime;
        
        if (deltaT > Time.maximumDeltaTime) deltaT = Time.maximumDeltaTime;
        
        Time.deltaTime = deltaT * Time.timeScale;
        Time.time += Time.deltaTime;
        
        this.#accumulator += Time.deltaTime;
        
        while (this.#accumulator >= 1 / (targetFrameRate))
        {
            Time.frameCount++;
            
            Update();
            
            this.#accumulator -= 1 / (targetFrameRate);
        }
        
        // Render
        
        this.#requestUpdate();
    }
    
    static init ()
    {
        this.#requestUpdate();
    }
}

【问题讨论】：

我应该写“s”大声笑，对不起
没问题，给你修好了

标签： javascript time frame-rate game-loop delta

【解决方案1】：

感谢Annas，我已经修复了它

我的代码缺少另一个增量时间，它将告诉何时更新全局 Time.deltaTime 变量

这是我的新代码

// Initializes the game loop
window.onload = () => {
    PlayerLoop.init();
};

// Gets called every frame
function Update ()
{
    console.log(Time.deltaTime);
}

// The specified fps
const targetFrameRate = 30;

// Class that holds time
class Time
{
    static unscaledTime = 0;
    static unscaledDeltaTime = 0;
    static timeScale = 1;
    static frameCount = 0;
    static time = 0;
    static deltaTime = 0;
    static maximumDeltaTime = 0.3333333;
}

// Game loop class
class PlayerLoop
{
    static #requestUpdate ()
    {
        requestAnimationFrame(this.#update.bind(this));
    }
    
    static #update ()
    {
        // This is the "other delta time"
        accumulator = (performance.now() / 1000) - Time.unscaledTime;
        
        while (accumulator >= 1 / (targetFrameRate))
        {
            Time.unscaledDeltaTime = (performance.now() / 1000) - Time.unscaledTime;
            Time.unscaledTime += Time.unscaledDeltaTime;
            
            var deltaT = Time.unscaledDeltaTime;
            
            if (deltaT > Time.maximumDeltaTime) deltaT = Time.maximumDeltaTime;
            
            Time.deltaTime = deltaT * Time.timeScale;
            Time.time += Time.deltaTime;
            
            Time.frameCount++;
            
            Update();
            
            accumulator -= 1 / (targetFrameRate);
        }
        
        // Render
        
        this.#requestUpdate();
    }
    
    static init ()
    {
        this.#requestUpdate();
    }
}

我已删除 PlayerLoop.#accumulator 并将 accumulator 添加为“其他增量时间”。然后我将所有Time 更新代码移到了while 循环的内部。

感谢所有帮助过的人

【讨论】：