1

canvas 要素の使用に問題があり、問題が特定できないようです。

ページが最初に読み込まれると、5 ～ 15 秒ごとにスローダウンが発生します。しかし、しばらく Facebook にアクセスして友達とおしゃべりをしていると、奇跡的にスローダウンがなくなりました。

私の友人も定期的なスローダウンを見て、chrome/firefox を使用しています。

何が起こっているのかわかりません！メモリ リーク/ヒープ プロファイリングについて調べていますが、問題を特定するのに苦労しています。

最初は 1 個のボールしか跳ねませんでしたが、パフォーマンスをテストするために 1000 個のボールを入れることにしました。申し訳ありません :P

EDIT1：わかりました、Firefox（私はクロムを使用しています）で同じコードを実行しようとしましたが、Firefoxでボールの動きが大幅に遅くなり、クロムで見た恐ろしいスタッターを差し引いています...ブラウザが異なるものを使用する原因は何ですかボールのスピード？

WARNING WARNING てんかん WARNING ライブデモへのリンク

これがコードです

4

1 に答える 1

1

リクエスト アニメーション フレームを使用しているため、60 fps を達成しようとします。それができない場合は、60 fps を配信できるようになるまで 30 fps で落ち着きます。つまり、低速化はキャンバスが 30 fps で実行されることであり、60 fps にジャンプすると速度が上がったように見えます。

最初に 30 fps しか出ない理由はさまざまです。私の場合、私のコンピューターは十分に強力ですが、複数のモニターがあり、新しいモニターの新しいウィンドウで例を開いたところです。フルスクリーンでない限り、OS が一度に 1 つのモニターのみを 60 fps に制限していると思われます。 3台のモニターすべてを占有するゲームで。しかし、これはあなたの問題ではありません。パフォーマンスの問題を引き起こす可能性のあるものは数多くあるため、さまざまなセットアップで自分でプロファイルを作成してパフォーマンス テストを実行する必要がある理由の例として、これを使用します。

「スローダウン」と「スピードアップ」が認識される理由の 1 つは、フレームごとに位置を更新しているためですが、フレーム間の時間は、現在のフレーム レートに応じて 33ms から 16ms まで変化します。 . 位置を更新する量の尺度として、すべての更新関数でデルタ時間 (または前のフレームからの経過時間) を使用することをお勧めします。

あなたが持っているもの：

Ball.prototype.update = function() {
  this.x += this.velocity.x;
  this.y += this.velocity.y;
}

ここにデルタ時間を含めたい

Ball.prototype.update = function(deltaTime) {
  this.x += this.velocity.x * deltaTime;
  this.y += this.velocity.y * deltaTime;
}

ここでの唯一の違いは、速度を時間に関連させて表現する必要があることです。たとえば、速度は 1 秒あたり 100 ピクセルで表され、デルタ時間も秒で表されます (約 .016 または .033 の値)。

これで 30 fps が修正されるわけではありませんが、ボールが一定の速度で動くようになります。ページを最初にロードするとき、ブラウザーは、含めている他のすべてのスクリプトをロードし、それらを解析して評価する必要があり、場合によってはガベージ コレクションを起動する必要があります (含まれている jQuery の場合と同様)。jQuery やその他の追加ファイルが必要ない場合は、それらを含めないようにすることができます。

さらに重要なことは、ページがロードされたらすぐに全速力でレンダリングを開始する必要がないことです。ゲームの場合、実際のゲーム レンダリングの前に独自のロード画面とタイトル画面が表示されますが、プレイヤーは 30 fps と 60 fps の違いを見分けることができません。

于 2013-01-21T08:28:35.253 に答える