Play sprite sheet on canvas slower than frame rate
<p>I have a sprite renderer which tells my game engine how to render a sprite. The update method in this class gets called about <code>120</code> times per second. Running through a sprite sheet at that speed is too fast.</p>

<p>In my sprite class I have a property called <code>duration</code>, which tells the renderer how many seconds the sprite should play for. Once it has reached the last frame it should start over.</p>

<p>I am not exactly sure how to calculate this with an <code>update</code> that runs <code>120</code> times a second, and a sprite sheet that should last for <code>x</code> seconds till it starts over.</p>

<pre><code>class SpriteRenderer extends Component {

    // The current frame
    public frame: number = 0;
    // The sprite reference
    public sprite: Sprite = null;

    update() {

        // Number of frames in the sprite sheet
        let frames = this.sprite.frames;
        if (frames &gt; 0) {
            // The time in seconds the sprite sheet should play
            let duration = this.sprite.duration;

            if (/* What should go here? */) {
                this.frame++;
                if (this.frame &gt; frames - 1) {
                    this.frame = 0;
                }
            }
        }

    }

}
</code></pre>