javascript - canvas2d ゲームを高速化するには?

Question

私はhtml5 canvas2dゲームに取り組んでいます。ゲームが複雑なほど、FPS カウントは低くなります。シーンでは画像を使用しません。FPSを向上させるためのトリックやプラクティスはありますか?

前もって感謝します、

score 2 · Accepted Answer

あなたの質問は具体的ではありませんが、複数のキャンバスを重ねて配置することで、キャンバスアプリ/ゲームを改善しました。
このようにして、キャンバスの変更されていない部分の不必要な再描画を避けることができます。

ゲームに 20 人のプレイヤーがいるとします。それらの 1 つが移動した場合は、画像全体を更新するのではなく、そのレイヤー (独自のキャンバス) のみを更新する必要があります。

これは、 kinetick.jsを含む多くのキャンバスライブラリで使用されている手法であり、アプリの速度を大幅に向上させます。

また、ゲームループをブラウザの再描画イベントと同期する必要があります。プレーンオールの代わりにリクエストアニメーションフレームsetintervalを使用します。

score 2 · Accepted Answer

最初のステップは、ゲームのプロファイリングです。ここに良いチュートリアルがあります: http://nicolahibbert.com/optimising-html5-canvas-games/には、HTML ゲームの最適化のためのいくつかの必須ルールがあります。

score -1 · Accepted Answer

ゲームを最適化するためにできることはたくさんあります。多くの場合、違いを生むことができるのはほんの少しの改善です。

注意すべき点

複数のキャンバスを使用する（すでに述べたように）
ガベージコレクション：JSガベージコレクションは、ゲームを途切れさせる可能性があります。これはそれ自体が主題ですが、できることの1つは、オブジェクトの作成を可能な限り制限し、オブジェクトを再利用することです。

例

// This...
test = [];

// ...Is better than this
test = new array()

例えば

var i = nodes.length();
while (i--) {
    // ...do stuff...
}

3 に答える 3