Mobile Pixel Ratio and Choice of Resolution

Discussion and feedback on Construct 2

Post » Mon Jan 26, 2015 2:58 pm

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.
Image

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
Currently working on "Unsung" - an open world platform adventure for PC and Consoles. follow me on Instagram :D
B
18
S
2
G
2
Posts: 51
Reputation: 1,237

Post » Mon Jan 26, 2015 4:13 pm

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!
B
38
S
11
G
5
Posts: 485
Reputation: 5,340

Post » Mon Jan 26, 2015 10:33 pm

fldr wrote: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

Image

Any suggestions anyone? or is the pixel ratio corrected once exporting it as a native app?
Last edited by g3nki on Tue Jan 27, 2015 10:24 am, edited 1 time in total.
Currently working on "Unsung" - an open world platform adventure for PC and Consoles. follow me on Instagram :D
B
18
S
2
G
2
Posts: 51
Reputation: 1,237

Post » Tue Jan 27, 2015 3:03 am

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.
ImageImage
B
118
S
23
G
7
Posts: 1,070
Reputation: 12,964

Post » Tue Jan 27, 2015 3:32 am

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.
B
97
S
35
G
29
Posts: 3,139
Reputation: 28,371

Post » Tue Jan 27, 2015 9:55 am

GenkiGenga wrote: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?
Currently working on "Unsung" - an open world platform adventure for PC and Consoles. follow me on Instagram :D
B
18
S
2
G
2
Posts: 51
Reputation: 1,237

Post » Tue Jan 27, 2015 10:22 am

Joannesalfa wrote:... 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.
Currently working on "Unsung" - an open world platform adventure for PC and Consoles. follow me on Instagram :D
B
18
S
2
G
2
Posts: 51
Reputation: 1,237

Post » Tue Jan 27, 2015 10:37 am

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.
You do not have the required permissions to view the files attached to this post.
ImageImage
B
118
S
23
G
7
Posts: 1,070
Reputation: 12,964

Post » Tue Jan 27, 2015 10:55 am

@g3nki - 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)?
B
19
S
6
G
6
Posts: 1,101
Reputation: 5,646

Post » Tue Jan 27, 2015 11:39 am

GenkiGenga wrote: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. :)

Somebody wrote:@g3nki - 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"
Currently working on "Unsung" - an open world platform adventure for PC and Consoles. follow me on Instagram :D
B
18
S
2
G
2
Posts: 51
Reputation: 1,237

Next

Return to Construct 2 General

Who is online

Users browsing this forum: David181 and 6 guests