标签: pixel-perfect

我正在研究2d引擎.它已经工作得很好,但我不断得到像素错误.

例如,我的窗口是960x540像素,我从(0,0)到(959,0)画一条线.我希望扫描线0上的每个像素都会被设置为一种颜色,但是没有:最右边的像素没有被绘制.当我垂直绘制到像素539时,同样的问题.我真的需要绘制到(960,0)或(0,540)来绘制它.

由于我出生在像素时代,我确信这不是正确的结果.当我的屏幕大于320x200像素时,我可以从0到319以及从0到199进行绘制,我的屏幕将会满.现在我最终得到一个没有绘制右/底像素的屏幕.

这可能是由于不同的原因:我期望将opengl线基元从像素绘制到包含像素,最后一个像素实际上是独占的？是吗？我的投影矩阵不正确？我有一个错误的假设,当我有一个960x540的后备缓冲区时,实际上有一个像素更多？别的什么？

有人可以帮帮我吗？我一直在研究这个问题很长一段时间,每当我认为它没问题的时候,我看了一会儿它实际上没有.

这是我的一些代码,我试图尽可能地删除它.当我调用我的线函数时,每个坐标都加上0.375,0.375,以使它在ATI和nvidia适配器上都正确.

int width = resX();
int height = resY();

for (int i = 0; i < height; i += 2)
    rm->line(0, i, width - 1, i, vec4f(1, 0, 0, 1));
for (int i = 1; i < height; i += 2)
    rm->line(0, i, width - 1, i, vec4f(0, 1, 0, 1));

// when I do this, one pixel to the right remains undrawn

void rendermachine::line(int x1, int y1, int x2, int y2, const vec4f &color) …

我已经使用像素完美的相当长的时间,并成长为喜欢它(尽管它的烦恼).现在,当pp不再与fx 6兼容时,我正在寻找替换它的工具.

我发现x-precise并且距离购买它只有一步,但我不太喜欢在源页面中包含某些东西的必要性.

我知道我可以自己做,也许不如xprecise或pp,但我现在没有时间.

我很想知道你用的是什么？或者你坚持使用旧的fx,只是为了使用像素完美？

我有一个CustomView和一个图像视图.CustomView是一个围绕屏幕移动并从墙壁反弹的球.图像是四分之一圆,您可以在触摸时以圆圈旋转.我正在尝试制作我的游戏,以便当来自CustomView的填充像素与ImageView中的填充像素交叉路径时,检测到碰撞.我遇到的问题是我不知道如何检索每个视图上填充像素的位置.

这是我的XML代码

<com.leytontaylor.bouncyballz.AnimatedView
    android:id="@+id/anim_view"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    />

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/quartCircle"
    android:layout_gravity="center_horizontal"
    android:src="@drawable/quartercircle"
    android:scaleType="matrix"/>

我的主要活动

public class MainActivity extends AppCompatActivity {

private static Bitmap imageOriginal, imageScaled;
private static Matrix matrix;

private ImageView dialer;
private int dialerHeight, dialerWidth;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // load the image only once
    if (imageOriginal == null) {
        imageOriginal = BitmapFactory.decodeResource(getResources(), R.drawable.quartercircle);
    }

    // initialize the matrix only once
    if (matrix == null) {
        matrix = new Matrix();
    } else {
        // …

以下是我编写的示例设计的屏幕截图:

字母底部和红线之间有10px的空间.我试图用以下代码复制它:

font: normal 40px arial;
border-bottom: 3px solid red;
padding-bottom: 10px;

从技术上讲,这段代码应该给我我想要的东西.但事实并非如此.以下是Chrome中的操作截图:

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

当我花时间测量由线高引起的字母下面的空间时,我可以看到它是一个9px的空白区域.因此,要在文本和边框之间获得10px的空间,我需要将我的代码更改为:

padding-bottom: 1px;

解决此问题的方法可能是在设计文件中添加一个行高属性,其中包含文本精确高度的数量.但是,如果文本包含多行,那么它会变得混乱.

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

我无法以可靠的方式制作出Matlab新的图形引擎(HG2)显示行和标记,这意味着在轴/屏幕中的每个地方都可以相同地显示/呈现.

为了证明这个问题,我编写了一个简单的脚本(参见文章末尾),并将R2014a(使用Matlab旧HG1引擎)与R2016b(因此使用Matlab新HG2引擎)下的结果进行了比较,两者均用于画家和opengl渲染器.

(您可能会在脚本中注意到我已经尝试停用我所知道的任何类型的HG2平滑.尽管这确实会改变一些事情,但是描述的一般问题行为是否会发生平滑处理.)

(我担心这样会调整图像的大小,从而导致图像失败,所以这里是图像本身的直接链接)

• R2014a(HG1)和画家渲染器:如果你放大图像,你可以检查每个标记都是像素完美的 - 无论它们在哪里被绘制,它们都是完全相同的.每条绿线正好是1像素宽.

• R2014a(HG1)&opengl渲染器:每条绿线正好是1像素宽,但标记不显示/绘制彼此相同.

• R2016b(HG2)&painters renderer:奇怪的是,与HG1和opengl的结果相似.线是正确的宽度(显示与HG1略有不同,但至少它们是一致的),但标记在整个轴上不同.

• R2016b(HG2)和opengl渲染器:标记都是相同的(尽管我喜欢它们较少,这是一个主观问题,重要的是它们都是相同的),但你可以看到三条绿线并非所有预期的宽度1像素:顶部和底部宽度为2像素,仅绘制中间宽度为1像素的像素.

关于如何使两个渲染器中的任何一个在HG2中表现正确(即在图像中的任何位置绘制相同的东西)的任何想法？

其他注意事项:

• 如果可能的话,我更愿意使用opengl,因为出于某种原因,画家看起来非常慢(至少是相机控制)甚至是"合理"数量的数据点(即数千)与HG2.当然,除非你也知道如何使画家在HG2一样快,因为它在HG1.

• 虽然测试代码很简单,但实际上我需要在非常精细的GUI(自定义uimenu,uicontrols,面板,回调等)中使用它.虽然我不知道这可能很重要,但显然,例如,使用uifigure而不是图形的潜在解决方案对我来说是不可行的.

• 有关信息,这是我输入时得到的opengl('info'):

在Matlab R2014a中:

Version         = 4.0.0 - Build 9.18.10.3131
Vendor          = Intel
Renderer        = Intel(R) HD Graphics 4600
MaxTextureSize  = 8192
Visual          = 05 (RGB 32 bits(08 08 08 08) zdepth 24, Hardware Accelerated, Opengl, Double Buffered, Window)
Software        = false
# of Extensions = 139

Driver Bug Workarounds:
OpenGLBitmapZbufferBug    = …

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

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

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

纹理使用GL_NEAREST。

    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);

我不使用glViewport和glOrtho。相反，我将通过统一的屏幕尺寸发送给着色器：

uniform float cw;
uniform float ch;
...
gl_Position = vec4(     -1.0f + 2.0f*(in_pos.x + in_offset.x)/cw, 
                         1.0f - 2.0f*(in_pos.y + in_offset.y)/ch,
                         0.0f, 1.0f);

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

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

一个业务目标要求我在屏幕上制作一个像素完美的表单.如果用户打印此表单,它将与表单的美国政府印刷局版本完全匹配; 打印机将生成该文档的(合理)可扫描副本.以前的解决方案是PDF,它只对我们有用.

我倾向于HTML/CSS,并希望提供有关工具的建议来提供帮助.

对于工具,Firefox中的PixelPerfect似乎是一个良好的开端.目标平台是(鼓)IE6,如果有帮助的话.该文件看起来像这样.

如果HTML/CSS完全禁止,Adobe Flex是我的下一个选择.

我正在开发一个XNA平台游戏,需要一些关于碰撞的帮助.游戏发生在洞穴中,问题是艺术风格会粗略,因此地形(洞穴)会有很多不同,所以我不能使用瓷砖.但是我需要检查角色和洞穴上的像素完美碰撞,但是当我无法在每个瓷砖周围放置矩形时,我无法弄清楚如何做到这一点,因为没有.

我想到了很多想法:

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

- 手动放置矩形.非常难看的代码,可能会导致很多错误和错误.

- 无论如何使用瓷砖,有数百种瓷砖类型.再次,非常丑陋的代码,它似乎错了.

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

我很抱歉,如果我解释得很糟糕,但这是一个相当复杂的问题(至少对我来说),我无法在网上找到任何解决方案.对任何想法都会很高兴,谢谢.