1

重力のある単純なアニメーションを作成したい ( http://jsfiddle.net/2pcr9/4/ chrome と firefox でテスト済み)。私はキャンバスを使ってJavascriptでそれをやっています。重力と速度は、(:46) を使用して可変タイムステップで計算されます。

this.realDelta = (now - this.prevTime) / 1000;
this.realTime += this.realDelta;

各ボールには、速度と位置を計算するための次のコードがあります (:148):

this.vy += this.gravity * time.delta;
this.x += this.vx * time.delta;
this.y += this.vy * time.delta;

現在、このプロトタイプは、ウィンドウを表示しているときに問題なく動作します。

ただし、現在のウィンドウを非表示にする (ブラウザーの別のタブに切り替える) と、window.requestAnimationFrame は停止します。5 秒待ってウィンドウを開くと、window.requestAnimationFrame が再開します。問題は、realDelta が 5 秒になり、速度が大きくなりすぎていることです。

realDelta が 1 秒より大きくならないようにチェックを追加できます (:46):

this.realDelta = (now - this.prevTime) / 1000;
if (this.realDelta > 1) {
    this.realDelta = 1;
}
this.realTime += this.realDelta;

しかし、これは実際には問題を解決しません。

今、これを本当に修正する方法がわかりません。ウィンドウが非表示になっているかどうかを確認し、タイマーを一時停止する必要があります (ウィンドウが再び表示されたらタイマーを再開します)。それとも速度の計算に誤りがありますか? 「dt」が大きすぎるというこの問題を他の html5 ゲームはどのように修正していますか?

ありがとう

4

2 に答える 2

1

Use these jQuery events to start/stop your frame calculations:

(You can try without jQuery--straight javascript, but X-browser stuff will drive you crazy!)

$(window).blur(function(e) {
    // User has changed tabs away from your window
    // So freeze your incrementing until the user returns 
});


$(window).focus(function(e) {
    // User has returned to your tab
    // So begin your incrementing again
});

The only gotcha is in some browsers these events get fired multiple times, so you might want to also set an on/off flag so you just react to the first firing.

于 2013-04-08T16:24:43.370 に答える