1

私は小惑星をあからさまに食い物にしようとしていますが、深刻なメモリ管理の問題に直面しています。

私は window.requestAnimationFrame を使用して、「gameloop」関数に自分自身を引数として requestAnimationFrame を呼び出すことで、ゲームのフレームを提供しています。ただし、ゲームのメモリ使用量が膨大で、ガベージ コレクションが頻繁に発生し、パフォーマンスが低下するため (およびそれに関連する典型的なノコギリのメモリ使用パターン)、私は何か非常に間違ったことをしているに違いありません。この問題の理由は、関数とコールバックのこのループによって多くの関数オブジェクトが作成されていることだと確信しています。おそらく、再利用される代わりに関数が作成される無害なステートメントです...おそらくゲームループ関数. ..

この投稿からこのアイデアを得ました: https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript

ここに私のコードを載せた jsfiddle があります: http://jsfiddle.net/LEqUr/ (新しい小惑星を表示するには、フォーカスのあるウィンドウでスペースを押してください)。私の作品のいくつかはキャメルケースであり、いくつかはアンダースコアで行われていることを知っています-申し訳ありません.

これが（私が思うに）コードの最も関連性の高い部分です：

var gameLoop = function () {
    getSetStageSize(1, 1);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    updateGameState();
    window.requestAnimFrame(gameLoop);
}

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       function (callback) {
               window.setTimeout(callback, 1000 / 60);
           };
})();

以上のことを踏まえて、私のコードがどのように構成されているかについてのフィードバック（間違いなくいくつかの作業を使用する可能性があります）、コールバックに関する情報、クレイジーなネストされたコールバック内でオブジェクトがどのように/いつ作成されるかに関する情報、およびその他の役立つ情報を本当に求めていますあなたが持つかもしれないアドバイス。

ありがとう！

4

1 に答える 1

0

アニメーション固有の部分についてはよくわかりませんが、最後の部分を少し単純化できます。ローカル変数を宣言していないため、IIFE は必要ありません。

window.requestAnimFrame = (
    window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    function (callback) {
        window.setTimeout(callback, 1000 / 60);
    }
);

それ以外に、setTimeout の代わりに setInterval を舞台裏で使用するようにコーディングすることを検討する必要があるかもしれません。setTimeout を使用すると、フレームあたりの実際の時間は、タイムアウトからの (100/60) に、コードがそのフレームを処理するのにかかる時間を加えたものになります。一方、setInterval は、舞台裏の実際のクロックをより認識しており、フレーム間のタイムアウトを調整して処理時間を補正します。

于 2013-09-10T21:38:53.060 に答える