web-dev-qa-db-ja.com

JavaScriptゲーム開発におけるCanvasとDOMの長所/短所は何ですか?

キャンバスを使用する場合と比較して、「純粋な」DOMでゲームを作成することの長所と短所は何ですか?

35
budzor

canvas長所:

  1. ピクセルを操作してフィルター効果を適用できるため、画像処理が簡単です。
  2. 小さいサイズでも非常に効率的ですが、ゲーム内の何百もの要素
  3. box2dwebなどのcanvasを使用してゲーム用の多くのライブラリを見つけることができ、angrybirdなどの素晴らしいゲームを作成できます。

短所:

  1. ステートレスなので、キャンバス内の要素の状態を記録し、ヒットテストを自分で処理する必要があります。
  2. 非常に大きなサイズでは効率が低いが、ゲーム内にいくつかの要素がある
  3. 素晴らしい能力、大きな責任。描く自由は、すべての描画スタッフを担当する必要があります。幸いなことに、cocos2d-html5、IvanKなど、多くのライブラリがあります。

[〜#〜] dom [〜#〜]長所:

  1. ブラウザによるレンダリングなので、エラーが発生しにくくなります。

短所:

  1. cSSのみで簡単なアニメーションを実行できるため、ゲームは流暢ではありません。
  2. 何百ものDOM要素を操作するのには適していません。
10
tristan

キャンバスを使用すると、「重い」トリックを使用せずに純粋なドームでは実行できない回転などの操作を実行できます。とにかく、domはより高速で、すべてのブラウザーで問題なく使用できます。基本的な操作のみを使用する場合は、domを使用し、それ以外の場合はキャンバスを選択する場合は、ゲームで何を使用するかを考える必要があります。

1
mck89
0
qqryq

Canvasを使用して開発する場合は、GameLoopテクニックを使用する必要があります。これは、すべての要素を常に再描画する必要があるため、非常に面倒です。

DOMを使用して開発する場合、変更されたオブジェクトのみを再描画できるようになり、ブラウザーの実装に苦労することになります。

ゲームにフレームごとにいくつかの変更がある場合は、DOMを使用できます。それ以外の場合は、Canvasを使用してください。それはとても速いです!

0
melanke