5

ピクセル グリッドでスプライトをアニメーション化しています。いくつかのオプションがあり、それぞれに長所と短所があります。私はかなりの量の JavaScript の経験 (6 年) を持っていますが、この種の経験はありません。問題は、各オプションがどれだけ高価になるか分からないことです。

スプライトは非常に高速にレンダリングする必要があり、衝突検出を実行しながら同時に少なくとも 5 つのスプライトを実行できるほど安価である必要があります。

理想的には、ラッパー内の要素のグリッドを使用して、多次元配列の各要素に色とアルファ チャネルをレンダリングしたいと考えています。ここでの主な長所は、ピクセルごとの衝突検出を実行し、スプライトの透明部分をクリックして通過できることです。画像ベースのスプライトでは、透明なピクセルをクリックしても onClick イベントが発生します (透明なピクセルを介してクリックを渡すために多くの作業を行う必要があり、非常にコストがかかる可能性があります)。

次のオプションは、css スプライトを使用することです。css-tricks.com/css-sprites/ これは簡単ですが、前述のように、onClicks は透明ピクセルを通過しません。私はおそらくそれを強制することができますが、繰り返しになりますが、費用がかかり、実装するのに多くの時間がかかる場合があります.

もう 1 つのオプションはアニメーション gif ですが、サイズが大きく、色が限られており、アニメーションを制御するのが困難です。私はむしろそこに行きたくない。

そして、html5 の canvas 要素がありますが、これについてはあまりよく知らないので、できれば避けたいと思っています。canvas 要素に関連して自分のコードがどのように機能するかさえわかりません。

では、パフォーマンスに最適なのはどれですか? 最初の (そして最も望ましい) 実行可能なオプションはありますか? それとも私は何かを逃しましたか？

4

2 に答える 2

2

今日のブラウザでは、配置されたピクセルサブ要素からスプライトを構築するためのデスクトップコンピュータで問題ありません（複雑すぎたり大きすぎたりしない限り）。安全のために、アクティブなスプライトは約10個に制限します。 。モバイルでは物事が少し遅くて不格好になるかもしれませんが、あなたが正確な「オンクリック」を必要とするゲームを設計しているように思われることを考えると、これが問題になるとは思えません。

あなたがすでに解決したように、あなたの最も柔軟な賭けはHTML5 Canvasを使用することですが、それはかなり多くのJavaScriptコーディングを必要とします。ただし、このシステムでは、スプライトにさまざまな効果を適用でき、を使用してピクセルの完全な検出を使用getImageData できます（これにより、任意のピクセルオフセットで正確なピクセルの色を読み取ることができます）。

フルスクリーンのキャンバスシステムを使用する際の技術的な問題や課題を回避したい場合は（トリッキーになる可能性があります）、実際には、スプライトと同じ数の小さなCanvas要素を作成して移動できます（HTML要素の使いやすさで）。次に、アニメーションフレームを描画するコードを設計し、前述の方法を使用して（クリックハンドラーとユーザーが相対クリックした場所を計算するためのコードとともに）マウスがスプライトにヒットしたかどうかを通知するだけです。キャンバス要素の位置に）。明らかに、これを一般化された方法で実行して、コードをすべてのスプライトに適用できるようにするのが最善です:)

キャンバスに画像を描画するには、質問で述べたようにスプライトシートを使用drawImage()し、スライスモードをサポートするかなり柔軟な方法を使用できます。setIntervalこれは、またはrequestAnimationFrameスタイルのゲームループに結び付ける必要があります。


更新-非常に最適になりたい人のために

より最適なルート（もう少し複雑です）を利用したい場合は、次のようにすることができます。この方法は、アニメーションのフレームが数フレーム（20または30）しかない、まったく同じスプライトが多数ある場合に役立ちます。

  1. 背景位置をシフトする背景画像スプライトシートを使用して、通常のDIVでスプライトに電力を供給します。これは、ブラウザがすべての作業を行うため、静止画像をスプライトとして保存することを除けば、可能な限り最適です。
  2. スプライトタイプごとに、スプライトシート全体を組み込むのに十分な大きさの非表示のキャンバス要素にスプライトシートを描画します。
  3. ユーザーがDIVスプライトのいずれかをクリックすると、背景の位置を座標として取得し、それらを反転します。次に、キャンバス要素（スプライトのタイプで検索）のどこにピクセルデータが存在するかを知る必要があります。
  4. 非表示のキャンバスでgetPixelDataメソッドを使用して、ユーザーがスプライトをクリックしたかどうかを確認します。
  5. 上記は、使用しているキャンバス要素が1つだけであることを意味します。スプライトの種類ごとに、ブラウザがすべてのグラフィックを処理し、onclickでピクセルの完全な衝突が発生します。

上記が理にかなっていることを願っていますか？

于 2012-10-29T08:50:56.637 に答える
0

イメージ スピリットを 30x30 のセルに分割し、セルが不透明な要素のみを持ち、セルが透明な部分にギャップを残して、クリックが落ちるようにします。ただし、セルをクリックできる場所の精度が少し失われます。

于 2012-10-29T09:01:12.797 に答える