问题标签 [pixel-perfect]

我试图在 OpenGL 中使用四边形绘制像素完美的位图……令我惊讶的是，缺少了一行非常重要的像素：（绿色没问题，红色不好）

四边形的大小为 30x30 像素，左上角为红色 2x2。

• 有人可以解释发生了什么吗？
• OpenGL 如何决定将像素放在哪里？
• 我应该选择哪种校正？

纹理使用 GL_NEAREST。

我不使用 glViewport 和 glOrtho。相反，我通过制服将屏幕尺寸发送到着色器：

但这似乎不是问题的根源，因为当我在着色器中添加 (0.5,0.5) 时（相当于第三种情况），问题就消失了......

好的，现在我意识到第三个选项也不起作用：

在我们的 Unity 2017 项目中，我们使用自己的 PixelSnap 函数而不是 UnityPixelSnap。

最近我们发现一些全屏精灵的屏幕尺寸比某些分辨率下的屏幕小一些。
这是我尝试过的所有返回案例的函数

在下一个例子中，正常情况下，屏幕的右边框必须是全黑的。
案例 1,2 和 3 为我们提供了垂直像素线（图片）
但案例 4 给出了正常结果。如果您尝试绘制这些函数，例如，在 Matlab 中，对于任何步骤的任何 _ScreenParams 和数组 coord.xy (-1,1)，您将看到完全相同的图形。

请不要问我为什么使用 Unity 2017 并使用我们自己的 PixelSnap。我是这个项目的新手，我需要发现这个问题。
谢谢大家！

这是 UnityCG.cginc UnityPixelSnap 函数进行比较：

››</p>

我一直在尝试在画布元素上获得像素完美的直线。我已经尝试了许多针对其他 stackoverflow 问题和在 WebGL github repo 上打开的问题提出的解决方案。我仍然不确定我错过了什么。我正在尝试用代表当前缩进的三角形绘制标尺（如文字处理器标尺）。此标尺下方的文本段落应使段落的左缩进与标尺上三角形的位置相匹配。我已经成功地做到了，但并不是尺子上的所有垂直线都非常清晰，有些比其他的略粗。这是我针对这种情况的测试沙箱. 然而，在我的屏幕（具有 1.25 devicePixelRatio）上工作得非常好（关于清晰度）的唯一解决方案在不同 dPR 的屏幕上不起作用（关于标尺大小和与标尺的段落对齐）。适用于我测试过的所有屏幕的解决方案（关于标尺大小和段落与标尺对齐）在我测试过的任何屏幕上都不起作用（关于线条清晰度）。有什么想法可以让垂直线变得非常清晰吗？我当然可以忍受它们并不完美，但我相信最终当生成的图形 ui 界面像素完美时，它会带来更好的用户体验。

我不认为在这里发布 jsbin 示例中的所有代码很有用，但我基本上是在做 mozilla 网站上推荐的事情：

在我最初的任务中，我天真地着手制作一个与现实生活中的单位尺寸完全相同的尺子，直到研究我发现这目前是不可能的（并且被认为对网络标准并不重要）所以我放弃了尝试让尺子匹配现实生活中的单位英寸或厘米（由于此 UI 将成为 Google Docs 插件的一部分，我什至尝试测量 Google Docs 文档顶部的标尺，实际上它与实际单位英寸不对应） . 所以我给了标题“CSS 英寸尺子”，我放弃了尝试真正的单位英寸尺子，并接受了创建“CSS 单位英寸”尺子。但我现在的主要优先事项，除了保持段落和标尺同步之外，是获得像素清晰的线条......

从上述测试中选择“INCHES”和“更大的绘制精度（在我的 1.25 dPR 显示器上）”给了我这个结果： 但是该解决方案仅适用于我的 1.25 dPR 显示器，并且仅在绘制“INCHES”时才有效。

选择“推荐的绘图”（来自 Mozilla 网站的解决方案）使段落与所有显示器上的标尺很好地对齐，但给了我这种垂直线：

我尝试将上下文翻译 0.5，尝试通过 dPR 进行翻译，尝试将需要绘制的线的 x 位置四舍五入，但似乎没有任何效果。有些线条很清晰，有些则不然。（顺便说一句，我只在 Chrome 上进行了测试。）我已经尝试了在此评论末尾提到的 3 步过程，但无论是否舍入，无论是否翻译，都无法正常工作......

我没有尝试过此评论中提到的 getBoundingClientRect ，我不确定我将如何实现它，如果这可能是一个解决方案并且任何人都可以提供帮助，我将不胜感激。随意修改 jsbin 沙盒测试中的代码。

我想用 css 升级我的像素艺术精灵，让它看起来很清晰。但是我有 3 个关于像素艺术和 css 的问题：

1. 默认情况下，放大是模糊的（已经解决了很多次）
2. CSS px 不是屏幕像素的大小（显然无法解决）
3. 我找不到一种方法将我的 img 放大一个整数因子，所以像素保持完美的正方形（我很难做到）

注意：我不想使用 pygame 精灵。

我正在制作一个简单的游戏，我需要一种方法来使用 pygame 中的像素完美碰撞来检测两个图像是否重叠。到目前为止，我找到的所有答案都要求我使用 pygame sprites，我不喜欢使用它，因为我对对象的控制较少。

（这些图像具有透明背景）

我正在使用 pygame 创建俄罗斯方块。我想使用碰撞检测，以便当游戏中的形状与任何其他先前播放的形状接触时，我可以按照俄罗斯方块的逻辑停止该形状。我遇到了使用蒙版的像素完美碰撞。我已经在线学习了一些教程，但是每次新形状发挥作用时，像素检测都会返回真，而不是在任何形状发生碰撞时。提前为长代码抱歉，它是代码实际上并且仍然包含它的游戏元素的最低限度。我认为我的方法有问题导致此错误。我基本上有一个功能，每当游戏中的形状与“地板”接触时，形状就会保持在那个位置并创建一个新的形状。我认为我把它复杂化了，反过来又造成了这个错误。

嗨，我有一个关于 zeplin 的设计，它实现了一个自定义阴影，我试图在 Native Android 上重放它，但高度不够，

zeplin 上的阴影具有以下属性：

在 Godot 中，据我所知，您必须手绘多边形碰撞器或使用像胶囊这样的原始形状。我需要对精灵表上的数百帧进行像素完美碰撞。因此，我需要能够将精灵的位掩码作为对撞机形状给出。就像你可以在 pygame 中做的那样。你如何在 GODOT 中做到这一点？

使用像素完美的相机，我能够以多种分辨率（960x540、1920x1080、3840x2160）获得清晰的图像质量，但我想让它与其他分辨率（如 1366x768）一起使用。有人遇到过类似的问题吗？通常我会改变相机尺寸并保留像素尺寸，但场景非常紧凑和拥挤，几乎没有空间。我可以更改 ppu 或其他属性作为解决方案吗？

我正在使用像这样的精灵表（用于桨）和另一个用于球的精灵表制作乒乓球游戏：

我想要的是仅将红色图像检测为碰撞而不是蓝色图像：

我创建了一个 Spritesheet 类来帮助我处理动画：

所以现在，在我的桨和球课上，我只写：

最后，我尝试用这种代码检测像素完美碰撞：

我不明白为什么我的代码不起作用，我的碰撞就像是一个简单的碰撞