6

X 軸と Y 軸の両方で移動するさまざまなオブジェクトのアニメーションの次のフレームを計算する関数 [私はそれを呼び出しますframeRender()] と、その結果のフレームをオブジェクトに適用する関数[私はそれを呼び出しますframeDisplay()] があります。オブジェクトはポイント A から B に移動するだけでなく、絶えず移動し、常に新しいターゲット座標を受け取ります。setInterval()間隔を空けて aを使用してい1000/frameRateますが、ブラウザには正確なタイミングがないため、まったく機能していないようです。

問題は、アニメーションのフレーム レートが一定で、すべてのブラウザ、すべてのシステムで同じ速度で実行されるようにするにはどうすればよいかということです。私はすべてを試しましたが、異なるブラウザーでも正確な結果が得られないようです (私は Firefox と Chrome でテストしましたが、Chrome は通常、はるかに高速に表示されます)。

frameDisplay()結果は次のようになります: 再生が遅い場合、最初はアニメーションの間隔が短くなり、DOM の表示が遅い場合は、正しく再生されるまでいくつかのフレームを [スキップして] スキップします。再生が速くなると、アニメーションの間隔が長くなり、アニメーションが正しい速度で再生されます。

しかし、ブラウザーがいつ遅くなったり、いつ高速に動作するかを常に確認できるわけではないため、これらすべての一貫性を維持するにはどうすればよいでしょうか。たとえば、動きに大きなスパイクがあり、フレーム レートを一定に保つために間隔を短くすると、突然ほとんどの動くオブジェクトが停止するか、ほとんど動かなくなると、突然、非常に高速に実行されます。

何か案は？

4

3 に答える 3

7

問題は、アニメーションのフレーム レートが一定で、すべてのブラウザ、すべてのシステムで同じ速度で実行されるようにするにはどうすればよいかということです。

フレームレートについては何もできません。制御できる唯一のことは、経過時間に基づいてアプリケーションがどのように更新されるかです。これはブラウザ以外でも同様であり、ゲーム開発では共通のトピックです。

最善の方法は、更新間のデルタ (読み取り: 時間差) を追跡することです。

(function () {
    function getTime() {
        return new Date().getTime();
    }
    var last = getTime();

    function update(delta) {
        // Update your application state on delta (ms of time passed)
    }

    (function loop() {
        update(last = getTime()-last);
        render();
        setTimeout(loop, 20); // 20 = attempt 50fps
    }());
}());

ここで setTimeout を使用していることに注意してください。これは、loop() が非同期で呼び出されるのを避けるためです。setInterval は、前の呼び出しが終了していなくても、それを起動し続けます。

于 2010-06-28T22:41:52.900 に答える
3

Glenn Fiedlerによる素晴らしい記事はこちらです。Javascript に変換するには少し調整が必要ですが、原則は同じです。基本的には、デルタ タイミングを加算するアキュムレータを使用し、それに基づいてステップを実行する必要があります。物理演算などを変更する必要はありません。ソリューションはプラグ アンド プレイです。また、吃音を除去するクールな補間機能も備えており、超スロー スムーズ モーション (リプレイなど) も可能です。それは素晴らしく、物理的に機能し、あらゆるステップベースのモーションで機能するはずです. 基本的に、正確なタイミングのゲーム モーションに必要なものはすべて揃っています。

于 2010-06-29T12:25:35.940 に答える
2

アニメーションをシステム時間と同期させることができます。

現在のシステム時刻を変数に保存します。すべてのフレームで、現在の時間が画像チェックを再描画する必要があります-変​​数がデルタ時間と等しい場合。次に、アニメーションを再描画します。そうでなければ、この違いを待ちます

于 2010-06-28T22:46:33.503 に答える