1

HTML 5 JavaScript ゲーム開発を始めたばかりで、requestAnimationFrame ポリフィルを使用する方が良いことを学びました。

関数は理解できますが、その背後にある数学は理解できません。

正確には：

(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame =
    window[vendors[x] + 'CancelAnimationFrame'] ||
    window[vendors[x] + 'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
       var currTime = new Date().getTime();
       var timeToCall = Math.max(0, 16 - (currTime - lastTime));


            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
       };

if (!window.cancelAnimationFrame)
     window.cancelAnimationFrame = function(id) {
       clearTimeout(id);

     };

}());

私が理解していない数学の行は次のとおりです。

var timeToCall = Math.max(0, 16 - (currTime - lastTime));

そのコード行がどのように機能するかについて、誰かが簡単な説明をしてくれると助かります。

メルビン・テフビジュルウ

4

1 に答える 1

0

60fps のフレーム比を維持しようとします。それができない場合は、タイムアウト間隔に 0 を入れます (「できるだけ早く*」)。

1/60 sec = ~0.01666.. sec = ~ 16 ms1 フレームあたりのフレーム レートは 60 fps です。

(currTime - lastTime)は、最後のフレームが表示されてから16 - (currTime - lastTime)の時間です。フレーム間の遅延を 16 ミリ秒または 60 fps に維持したい場合は、次のフレームをスケジュールする必要があります。

最後のフレームの表示に 16 ミリ秒以上かかった場合は、負になります (これは、フレームをミリ秒前16 - (currTime - lastTime)に表示する必要があったことを大まかに意味します)。16 - (currTime - lastTime)この場合、時間を遡ることはできないため、次のフレームができるだけ早く表示されるようにスケジュールするだけです:D

*編集: より正確には、「レンダリングが追いついたらすぐに」である必要があります。詳細については、この質問を参照してください。

于 2013-10-02T10:03:21.450 に答える