Mobile Pixel Ratio and Choice of Resolution

Hi Everyone!

I was thinking of making a high-res game in 1280x720. It worked out fine on the computer, but I realized that it became a bit pixalted on my Nvidia Shield Tablet(1920x1200). Then I tried it on my LG G3 (2560x1440) and it became even worse. I'm guessing it has to do with the Pixel Ratio of Chrome which is probably 2x on the Shield, and probably 3x on the LG G3 and thereby rendering the canvas in an incorrect resolution.

• Is this going to be a problem once I export it as a native app (through Cordova)? Will it render in native 1280x720 or is the canvas going to be scaled according to the pixel ratio of the device?
• If the native app is going to get pixelated. Is there some kind of solution to this problem?
• ...And one last question. Is 1280x720 the right way to go? Or should I make the game in 1920x1080? I still have 2 years of work left before releasing the title. I'm guessing mobiles and tablet will become pretty powerful until then. But I would like to know if there's somekind of technical limitation of what construct is able to render or limitations of mobile phones with the use of WebGL? is there something else that I should think about?

The game uses six layers of parallax as well as two invisible layers. WebGL will be a requirement.

Thanks for everything

Kind Regards

Dennis

_______________________________________________________

If you're interested follow the development of my project, you can always follow me on instagram: http://instagram.com/_g3nki or have a look at my homepage: http://pixelshade.se

are you using your graphics unscaled?

if so try adding any sprite at 2 or 4 times the size you want to use it in game, for example if it should be 100px in the game, the imported graphic should be 400px and then scaled down to 100px in the editor.

hope that helps!

are you using your graphics unscaled? if so try adding any sprite at 2 or 4 times the size you want to use it in game, for example if it should be 100px in the game, the imported graphic should be 400px and then scaled down to 100px in the editor. hope that helps!

I'm scaling the graphics to a size that I feel fit the scenario, it is asset resolution is often a bit bigger, not 4x bigger, but it could be 1.2x - 1.5x the native resolution scale. To me, creating 2x or higher resolution assets would be an enormous waste of resources. (it would require excessive use of graphic memory or RAM)

The problem is that it actually scale nice on browsers on PC. On mobiles however it looks terrible, It seems as if it has to do with the device pixel ratio (something that is determined in the browser in order to give better web experience viewing text on high ppi displays) I made a comparison, you can clearly see the reduced pixel quality on my LG G3 compared to the PC

Any suggestions anyone? or is the pixel ratio corrected once exporting it as a native app?

Hey g3nki, are you using point sampling in the configuration settings?

It's hard to say what resolutions will be in 2 years but in general you want to use the lowest you can get away with graphically and then use the scale outer option to give you more space on the edges on wider screens.

You should redraw a cat as big resolution than old one, then re-scale down in C2 as opposite of 1:1, it's worth to try.

Sometimes we can't do balance between graphics and gameplay, if is lower resolution, it would better 60 fps, if is higher resolution, it would lag.

Hey g3nki, are you using point sampling in the configuration settings? It's hard to say what resolutions will be in 2 years but in general you want to use the lowest you can get away with graphically and then use the scale outer option to give you more space on the edges on wider screens.

I use linear scaling, but I think a know what I did wrong, Theres property on the Project Properties that says "Use high-DPI displays". This was set to "No" and that's probably why the browser chose to render the canvas according to the Pixel Ratio set on the phone. Once i clicked "Yes" the game looked amazing on the LG G3 screen. I can't really tell if the resolution is 2560x1440 or if it just upscaled from 1280x720. But it looks really good!

I used the scale outer option you suggested (which was great by the way), but now I'm having a problem with touch controls depending on screen size. I defined the layer parallax to 0, 0 making the controls hover over the screen. But once I change aspect ratio, from 16:9 to 4:3 or 21:9 are no longer displayed as left-bottom and right-bottom anymore, is there a trick to keep them in the same position?

... Sometimes we can't do balance between graphics and gameplay, if is lower resolution, it would better 60 fps, if is higher resolution, it would lag.

I know, it's a shame, but it is all about finding that sweet spot of visual quality and good performance looking two years ahead in the future. I'm guessing that I will stick with 720p for now. the problem is that It would require a lot of effort making scale everything to a 1080p-canvas, as long as there isn't a really good technique for it.

Ah ok, glad to hear its better now. You can make sure your buttons are always where you want them by setting a new layer's parallax to 0, 0 - and then setting the X.Y positions of your buttons using the ViewportLeft( 0,0 LayerNumber) + pixel amount.

Here is an example.

— - this really reminds me of a problem I have been having with either C2 or the graphics card determining when to use mipmapped (downscaled) textures in a very wrong way. If you go into Project properties - View - and set Downscaling to low - does this still happen (on high-res mobile devices)?

Ah ok, glad to hear its better now. You can make sure your buttons are always where you want them by setting a new layer's parallax to 0, 0 - and then setting the X.Y positions of your buttons using the ViewportLeft( 0,0 LayerNumber) + pixel amount.

Here is an example.

Thank you kind sir! This helped alot! I have come a long way with assets and animations, and even though the game looks okay visually I'm still a newbie at construct. It would be terrible to start a really big project realizing halway through that you did something completely nuts in the beginning.

— - this really reminds me of a problem I have been having with either C2 or the graphics card determining when to use mipmapped (downscaled) textures in a very wrong way. If you go into Project properties - View - and set Downscaling to low - does this still happen (on high-res mobile devices)?

I had an issue that involved the scaling quality as well, it wasn't this one, But I managed to work that out by putting the downscaling quality to low. This issue was resolved by changing "Use high-DPI display" to "yes"

— - you can use the "anchor" behavior along with a 0,0 parallax to keep your controls on the same relative spot on the screen. It's quick and easy.

— - you can use the "anchor" behavior along with a 0,0 parallax to keep your controls on the same relative spot on the screen. It's quick and easy.

PSI That's an even easier strategy. Thank you for sharing!

No problem!