HTMLキャンバス/ Javascript用のFPSロック

Question

私はHTML Webサイト上で作成したスプライトシートでフレームアニメーションでフレームを作成しようとしていましたが、アニメーション用にfpsをロックする方法がわかりませんでした。私はDate.now（）メソッドとsetIntervalメソッドを使用しようとしましたが、そうは見えません。当分の間働いています。

このアニメーションを使用している方法は、私が作った4フレームのアニメーションをアニメートすることをコミットするように配列をチェックすることにも依存しています。 ここに私が使ってきたコードがあります。

function animateCharacter() { 
    var canvas = document.getElementById("portrait"); 
    var context = canvas.getContext("2d"); 
    var character = new Image(); 
    character.src = "/assets/spritesheet.jpg"; 
    animate(); 
    function animate() { 

     context.drawImage(character, shift, 0, width, height, 300, 0, width/2, height/2); 

     if (currentFrame == totalFrames) { 
      shift = 0; 
      currentFrame = 0; 
     } 
     requestAnimationFrame(animate); 

} 

Answer 1

あなたがsetTimeoutメソッドを試すことができます

function animate(){ 
// do your animation 
//  workout your frame rate 
    setTimeout(animate, 500); 
}; 
animate(); 

Answer 2

あり、これを解決するために複数の方法がありますが、一般的なアイデアは、あなたのRAFのコールバックで持ってHighResTimeStampをチェックし、応じて自分の価値観を更新することですそれに。ここで

は、少なくとも1つのフレームが経過した場合にのみ更新します、そしてそれは、それはその速度値をスケールする必要がありますどのくらいのことで知っているので、update機能にTIME_DELTAに合格するダミーの実装です。

const ctx = c.getContext('2d'); 
 

 
// we need to know when the last frame did trigger 
 
let lastTick = performance.now(); 
 
function anim(time){ 
 
    const time_spent = time - lastTick, 
 
    passed_frames = time_spent/(1000/FPS.value); 
 
    if(passed_frames >= 1){ 
 
    update(passed_frames); 
 
    lastTick = time; 
 
    draw(); 
 
    } 
 
    requestAnimationFrame(anim); 
 
} 
 

 
let x = 0; 
 
const speed = 5; 
 
function update(time_delta){ 
 
    x = (x + (speed * time_delta)) % (c.width - 10); 
 
} 
 
function draw(){ 
 
    ctx.clearRect(0,0,c.width,c.height); 
 
    ctx.fillRect(x, 50, 20, 20); 
 
} 
 

 
anim(performance.now());

<label>FPS: 1<input id="FPS" type="range" min="1" max="120">120</label><br> 
 
<canvas id="c"></canvas>

これはちょうど行うことができ、多くの実装の1つであることに注意してください、我々はまた、このTIME_DELTA値を四捨五入している、および/またはさえためのループでupdateを実行した可能性があり、または...