1

私は、プレイヤーがカードをクリックして画面上で任意の方向にドラッグできるゲームに取り組んでいます。一度に合計 64 枚の 100x80 のオーバーラップ カードが 800x800 のキャンバスにあり、それぞれが手続き型ドローです。おそらく疑う人もいると思いますが、canvas は移動ごとにそのキャンバス全体を再描画することを好みません。これを回避するために、バッファ キャンバスを使用してカードを描画し、drawImage(). 描画が蓄積されないようにするために、 をdrawImage()使用する予定のキャンバスの領域をクリアしclearRect()ます。

私が経験している問題は、clearRect()とに使用される (x,y) 座標がマウスの位置から来ているため、ユーザーの動きが速すぎると、座標が最後に実行された時刻drawImage()とは異なることです。次の描画シーケンス中に呼び出されます。結果は、カードがドラッグされている速さに比例して、最後のシーケンスからの残りのドローです。drawImage()clearRect()

からの (x,y) 座標を維持し、次のシーケンスでdrawImage()(現在のマウスの位置の代わりに) それらを使用しようとしました。clearRect()ただし、残差ドローが表示される代わりに、残差クリア (消去) が表示されるようになりました。

どうすればこれに対処できるか考えていますか?

注: 私のアニメーション レートはRequestAnimationFrame、 ではなく を使用して処理されSetInterval()ます。

4

1 に答える 1

2

ドラッグ ドロップ操作中にキャンバスが静的であると仮定すると、パフォーマンスを大幅に向上させる非常に簡単な方法は、レンダリングをキャッシュすることです。

つまり、ドラッグ ドロップ操作が開始されたら、現在のキャンバスを別のキャンバスに保存します。カードのドラッグに関連するものを除いて、すべてのレンダリングを停止します。これで、再描画が必要なときはいつでも、コピー キャンバスから再描画できます。基本的にはコピーしているだけなので、かなり高速です。

各処理サイクルで、ドラッグされたカードの現在の位置を取得し、コピーからのデータで埋めてから、ドラッグされたカードを新しい位置に再描画します。

あなたが試すことができる他のアプローチは、ドラッグにある種のプレースホルダーを使用することです. たとえば、ドラッグ中に表示する同じサイズの DIV を使用することを検討してください。これには、ドラッグ中にキャンバスに触れる必要がないという利点があるため、パフォーマンスも向上します。

于 2012-04-04T19:26:14.627 に答える