JSのスプライトシート/チップセットを分割する高性能の方法は何ですか？

Question

私はhtml/jsの2dワールドエディタに取り組んでおり、チップセットを複数の小さな四角形（チップ）に分割する最良の方法を見つけようとしています。

現在、デフォルトのCSSスプライトシートメソッドと似た方法を使用しています。背景位置を使用して、多くの小さな<div>要素の背景をチップセットの1つの正方形/チップが表示されるまで移動します。

パフォーマンス上の問題はなく、うまく動作していますが、全体的に頑丈な方法です。私はそれをやって考えてきました

他の方法は、多くの一時的なイメージにチップセットをスライスし、それぞれの<image>要素を作る、または<canvas>代わり<div>'sのか<image>'sとにかく

を使用することであろう、私が探しています件名に関するアドバイス：

JSのスプライトシート/チップセットを分割する高性能の方法は何ですか？

チップの例は、あなたが今、それをやっている方法はかなり高速である必要があります

Answer 1

を設定します。キャンバスレベルでは、1つの画像だけを保存してから、drawImageを使用してセクションを描画するだけで、基本的に再実装できます。私の知る限りでは、これは最も一般的な方法であり、非常に高速です。少なくともそれは私が書いたときの私の経験でしたgame engine using canvas.

あなたは追加のDOMオーバーヘッドを持っていないのでキャンバスを使用するほうが高速でメモリ効率が良いでしょう。それを確認する。

あなたが示唆したように、個々の画像の束を作成すると、画像の一部をコピーし、各画像に追加のDOM要素を作成する必要があるため、非常に遅くなります。

要約：キャンバスを使用すると、GPUとほぼ直接インターフェイスしているため、キャンバスの使用が常に高速になります（同等の実装の場合）。複数のサブ画像にコピーするのではなく、1枚の画像から描画することは、重複したメモリを持たず、同じシートから描画している限り、テクスチャを切り替える必要はありません。