Upscaled rendering different in Point sampling?

Hello,

I'm trying to understand why I have different visual results depending on the screen resolution.

Here is my problem :

My game is 640x360, low quality, Point sampling, fullscreen stretch(letterbox scale).

I have a tiledbackground (but it could be a fullscreen sprite) with lines.

A little capx example for testing : https://dl.dropboxusercontent.com/u/13847313/Scirra/Upscale_PointSampling.capx

With my first monitor, in 1920x1200, the lines are perfect.

With my other monitor, in 1680x1050, the lines are ugly.

If I change the sampling from Point to Linear, it works fine (but my game NEEDS to be in Point sampling.)

So my question is : Why the upscale works in 1920x1200 and not in 1680x1050 in Point sampling? :/

That's because 1920x1080 is an even multiple of your original resolution. The other resolution is not..

Your problem cannot be solved - unless you use letterbox integer fullscreen, with all that it implies (black frame to the nearest even multiple resolution).

There is no way of having point sampling upres work on arbitrary resolutions without a jagged outcome.

Eisenhans Thank you for your explanation.

Do you know why it is working in 1680x1050 in linear sampling? Just to feed my knowledge.

basically, linear sampling will do a linear interpolation of the colors between the pixels to draw them, even if the ratio is not an integer, this operation works OK.

point sampling however, much like a nearest neighbor interpolation, will set the pixel color to "the same of the nearest one"

so if the size ratio between the original and the actual one is an integer, it just draw "larger squares" or "smaller squares" to represent the pixels

#€

£¥

##€€

##€€

££¥¥

££¥¥

if you know what I mean with this representation

, if the ratio is not an integer though, the result may be "distorded"

#€

£¥

##€€€

##€€€

##€€€

£££¥¥

£££¥¥

£££¥¥

I hope you get the idea.

I don't really understant mathematically but I trust you.

So I don't know how to do clean scanlines that can be the same whatever the resolution is, in low quality fullscreen.

(The scanline shader has the same issue)

Yo!

Just to elaborate a bit on Aphrodite's explanation. Check these out:

Imagine that the grid you see here is your target resolution, the one you want to scale your gfx up to. Four pixels; blue, green, yellow and red. So if you have four pixels you want to scale up to a target resolution of 12 then you'll have no problem since 4 pixels * 3x scale = 12. Three pixels per each original pixel match up nicely.

But what if your target resolution is only a grid of 10? You can't scale 4 pixels up and make them fit perfectly within the 10 unit grid. So, what to do? You can either use go-between values to approximate the way it's supposed to look (interpolation), or just go with point sampling and skip rendering the pixels you don't have room for:

Interpolation works pretty well but it'll blur everything slightly while point sampling makes everything distorted and ugly since the upscaled pixels have to be of an uneven size now. The third, and imo best, solution is to just use letterbox integer scale. You'll get black borders and stuff but eh, what can you do?

Thank you ErekT for the graphical explanation.

Letterbox integer scale is not a option. The black scare is huge and, IMO, unacceptable for a Pc game. I would prefer to remove the scanlines if I have to.

I'm wondering if there can be a trick like checking the resolution of the screen (not sure we can) and applying a subtle scale to the scanlines image to compensate the differences. ^^

Maybe it's stupid.

Browser.screenwidth & browser.screenheight?

ErekT Ho right. Never used that. Thanx.

I will play with it to see what I can do.