問題タブ [pixel-perfect]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
0 に答える
96 参照

silverlight - Silverlight ピクセル完全衝突検出

私は Uni のプロジェクトに取り組んでおり、現在、この Web サイトhttp://www.andybeaulieu.com/Home/tabid/67/EntryID/160/Default.aspxの Pixel Perfect Collision Detection に固執しています。この衝突検出を使用しているサンプル プロジェクトをダウンロードしましたが、自分の写真でも問題なく動作しています。私は自分のプロジェクトで同じことをしましたが、うまくいきません。私のアプリへのリンクは次のとおりです: https://www.cubby.com/pl/LostInTheMath.zip/_dd23e2c827604c068a3fe63ff42d22b2 ありがとうございました。

メインコードは次のとおりです。

0 投票する
1 に答える
956 参照

report - ピクセル精度の位置にある BIRT レポート ラベル

BIRT レポートを作成しています。

レポートには、ピクセル精度の位置 (x ピクセルの X、y ピクセルの Y) にテキスト ラベルが必要です。

Actuateレポートを実行することができます。しかし、BIRT はレポート コンポーネントの正確なピクセルを指定できないグリッド レイアウトを使用しているようです。

サンプル、アイデア、提案は大歓迎です。

ありがとう、

0 投票する
2 に答える
1091 参照

twitter-bootstrap - ピクセル パーフェクト グリッド

Twitter ブートストラップの経験はあまりありませんが、非常に多くの良いレビューがあったので、現在取り組んでいる新しいプロジェクトに使用することにしました。

幅が 1170px のこの新しいブートストラップを使用して、ピクセル パーフェクト グリッドを取得するにはどうすればよいか考えていました。どうやってそれを使っていますか?

私は今のところ設計段階にあり、ブートストラップでビルドしたときにうまく動作することを確認したくありません.私が見つけた唯一の問題は、幅が1170ピクセル。

グリッドがピクセルパーフェクトではないということは、列が均一ではなく、列の一部が他の列より幅が広いということです。

これを回避するための提案があれば教えてください。

乾杯、タレス

0 投票する
1 に答える
3245 参照

c# - タイルを使用しない 2D ゲームでの衝突検出 XNA

私は XNA プラットフォームのゲームに取り組んでおり、衝突の助けが必要です。ゲームは洞窟で行われますが、問題はアート スタイルが大ざっぱで、地形 (洞窟) が大きく異なるため、タイルを使用できないことです。しかし、キャラクターと洞窟のピクセル パーフェクト コリジョンをチェックする必要がありますが、すべてのタイルの周りに四角形を配置できないため、その方法がわかりません。

私はそれについて多くのことを考えてきましたが、いくつかのアイデアを思いつきました:

- レベル全体とキャラクターの周りに 1 つの大きな長方形があり、ピクセル パーフェクト コリジョンを使用します。しかし、長方形には背景も含まれるため、うまくいかないと思います。

-長方形を手動で配置します。非常に醜いコードで、多くのバグやエラーが発生する可能性があります。

-とにかくタイルを使用し、何百ものタイルの種類があります。繰り返しますが、非常に醜いコードで、間違っているようです。

・衝突エンジンを使用。私はできればゼロからゲームを作りたいと思います。

説明が下手で申し訳ありませんが、かなり複雑な問題であり(少なくとも私にとっては)、ネット上で解決策を見つけることができません。どんなアイデアでもとてもうれしいです、ありがとう。

0 投票する
1 に答える
22 参照

html - 絶対配置の子を持つ分数の高さ要素

:before絶対配置の疑似要素を使用して要素のスタイルを設定しようとしています。私が現在これを達成している方法は次のとおりです。

問題は、そのようにスタイル設定された複数の要素を持つリストがあり、要素の高さが分数になっている場合 (たとえばheight:10.3px、パーセンテージを使用すると分数を取得できることを思い出してください)、効果が 1 ピクセル上または下に移動することがあります。これは、次の Fiddle で実際に確認できます。

JS Fiddle と現在の動作

要素を常に四捨五入 (または四捨五入) するように強制することはできますか?それにより、ブラウザーが四捨五入した後、要素は常に同じピクセルの高さになりますか?

0 投票する
2 に答える
966 参照

ipad - スプライト キット (iOS7) のピクセル パーフェクト コリジョン検出はありますか?

iPad スプライト ゲームで 8 つのランダムなスプライト オブジェクトをスポーンする必要があります。オブジェクトはかなり大きく、さまざまなサイズがあります。オーバーレイしないでください。シーン オーバーレイにスポーンされているものは削除されます (オプションで、下にあるものを削除します)。スプライト キットのピクセル単位の完全な衝突検出フレームワークまたはヘルパー クラスを探していました。これまでのところ、チュートリアルなどは見つかりませんでした。オブジェクトが大きいため、ほとんどの人は通常の衝突検出を使用していますが、これは役に立ちません。私は標準的なアプローチをテストしましたが、私の場合はスプライト領域をさらに大きくする長方形を作成します。これは私のスプライト キット テンプレート テスト プロジェクトです。

御時間ありがとうございます :)

0 投票する
1 に答える
1131 参照

java - OpenGL の Ortho の同一の頂点間のこれらのピクセル ギャップの原因は何ですか? どうすればそれらを排除できますか?

「隣接する」エッジに等しい (正確に等しい) 座標を渡すにもかかわらず、レンダリングされたタイルのグリッドをスケーリングすると、隣接する要素間に奇妙な線ができてしまいます。

私のタイル グリッド レンダリング アルゴリズムはスケーリングされたタイルを受け入れるので、他の理由の中でもとりわけ、同じ縦横比の選択されたウィンドウ サイズに一致するようにグリッドのビジュアル サイズを調整できます。正確な整数といくつかの非整数値にスケーリングすると正しく動作するように見えますが、他の値については一貫性のない結果が得られます。

いくつかのスクリーンショット:

ブルーのラインは透けて見えるクリアカラーです。未使用のタイルはマゼンタで、実際の透明度はアルファ レイヤーによって処理されるため、選択したテクスチャにはタイルシートに透明なギャップがありません。シート内の隣接するタイルは完全に不透明です。スケーリングは、1f と 2f の間のゲームパッド トリガーによって取得された正規化された値にスケールを設定することで実現されるため、最大/最小を除いて、ショットが撮影されたときに実際に適用されたスケールはわかりません。

属性の更新とエンティティの描画はスレッド間で同期されるため、描画中に値が適用されることはありませんでした。これはスクリーンショットではうまく伝わりませんが、その時点で縮尺が維持されている場合は線がちらつかないため、論理的には、縮尺の割り当て間の描画で問題になることはありません (スレッド ロックによりこれが防止されます)。

1x にスケーリング:

1x

A にスケーリング、1x < Ax < Bx :

斧

B にスケーリング、Ax < Bx < Cx :

Bx

C にスケーリング、Bx < Cx < 2x :

Cx

2倍にスケーリング:

2倍

投写設定機能

正射投影を設定する場合 (画面サイズが変更された場合のみ変更):

スクリーンショットでは、nw は 512、nh は 384 です (int から暗黙的にキャストされます)。これらは、上記の例全体で変わることはありません。

一般的な GL 描画コード

カットしても問題が解決しなかった無関係な属性をカットした後:

グリッド描画コード (「draw」から削除されたものと同じパラメーターを削除):

タイルとプラットフォーム固有のコードの間で、ベクトルのコンポーネントが取得され、以前に貼り付けた一般的な描画コードに渡されます。

私の分析

数学的には、各位置は、x 方向または y 方向、またはその両方の scale*tilesize の正確な倍数であり、グリッドの位置のオフセットに追加されます。次に、オフセットとして描画コードに渡され、glTranslatef を使用してそのオフセットを変換し、寸法を半分にしてその位置を中心にタイルを描画し、各プラスとマイナスのペアを描画します。

これは、タイル 1 が原点で描画されるとき、オフセットが 0 であることを意味します。次に、OpenGL は、左端が -halfwidth、右端が +halfwidth、上端が -halfheight のクワッドを描画するように指示されます。 、および +halfheight の下端。次に、隣接するタイル 2 を 1 幅のオフセットで描画するように指示されているため、0 からその幅に変換し、-halfwidth で左端を描画します。これは、座標的に tile1 の右端とまったく同じである必要があります。それ自体で、これは機能するはずです。等尺で考えるとなんとなく壊れます。

スケールが適用されると、それはすべての幅/高さの値に対して一定の倍数であり、数学的には何も変更されません。ただし、次の 2 つの理由のいずれかが考えられるため、違いはあります。

  • OpenGL はサブピクセルの塗りつぶしに問題があります。つまり、頂点の左側を塗りつぶしても、頂点を含むピクセル空間が塗りつぶされず、同じ頂点の右側を塗りつぶしても、頂点を含むピクセル空間が塗りつぶされません
  • float の精度の問題が発生しています。どこかとX+width/2等しくなく、 tilewidth は整数で、X は float です。X+width - width/2width = tilewidth*scale

どれが問題であるかを判断する方法、またはサポートできるようにしたい整数以外のスケール値を単に回避する以外にそれを修正する方法についてはよくわかりません。解決策を見つけるために適用できると思われる唯一の手がかりは、行のギャップのパターンが実際には一貫していないことです (場合によってはタイルをスキップする方法、垂直または水平のみで両方ではないなど)。ただし、これが何を意味するのかはわかりません。