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

Question

我有一个精灵渲染器，它告诉我的游戏引擎如何渲染一个精灵。这个类中的更新方法大约每秒被调用120次。以这种速度运行精灵表实在太快了。

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

我不确定如何计算这与update运行120次每秒，和一个精灵表，应该持续x秒，直到它重新开始。

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;
                }
            }
        }
    }
}

Answer 1

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

我从来没有做过任何类型脚本，但这可能工作。它至少会让你对我所说的有个大概的了解。

如果更新运行120次每秒，这意味着它运行每60/120秒0.5.

现在我们可以增加currentTime 0.5和检查如果currentTime> 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;
                }
            }
        }
    }
}