12

キャンバスを使用して HTML5 ゲームを実装しています。現在、キャンバス上の絶対位置を持つ HTML 要素を使用して、ツールチップ、吹き出し、情報ウィンドウなどのすべてのテキスト オーバーレイを作成することを考えています。そのため、CSS3 が提供する多くのエフェクトとトランジションを使用できます。

しかし、私はパフォーマンスについて確信が持てません。これらのオーバーレイは頻繁に追加および削除する必要があります (これは MMORPG のようなものなので、吹き出しなどがたくさん表示されます)。

パフォーマンスに関しては、おそらく 2 つの質問があります。

  1. 追加/削除する DOM トラバーサル。多分キャッシュが役立つでしょうか？

  2. HTML と CSS3 そのもの。

もう 1 つのオプションは、キャンバス自体でこれらの要素を管理し、フレームごとに描画することです。しかし、CSS3 のような同様の効果を得るために追加しなければならない余分なコード、タイムアウトなどのために、パフォーマンスが再び低下する可能性があります。とにかく、何らかのデータ構造のトラバーサルが必要になります。

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

前もって感謝します。

4

3 に答える 3

2

上記の 2 つのテクノロジのいずれかのみを使用することを検討してください。そのアプリケーションをモバイルまたはタブレットでリリースできるかもしれません。これらのデバイスでは、両方を同時に処理するのに問題があると思います。もう 1 つは、canvas にとどまっていれば、互換性について心配する必要はありません。それは技術的ではありませんが、示唆に富む答えです。

于 2012-09-12T08:50:44.660 に答える
1

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

キャンバスにすべてを描画する場合、クリックを処理し、クリックされたものを決定するための独自のロジックを記述する必要があります。これは、インターフェイスのレイヤーが複数ある場合は特に、すぐに非常に複雑になる可能性があります。

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

私が考えることができる唯一の欠点は、特に CSS3 を使用している場合にブラウザーの不整合が発生する可能性があることですが、ここでも jQuery が役立ちます。

もう 1 つの欠点は、DOM ルートをたどると、ゲームは常にブラウザ ゲームになることですが、100% キャンバスの場合は、コードを別の言語に移植してネイティブにする可能性が常にあるということです。 、しかし、それは一部の人にとってはマイナス面に過ぎないと思います。

于 2012-08-31T08:50:20.087 に答える
0

これにアプローチする 1 つの方法は、canvas オブジェクトの背後にある「動的な」イメージ マップを使用することです。その後、必要に応じて dom を使用できます。キャンバス上のクリックをイメージ マップに渡す必要があることに注意してください。

于 2012-04-10T10:11:33.923 に答える