私は、動いている間にかなりの数のスプライトが互いに重なり合うキャンバスベースのゲームを構築しているところです。私はモバイルデバイスをターゲットにしているので、パフォーマンスが問題になります。
私の場合、キャンバス上のスプライトをアニメーション化するには、基本的に2つの方法があります。
- 少なくとも1つのスプライトが移動/変更されたすべてのフレームでキャンバス全体を消去し、すべてを再描画します。私が見たところ、これはかなり標準的なことのように聞こえます。
- 移動/変更したスプライトのみを消去し、移動/変更したスプライトと、移動/変更したスプライトと重なるスプライトのみを再描画します。移動/変更されたスプライトを消去すると、オーバーラップしているスプライトからチャンクが切り取られるため、オーバーラップしたスプライトを再描画する必要があります。
単純に、2番目のオプションの方がパフォーマンスが向上するようです。描画操作が少ないということは、マシンがしなければならない作業が少ないということですよね？ただし、最初のオプションは（潜在的に）フレームごとに1つのclearRect（）呼び出しを含みますが、2番目のオプションはフレームごとに多くのclearRect（）呼び出しを含みます（それぞれが非常に小さい長方形の場合ですが）。何を消去する必要があり、何が消去されたばかりのものと重複するか。
ですから、少し考えてみると、どちらが速いかわかりません。2番目の方が速い状況もあると思いますし、最初のオプションの方が速い状況もあると思います。
どちらがより速いオプションであるかを今すぐ判断する方法はありますか？それとも、両方の方法で実装し、ベンチマークを実行するのが最善の策ですか？