HTML5 Canvasゲームのダブルバッファリング？

私のシンプルなキャンバスゲームは、Chromeでは正常に動作し、Mac / LinuxではFFで動作するようです。スマートフォンやWindows環境でテストする機会はまだありません。ダブルバッファリングは使用しませんが、それを使用するJS Canvasの例をいくつか見ました。

ダブルバッファリングの使用はいつ推奨されますか？特定のブラウザでのみ違いがありますか？重大なパフォーマンスヒットはありますか？

ありがとう！

— ペテリ・イエタビルタ
ソース

OT：このゲームのルールは、非常に有望で、良い仕事です（多くの場合、インターフェイスでさらに作業をしなければならない、いくつかのことは明確ではありません、など）

— o0 '。

それは確かにかなり甘いです。ただし、スペース以外のレベルにマップレベルを切り替えることをお勧めします。ブラウザウィンドウを毎回スクロールするのは面倒です。

— michael.bartnett

また、ステアリングに矢印キーを使用しないでください。現在、セーフモードで、小さな画面で画面全体をスクロールし続けています... fyi：p

— Tor Valamo

ブラウザウィンドウがキーに作用しないようにキーをキャプチャすることは可能だと思います。

— AttackingHobo

ありがとう！A、W、D、およびリターンも動作するようになりました。ツイートをmomentumracerに送信するか、petteri @ momentumracer.comに電子メールを送信して、コメントやアイデアを追加してください。チャットボードになりません。

— ペッテリヒエタビルタ

回答:

キャンバスベースのゲームをダブルバッファリングすると、確かにパフォーマンスが低下します。フレームごとにキャンバスのサイズに等しいピクセルを追加で描画します。キャンバスベースのゲームでは、ほとんどの場合、キャンバスへの描画が最大のボトルネックであり、特にモバイルデバイスでは、できる限り制限する必要があります。

Chromeには、GPUアクセラレーション（最新バージョン）と、モバイル環境では見られないほど優れた高速JavaScriptエンジン（V8）が搭載されています。Chromeでも、ダブルバッファリングを実装すると速度が低下します。

簡単に言えば、ダブルバッファリング（ "ティアリング"に対処する）の利点は、おそらく最も高いパフォーマンスヒットに値しません。

— ジェフ
ソース

ただし、ちらつきなどに気付いた場合は、ダブルバッファーがこれを修正する可能性が高いです。あなたの質問に答えるには：ちらつきに気付いたら、ダブルバッファーを使用することをお勧めします。そうでなければ理由もありません。ダブルバッファは実装や削除が簡単であることに注意してください（パフォーマンスの低下がちらつきよりも大きいことに気付いた場合）。

— user8363

html5ゲームをダブルバッファリングする必要はありません。ブラウザは、スクリプトの実行後にのみキャンバスオブジェクトを更新することで、これを既に処理します。http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html

— G1i1ch
ソース

私はこのようなダブルバッファリングを行うことを使用していることに気付きました：

見えないキャンバスにすべてを描く
非表示のキャンバスを実際のキャンバスにコピーします

実際には、レンダリング速度を上げるのではなく、レンダリングを遅くします（fpsを下げる）

— シルバームーン
ソース