フレームレートよりも遅いキャンバスにスプライトシートを表示

Question

私はスプライトをレンダリングする方法をゲームエンジンに知らせるスプライトレンダラーを持っています。このクラスの更新メソッドは約120回/秒と呼ばれます。そのスピードでスプライトシートを実行するのは速すぎます。

私のスプライトクラスには、durationと呼ばれるプロパティがあります。このプロパティは、スプライトが再生される秒数をレンダラーに通知します。最後のフレームに達したら、最初からやり直す必要があります。

を1秒間実行すると、最初に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; 
       } 
      } 
     } 

    } 

}