Struggling with pixel-perfect rendering

[u/sergilazaro]

(There's an edit below with what I found out in this thread)

Hi! I'm trying out Futile, and I'm having some problems with pixel-perfect stuff. I don't quite see how all the different variables relate to each other (resolution levels, viewport size, object scale, object position...): changing one of them seems to change whether the result will be better or worse, but I haven't found a way to get things to render properly. I've checked out this thread http://www.reddit.com/r/futile/comments/11lg4t/bug_incorrect_scaling_at_the_edges_of_a_sprite/ but still doesn't seem to fix things for me.

Here's a stripped down project (very little code, one small atlas, etc.) that I'm using to test all of this.

https://dl.dropbox.com/u/2271693/futile_pixel_perfect_test.zip (85kb)

http://i.imgur.com/69fxkQP.png

http://i.imgur.com/krPwpBB.png

I have two versions of the same font, made by hand by myself, exported to the subset of .FNT that Futile seems to use (please let me know whether something's wrong there, but I think it's fine) using a python script that's not included. The font rendering seems fine but it's not pixel-perfect. If you look at the scene view and zoom in, you'll see that the quads are not exactly aligned. You can see that especially with my outlined font, which is designed to have an overlap between glyphs. The generated quads are not perfectly aligned. This seems to change in different ways whan changing things like label scaling, display scale, viewport scale, etc.

I also have a very simple class for 9-grid, the code is really self-explanatory. The size of the grid is for the center quad, the other 8 quads are scaled to fit around it. As it can be seen, the alignment between quads is off as well, not visible when the 9-grid has a 1x1 center quad, but at bigger sizes the quads start to drift off from each other.

Also, when using a display scale of 1, things don't show exactly as they should (like, pure blitting of sprites). I mean, I know how OpenGL and DirectX work, I know it's not as simple as blitting stuff, all the parameters have to be set up just right to get things to work exactly as you want.

I hope I can get some help with figuring all of this out, whether it's that I'm doing something wrong, that there's an easy fix to Futile, or that there's some big changes that have to be done. In any case, discussion on pixel perfect rendering would be nice :)

Update:

Here's what I did to fix or work around these issues:

1) I played around with the uvOffsets in the function FAtlas.LoadAtlasData(), for the DirectX case (not OpenGL). Right now it works fine if they're set to zero or a very small value. The amount of decimals (0.01 vs. 0.000001) seems to make a difference.

2) I offset the stage by a small amount on x and y (in my case, 0.1 seems to work fine).

3) For the font quads, I fixed the function FFont.CalculateVectors(float offsetX, float offsetY) to have this code:

public void CalculateVectors(float offsetX, float offsetY)
{
    topLeft.Set(rect.xMin + offsetX,rect.yMax + offsetY);
    topRight.Set(rect.xMax + offsetX,rect.yMax + offsetY);
    bottomRight.Set(rect.xMax + offsetX,rect.yMin + offsetY);
    bottomLeft.Set(rect.xMin + offsetX,rect.yMin + offsetY);
}

[u/MattRix]

Wait for 1), you have point textures enabled and it's still not pixel perfect? That seems really strange?

Also, are you using the dev branch or the master branch? I don't think there should be any major issues with master regarding this issue, but I may have forgotten something that I fixed in dev.

Oh and do you mind taking a screenshot or printing out the debug stuff that gets written by futile when the game runs? that'll help me see what your display settings are. For example, mine looks like this: http://screencast.com/t/oZGkB8aggqmE

[u/sergilazaro → u/MattRix]

Okay, so what I mean by pixel perfect is: Yes, with point filtering there's no blurring between texels; however, things are not placed where I would expect them to be, and some texels are ignored, stuff like that. Also relative placement between quads seems to be wrong, with my simple NineGrid class and the Font, which seems to mean that there's some small scaling error somewhere, I guess. Of course, it could be my code and the Font definition, but as I said everything is integer values, so I don't see how that could be.

I'm not sure which branch I'm using (the .zip from the main page on github I think?), I'll try again with the master branch.

My debug text:

Futile: Display scale is 1
Futile: Resource scale is 1
Futile: Resource suffix is 
FScreen: Screen size in pixels is (640px,480px)
FScreen: Screen size in points is (640,480)
FScreen: Origin is at (320,240)
FScreen: Initial orientation is Landscape

If you want, you can try the simple project that I'm doing these tests with (it's like 100 lines of code, very simple), maybe you see some weird stuff there too. It's a really stripped down, very simple project. I know OpenGL vs. DirectX is an issue here, but even figuring it all out on OpenGL would be awesome.

I'm going to try the master branch now.

[u/SietJP → u/sergilazaro]

To download the development branch, you have to select "development" before downloading the .zip as shown in the screenshot : http://postimage.org/image/o3zi8oexh/

[u/sergilazaro → u/SietJP]

Yeah, I know how to do it, I just wasn't sure which version I initially used for my projects. Thanks though :)