javascript - HTML5キャンバス衝突検出「globalCompositeOperation」のパフォーマンス

Question

朝、

過去数か月間、私はHTML5 Canvas APIをいじくり回しており、それを行うのは非常に楽しいものでした。

私は、ゲーム開発のすべきこととすべきでないことを自分自身に教えるためだけに、いくつかの小さなゲームを徐々に作成してきました。私は基本的な衝突検出、つまり円とプラットフォーム間の衝突を実行できるようになりました（ほとんどの場合、かなり単純ですが、最初に機能させたときはかなりの成果のように感じました。実際に起こっています）。多くのシナリオで上記の方法を使用して十分な結果を得ることができ、この方法は明らかにリソースにかなりの費用がかかるため、ピクセル衝突検出がすべてのゲームに適しているわけではないことを私は知っています。

しかし、私はちょうど脳波を持っていました（おそらく他の誰かがこれを考えていて、私はフィールドのずっと下にいますが、私はそれをグーグルで検索しましたが何も見つかりませんでした）...だからここに行きます...

キャンバスの「globalCompositeOperation」機能を使用/利用することは可能でしょうか。私の最初の考えは、メソッドを「xor」に設定してから、キャンバス上のすべてのピクセルの透明度をチェックすることでした。ピクセルが見つかった場合は、衝突が発生している必要があります。右？明らかに、この時点で、問題のピクセルがどのオブジェクトによって占められているか、およびどのように反応するかを理解する必要がありますが、他の手法ではこれを行う必要があります。

それは、形状が重なっているときに解決するために、キャンバスがすでに舞台裏でこの衝突検出を行っているということですか？これを拡張することは可能でしょうか？

何か案は？

ゲイリー

Answer 1

キャンバスはこれを自動的に行いません (おそらく b/c まだ初期段階です)。easyeljsは、マウスの開始/終了イベントに対してこのアプローチを採用していますが、非常に非効率的です。私は境界を決定するためにアルゴリズム的アプローチを使用しています。次に、それを使用して、マウスが形状の内側にあるか外側にあるかを確認します。理論的には、この方法でヒット検出を実装するには、両方の形状のすべてのポイントを取得し、それらが他の形状にあるかどうかを確認するだけです。私のコードの一部を見たい場合は、お知らせください

ただし、あなたの方法は非常に非効率的ですが、あらゆる形状にグローバルに適用できると言えます。

Answer 2

あなたが言及したように、globalCompositeOperation設定されたオフスクリーンキャンバスを使用して衝突検出を行うコードペンでデモを作成しました。xorコードは短くてシンプルで、小さい「衝突キャンバス」で十分なパフォーマンスが得られるはずです。

http://codepen.io/sakri/pen/nIiBq

Answer 3

Xor モードのフルスクリーンを使用している場合、2 番目のステップはスクリーンの ImageData を取得することです。これはコストの高いステップです。次のステップは、衝突に関与したオブジェクトを見つけることです。
ベンチマークする必要はありません。遅すぎるでしょう。

むしろ、「古典的な」バウンディング ボックス テストを使用してから、オブジェクトの内部 BBOxes のテストを使用することをお勧めします。これは、ローカルでピクセルを取得した後でのみ行います。
内側の境界ボックスとは、オブジェクトの内側に完全に収まる長方形を意味します。この例では赤みがかった部分です。

したがって、この混合戦略を使用してください:
- オブジェクトのバウンディング ボックスでテストを行います。
- 2 つの BBox の間に衝突がある場合は、内側のバウンディング ボックス テストを実行します。
- 次に、本当に問題のある場合にのみピクセル パーフェクト テストを維持し、大きい方のスプライトのサイズを持つ一時的なキャンバスに両方のスプライトを描画するだけで済みます。はるかに高速な getImageData を実行できるようになります。このステップで、どのオブジェクトが衝突に関与しているかがわかります。

より小さなキャンバスにスケールを指定してスプライトを描画すると、解像度は低くなりますが getImageData を高速化できることに注意してください。
必ずスムージングを無効にしてください。すでに 8X8 のキャンバスで十分だと思います (実際には、スプライトの平均速度に依存します。スプライトが遅い場合は、解像度を上げてください)。
そうすれば、データは 8 X 8 X 4 = 256 バイトの大きさになり、良好なフレームレートを維持できます。

また、内側の BBox を計算する方法を決定するときに、指定された数の空のピクセルがその内側の BBox に入るのを許可し、精度と速度を犠牲にすることもできます。