キャンバスとCSS3の要素の組み合わせ

Question

私はキャンバスを使用してHTML5ゲームを実装しています。今私はキャンバス上の絶対的な位置を持つHTML要素を使用して、ツールチップ、スピーチバブル、インフォボックスなどのすべてのテキストオーバーレイを作成することを考えています。だから私はCSS3が提供する多くのエフェクトとトランジションを使用できます。

パフォーマンスについてはわかりません。これらのオーバーレイは自由に追加して削除する必要があります（MMORPGのようなものなので、たくさんの吹き出しなどがあります）。

パフォーマンスに関する2つの質問はおそらくあります

1. DOMのトラバーサル追加/削除するには。たぶんキャッシュが助けることができますか？

2. HTMLとCSS3自体。

これらの要素をキャンバス自体で管理し、各フレームを描画することもできます。しかし、CSS3のような同様の効果を得るために、余分なコード、タイムアウト、追加しなければならないものがあるため、パフォーマンスペナルティが発生する可能性があります。とにかく、いくつかのデータ構造のトラバーサルが必要になります。

アドバイス、意見、経験はありますか？

ありがとうございます。

Answer 1

前述の2つの技術のいずれか一方のみを使用することを検討してください。モバイルやタブレットでそのアプリケーションをリリースできるかもしれません。私は、これらのデバイスでは、両方を同時に処理することに問題があると思います。そしてもう一つ：キャンバスにいれば互換性について心配する必要はありません。それは技術的ではありませんが、思考を刺激する答えです。

Answer 2

これにアプローチする1つの方法は、キャンバスオブジェクトの背後にある「ダイナミック」イメージマップを使用することです。次に、必要に応じてdomを使用できます。キャンバスのクリックをイメージマップに渡す必要があります。

Answer 3

HTML5ゲームのUI要素にDOMを使用する最大の理由の1つは、イベント処理です。

キャンバス上にすべてを描画する場合は、クリックを処理し、何がクリックされたかを決定する独自のロジックを作成する必要があります。インターフェイスのレイヤーが複数ある場合は、すぐに非常に複雑になります。

DOM要素（特にjQueryのようなライブラリを使用している場合）では、これは簡単なことです。リッチでインタラクティブなUIを最小限の労力で作成できます。

私が考えることができる唯一の欠点は、特にCSS3を使用している場合、ブラウザの不一致が発生する可能性がありますが、再度jQueryがこれを助けることです。

もう一つの欠点は、いったんDOMルートを終了すると、あなたのゲームは常にブラウザゲームになりますが、100％キャンバスであれば、コードを別の言語に移植する可能性が常にあるということですそれをネイティブにすることですが、それは一部の人にとっては欠点に過ぎないと思います。