How do I render non-blurry Pixels on Mobile?

Get help using Construct 2

Post » Sun Mar 20, 2016 2:20 pm

Hello people,

my game looks pixel perfect on the desktop webbrowser, but on my smartphone (Galaxy S6) the graphics look blurred, even though I have these settings applied to the view:
Fullscreen scaling: Low quality
Use high-DPI display: No
Enable WebGL: On
Sampling: Point
Downscaling: Low quality

On PC:
Image

On Mobile:
Image

Am I missing something essential?
Last edited by SirPumpAction on Sun Mar 20, 2016 2:49 pm, edited 1 time in total.
B
6
Posts: 34
Reputation: 318

Post » Sun Mar 20, 2016 2:33 pm

Are you by any chance forgetting pixel rounding?
Zelda Gamekit (my project)



Example capxs:

Zelda-Style Inventory

Zelda Health

3-saveslot system

[url=https://www.dropbox.com/s/d4396pwak0oh7q6/ZeldaDialogueSystem.capx?dl=0]Zelda-like Dialogue[
B
51
S
24
G
30
Posts: 534
Reputation: 19,620

Post » Sun Mar 20, 2016 2:46 pm

Hey SirPumpAction, :)

I have yet to build any games for mobile devices, so I'm not sure all of the potential causes, but one possibility comes to mind.


"Crop" mode
It may be that the "Full screen in browser" mode is rendering to an intermediate texture and then scaling it to fit the mobile's screen.

To work around this you could try setting "Full screen in browser" to "Crop".
The "Crop" mode means that your game will not be auto-rescaled regardless of the monitor dimensions.

You'll then have exact control over how the game is scaled up to fit a monitor, but as a side effect you'll have to be a little careful with how you place hud elements, as object positions that work on a 16:9 aspect ratio display, might get cut off on a 4:3 aspect display.

You may also need to zoom the layout with events, by detecting the monitor dimensions and scaling up by the best integer fit.

Even if you don't plan to ultimately use Crop mode, you might want to at least try it to see if that suppresses the blurry bilinear filter effect you're seeing in the second image.

Importantly, if your game displays at a 1-to-1 pixel scale (looks super tiny and zoomed out) when running in Crop mode, then you may want to temporarily add in an "On start of layout" >> "Set layout scale" to 3 or 4, so you can see if the pixels are coming out sharp when scaled up.


Pixel Rounding
One other option you might want to enable is "Pixel Rounding", though that isn't likely to fix the blur unless your entire title screen has pixel coordinates that are exactly half way in between integer pixel coords, (e.g. 0.5 by 0.5).

That said, "Pixel Rounding" will ensure that all game objects will be rendered as if their origin points are snapped to integer pixel coords, though the internal game logic will still treat them as floating point coords.
B
27
S
18
G
8
Posts: 331
Reputation: 6,164

Post » Sun Mar 20, 2016 2:55 pm

Thanks for the quick replies! Pixel rounding is on, but on the menu screen I was already working with exact pixel values, so even if pixel rounding were to be off, it shouldn't have looked blurred.

I just tried crop mode, but it doesn't look as if it fits my game at all, so I have to revert back to letterbox/integer letterbox. Any more ideas?
B
6
Posts: 34
Reputation: 318

Post » Sun Mar 20, 2016 3:21 pm

Try turning pixel rounding off, maybe. Worth a shot, fixed blurring for me, at least on desktop.
Zelda Gamekit (my project)



Example capxs:

Zelda-Style Inventory

Zelda Health

3-saveslot system

[url=https://www.dropbox.com/s/d4396pwak0oh7q6/ZeldaDialogueSystem.capx?dl=0]Zelda-like Dialogue[
B
51
S
24
G
30
Posts: 534
Reputation: 19,620

Post » Sun Mar 20, 2016 3:41 pm

Hi, maybe your export settings: try to disable image compression.
B
8
S
1
Posts: 38
Reputation: 542

Post » Sun Mar 20, 2016 6:31 pm

Same without pixel rounding and the exported graphics look fine on desktop. I also created new projects and all face the same issue with pixel graphics.
B
6
Posts: 34
Reputation: 318

Post » Mon Mar 21, 2016 3:59 am

Hey again, :)

I suspected that Crop wouldn't fit the game correctly by default, which is why I mentioned the "start of layout" event that might be needed to see the pixels close up, but that said, did Crop mode fix the blurry pixel problem?

The reason I'm curious is because Crop mode is (as far as I know) C2's most open-ended full screen display mode, and with some effort (and events) you can pretty much make it behave like any of the other modes, but with more control.

The main thing that Crop mode will give you is that the game will not be rendered to an intermediate texture and then stretched to fit the target display. I'm not sure, but I suspect that might be the cause of the blur you're encountering.


The Galaxy s6 has a res of
2560 x 1440

The image of the title screen you posted is
1280 x 720

And that title screen is a 2x scale-up of the pixel art, meaning its un-scaled res is
640 x 360

Out of curiosity, could your list you PC's monitor resolution?
And most importantly, what is the game's "Window Size" property set to? If it's 640 x 360 that might help shed some light on the issue.


Anyway, given the above, that means the pixel art is being scaled up exactly 4x to fit the Galaxy's screen, (from 640 x 360 to 2560 x 1440). Also is the image you posted from the Galaxy's screen scaled back down 2x, because it's not the full 2560 x 1440 res. No problem if it is, just curious.

It looks to me like the 4x scaling being done on the Galaxy is using bilinear filtering. If I take your sharp title screen into Photoshop, scale it down (via Nearest Neighbor) to its 1x scale and then scale that up by 4x (via bilinear) to simulate the Galaxy's scaling, my re-scaled version is virtually identical to your blurry comparison image. (Note: I also scale my version back down by 2x to match the 1280 x 720 res of you're 2nd comparison image.)
B
27
S
18
G
8
Posts: 331
Reputation: 6,164

Post » Mon Mar 21, 2016 7:17 am

All your assumptions are correct. Window size is 640x360, the title screen is 640x360, galaxy screep is 1440p, my desktop screen is 1080p, the title screen is x2 scaled just to show how sharp it looks and the galaxy s6 should scale every pixel by 4 as my desktop is scaling up every pixel by 3 (3x640, 3x360 = 1920, 1080 ; 4x640,4x360=2440,1440), so I would expect the same sharp image on my S6 as on my Desktop, but clearly something behaves differently and it looks terrible on my S6. (And yes, the S6's screenshot was scaled down by x2 because it still looks as blurry on 1440p as on 720p :) ) I have no problem with the game rendering to an intermediate texture and then scaling to the final resolution, this is what I was actually hoping for as it increases the performance, ESPECIALLY on mobile with it's limited rendering power, when you take into account how GLSL works on each and every pixel. When it works on the 640x360 it has significantly less work to do then on the proper 1440p resolution. Now my problem seems to be related to the fact that I would like to have a point interpolation scaling here and not a linear interpolation on the final image, but this doesn't seem to happen on the smartphone, while it works perfectly fine on the desktop :/
B
6
Posts: 34
Reputation: 318

Post » Mon Mar 21, 2016 8:45 am

That's a good point. On a mobile device it would be ideal to render once at the pixel art resolution and then just scale up to full screen.

When running the game on the Galaxy, are you running the game as an installed android app, or are you running it from within a browser like Chrome or Firefox?

You might want to try running from a few different browsers on the Galaxy to see if there's a difference in the scaling behavior. It's possible that the bilinear blurring is a side effect of the environment the game is running in and not you're project settings, especially given that the games scales correctly on your desktop computer.

It may be that, the method C2 uses to tell the target environment to use "point" interpolation scaling, doesn't work for all environments.


Finally you said in your first post that "Fullscreen scaling" was set to Low quality, which would seem to make sense, given that you don't want any filtering, but you could try high quality, to see if that makes a difference on the Desktop and Galaxy versions.

This one is a long shot, but mobile graphics hardware does some weird things in response to settings you would think would be consistent across platforms.

I've vaguely recall seeing a very (very) few situations where a graphics property on low settings will defer to the discretion of the target hardware on how to handle things, while a high setting will force the hardware to do things a certain way. Mind you, I've never seen or heard of that kind of thing in C2, but mobile graphics hardware is weird that way. It seems to me like it was a floating point precision thing, so likely not related.


For an interesting example of said weirdness, here's an article on floating point calculations that does a good job of showing the inconsistent internal computational spookiness of mobile GPUs. Note: I don't think the effect described in the article below is specifically related to your problem. I was just trying to remember some of the articles I'd come across that showcases some of the same kind of esoteric mobile GPU characteristics that can result in unexpected behavior.
http://www.youi.tv/mobile-gpu-floating- ... variances/
(Scroll down to see various devices render the same exact shader script in uniquely distorted and variably buggy ways.)
B
27
S
18
G
8
Posts: 331
Reputation: 6,164

Next

Return to How do I....?

Who is online

Users browsing this forum: AnD4D and 22 guests