问题标签 [pixel-perfect]

我正在为我的 Uni 做一个项目，目前我被困在这个网站http://www.andybeaulieu.com/Home/tabid/67/EntryID/160/Default.aspx的像素完美碰撞检测上。我已经下载了使用此碰撞检测的示例项目，即使使用我自己的图片也可以正常工作。我在我的项目中做了同样的事情，但它不起作用。这是我的应用程序的链接：https ://www.cubby.com/pl/LostInTheMath.zip/_dd23e2c827604c068a3fe63ff42d22b2谁能告诉我它有什么问题？谢谢你。

这是主要代码：

In pursuit of pixel perfection the browser seems to be adding an extra pixel to the top and bottom of the following input element but I can't figure out from where.

Chromes magnifying glass shows the element with a total height of 32 and I'm trying to get 30.

It's a typical devise form coded in HAML:

这是我制作的示例设计的屏幕截图：

字母底部和红线之间有 10px 的空间。我正在尝试使用以下代码复制它：

从技术上讲，这段代码应该给我我想要的。但事实并非如此。这是它在 Chrome 中运行的屏幕截图：

由于行高，文本和边框之间有额外的空间。这是 Chrome 上经过检查的屏幕截图：

当我花时间测量由行高引起的字母下的空间时，我可以看到它是一个 9px 的空白区域。因此，要在文本和边框之间留出 10px 的空间，我需要将代码更改为：

对此的解决方案可能是在设计文件中添加带有文本精确高度数量的 line-height 属性。但是，如果文本包含多行，它会搞砸。

这里完成像素完美设计转换的最佳方法是什么？

如何使用带有 GL_LINEAR 过滤的浮动位置在屏幕上滚动纹理四边形“精确像素”？如果我尝试这个任务，如果子像素坐标大于或等于 0.5，我总是可以在非常平滑的移动过程中看到硬像素变化。这看起来非常难看。

我认为问题出在这里，在滚动 0.5 个子像素后，四边形与纹理坐标如此不对齐，以至于 OpenGL 现在需要另一个相邻像素来进行新插值的纹理处理，因此新绘制的子像素与之前渲染的子像素不对齐？！

可能是这里的解决方案，重新对齐位置 > 0.5f 上的纹理坐标？有人可以帮我解决这个问题并计算正确的紫外线坐标吗？如果四边形子像素位置> = 0.5f，我认为紫外线坐标应该移动到一个新位置。

这是屏幕截图的链接，它显示了最后一帧 x=0.5f 上 x 方向（左）的硬像素跳跃。（用strg+鼠标滚轮放大截图）

http://i.stack.imgur.com/n0GVA.png

以下是相关的代码片段：

我尝试过的没有用：

• 为我的四坐标添加 0.5f 的偏移量。这将问题转移到阶段，现在每个完整的 1.0f 子像素位置都会出现一个硬子像素变化。
• 更改 calcTexPos 函数：-> (2.0f*fTexPos+1.0f)/(2.0f*64.0f)
• 检查，如果在驱动程序面板上激活了 MSAA
• 为纹理添加了透明边框而不是复制的边框

我正在开发 BIRT 报告。

该报告需要在像素精确的位置（X 像素处的 X，y 像素处的 Y）具有文本标签。

执行报告是可能的。但看起来 BIRT 使用网格布局，这不可能为报表组件指定精确的像素。

任何样品、想法、建议将不胜感激。

谢谢，

我对 twitter bootstrap 没有太多经验，但是有这么多好评，我决定将它用于我正在从事的一个新项目。

我想知道如何使用这个宽度为 1170 像素的新引导程序获得像素完美的网格。你们是怎么处理的？

我现在处于设计阶段，当我使用引导程序构建它时，我不能确保它能够正常工作，我发现的唯一问题是我无法获得宽度为 12 的偶数列1170 像素。

我所说的网格不是像素完美的意思是列不均匀，其中一些比其他更宽。

让我知道你们是否有任何建议来解决这个问题。

干杯，泰雷兹

我正在开发 XNA 平台游戏，需要一些帮助来解决碰撞问题。游戏发生在一个洞穴中，问题是艺术风格会很粗略，因此地形（洞穴）会有很大差异，所以我不能使用瓷砖。但是我需要检查角色和洞穴的像素完美碰撞，但是当我无法在每个图块周围放置矩形时，我不知道该怎么做，因为没有。

我想了很多想出了一些想法：

- 一个大矩形围绕整个关卡，一个围绕角色，并使用像素完美碰撞。但我认为这不会起作用，因为矩形也会包含背景。

- 手动放置矩形。非常丑陋的代码，可能会导致很多错误和错误。

- 无论如何都要使用瓷砖，并且有数百种瓷砖类型。再次，非常丑陋的代码，它似乎是错误的。

- 使用碰撞引擎。我最好从头开始制作游戏。

如果我解释得不好，我很抱歉，但这是一个相当复杂的问题（至少对我来说），我在网上找不到任何解决方案。很高兴有任何想法，谢谢。

我正在尝试使用绝对定位:before的伪元素来设置我的一些元素的样式。这是我目前实现这一目标的方式：

问题是，当我有一个包含多个这样样式的元素的列表，并且元素具有分数高度height:10.3px时（例如，记住在使用百分比时您也可以得到分数），有时效果会向上或向下移动一个像素。您可以在下面的 Fiddle 中看到这一点：

JS Fiddle 与当前行为

是否可以强制元素始终向上（或向下）四舍五入，因此在浏览器四舍五入后我的元素将始终具有相同的像素高度？

我需要在 iPad 精灵游戏上生成 8 个随机精灵对象。这些对象相当大，并且大小不一。它们不应重叠。如果在场景叠加层上生成的一个将被删除（可选，它会删除底层的一个）。我一直在为 Sprite Kit 寻找像素完美的碰撞检测框架或辅助类。到目前为止，我还没有找到教程或类似的东西。大多数人使用正常的碰撞检测，因为我的对象很大，所以这没有任何帮助。我测试了标准方法，但它创建了矩形，使我的精灵区域更大。这是我的精灵套件模板测试项目：

谢谢你的时间 ：）

Despite passing equal (exactly equal) coordinates for 'adjacent' edges, I'm ending up with some strange lines between adjacent elements when scaling my grid of rendered tiles.

My tile grid rendering algorithm accepts scaled tiles, so that I can adjust the grid's visual size to match a chosen window size of the same aspect ratio, among other reasons. It seems to work correctly when scaled to exact integers, and a few non-integer values, but I get some inconsistent results for the others.

Some Screenshots:

The blue lines are the clear color showing through. The chosen texture has no transparent gaps in the tilesheet, as unused tiles are magenta and actual transparency is handled by the alpha layer. The neighboring tiles in the sheet have full opacity. Scaling is achieved by setting the scale to a normalized value obtained through a gamepad trigger between 1f and 2f, so I don't know what actual scale was applied when the shot was taken, with the exception of the max/min.

Attribute updates and entity drawing are synchronized between threads, so none of the values could have been applied mid-draw. This isn't transferred well through screenshots, but the lines don't flicker when the scale is sustained at that point, so it logically shouldn't be an issue with drawing between scale assignment (and thread locks prevent this).

Scaled to 1x:

Scaled to A, 1x < Ax < Bx :

Scaled to B, Ax < Bx < Cx :

Scaled to C, Bx < Cx < 2x :

Scaled to 2x:

Projection setup function

For setting up orthographic projection (changes only on screen size changes):

For the purposes of the screenshot, nw is 512, nh is 384 (implicitly casted from int). These never change throughout the example above.

General GL drawing code

After cutting irrelevant attributes that didn't fix the problem when cut:

Grid drawing code (dropping the same parameters dropped from 'draw'):

Between the tiles and the platform specific code, vectors' components are retrieved and passed along to the general drawing code as pasted earlier.

My analysis

Mathematically, each position is an exact multiple of the scale*tilesize in either the x or y direction, or both, which is then added to the offset of the grid's location. It is then passed as an offset to the drawing code, which translates that offset with glTranslatef, then draws a tile centered at that location through halving the dimensions then drawing each plus-minus pair.

This should mean that when tile 1 is drawn at, say, origin, it has an offset of 0. Opengl then is instructed to draw a quad, with the left edge at -halfwidth, right edge at +halfwidth, top edge at -halfheight, and bottom edge at +halfheight. It then is told to draw the neighbor, tile 2, with an offset of one width, so it translates from 0 to that width, then draws left edge at -halfwidth, which should coordinate-wise be exactly the same as tile1's right edge. By itself, this should work, and it does. When considering a constant scale, it breaks somehow.

When a scale is applied, it is a constant multiple across all width/height values, and mathematically shouldn't make anything change. However, it does make a difference, for what I think could be one of two reasons:

• OpenGL is having issues with subpixel filling, ie filling left of a vertex doesn't fill the vertex's containing pixel space, and filling right of that same vertex also doesn't fill the vertex's containing pixel space.
• I'm running into float accuracy problems, where somehow X+width/2 does not equal X+width - width/2 where width = tilewidth*scale, tilewidth is an integer, and X is a float.

I'm not really sure about how to tell which one is the problem, or how to remedy it other than to simply avoid non-integer scale values, which I'd like to be able to support. The only clue I think might apply to finding the solution is how the pattern of line gaps isn't really consistant (see how it skips tiles in some cases, only has vertical or horizontal but not both, etc). However, I don't know what this implies.