在画布上播放精灵表比帧速率慢

时间:2016-09-30 16:42:54

标签: javascript typescript game-engine

我有一个精灵渲染器,告诉我的游戏引擎如何渲染精灵。此类中的更新方法每秒调用大约120次。以这个速度跑过精灵表太快了。

在我的sprite类中,我有一个名为duration的属性,它告诉渲染器精灵应该播放多少秒。一旦到达最后一帧,它应该重新开始。

我不确定如何使用每秒运行update次的120以及应该持续x秒的精灵表来计算它,直到重新开始。< / p>

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 > 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 > frames - 1) {
                    this.frame = 0;
                }
            }
        }

    }

}

1 个答案:

答案 0 :(得分:1)

您可以实现控制帧时间的时间变量。 这个变量是一个浮点数,一旦它变得足够大,你可以做下一帧并重置变量。

我从未做过任何类型的脚本,但这可能有效。它至少会让你知道我在说什么。

如果更新每秒运行120次,则意味着每60/120秒运行一次0.5。

现在我们可以将currentTime增加0.5并检查currentTime&gt; sprite.duration * 60我想。 :)

Exampe:

class SpriteRenderer extends Component {

    // The current frame
    public frame: number = 0;
    // The sprite reference
    public sprite: Sprite = null;
    public currentTime: number = 0.0; //This is the current time.
    public updateTime: number = this.sprite.duration*60; //This is how long the update time is.
    update() {
        this.currentTime += 0.5; //Add to the current time.
        // Number of frames in the sprite sheet
        let frames = this.sprite.frames;
        if (frames > 0) {
            // The time in seconds the sprite sheet should play
            let duration = this.sprite.duration;

            if (this.currentTime > this.sprite.duration*60) { //Check if the current time is more than the wait time.
                this.currentTime = 0.0; //Reset the wait time.
                this.frame++;
                if (this.frame > frames - 1) {
                    this.frame = 0;
                }
            }
        }

    }

}