JavascriptをrequestAnimationFrameのフレームレート

Question

私はシート上の唯一の4つの画像これは私のコードであるとspritesheetをアニメーション化するrequestAnimationFrameのメソッドを使用していスプライトシートのアニメーションを持っていますだから、私はfpsを遅くしたい。私は、setIntervalまたはDate（）のいずれかを使用して、さまざまな方法でいくつかの記事を読んできました。私はコードが正しく動作するように見えることはできません。誰でも助けてください。 は、ここで私は私のコードにマージしようとした記事の一つである：「ゲームループ」だから私はアニメーションが離れて形成を制御するために使用したいものを http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/

Answer 1

var lastRender = 0; 
var counter = 0; 
function render(time) 
{ 
    //checks to see if enough time has passed 
    if(time - lastRender<16){requestAnimationFrame(render);return;} 
    lastRender = time; 
    counter++; 
    if(counter %20 && counter != 0) 
     animation(); 
    if(counter >= 60) 
     counter=0; 
    requestAnimationFrame(render); 
} 
requestAnimationFrame(render); 

あなたは今、異なる速度でそれらを持つことができ、あなたのロジックが60fpsのにとどまるので、これはあなたのスプライトをより細かく制御することができます。

Answer 2

一般に、Game Engineの場合、レンダリングの速度がロジックの速度と異なることが必要です。

ロジック速度が単にできるだけ早く

たsetIntervalとしてあるべきである（論理0）。 //は、可能な限り高速

OR

SETTIMERとして動作します（ロジック、0）; //ロジックは、（）あなたがそれを持っているように一方のレンダリングなどの高速レンダリングがrequestAnimationFrameの（レンダリング）//あたり

を行われているように、残るべき

（私はこれは一般的に優れていると思います）、再びこれを実行しますレンダリングフレーム

ただし、requestAnimationFrameはマシン間では不安定で、ほとんどの場合、ユーザーのハードウェアによっては60フレーム/秒が実行されます。

この場合、一貫性を保つために、一貫したTIMEまたはsetTimeoutに基づいてアニメーションを作成する必要があります。アニメーションで

あなたは

VAR日=新しいDate（）、//日付オブジェクトのようなものを使用することができ

ミリ秒=のdate.getMilliseconds（）、// 0 - 2番目の999

totalSpriteFrames = 4

フレーム= Math.floor（ミリ秒/（1000/totalSpriteFrames））。 //秒を4つのフレームに分割します

最適化のためにアニメーションスコープの外に日付オブジェクトを作成します。この計算を使用して、スプライトがオンになっているフレームを簡単に選択できます。これを複数のスプライトに使用して、 "totalSpriteFrames"だけを変更することもできます。

これは、多くのフレームを含むフレームの重いスプライトで終わる場合にスケーラブルです。