burst2flame
Topic Author
Posts: 20
Joined: 11 Mar 2024, 18:04

Proper Resolution Scaling

31 Jul 2024, 23:47

We're assuming that it's best practice to make sure our game would look the same on a 1080p screen and a 4k or any size as long as the ratio is the same. I think there's dpi scaling but these seems to mess up if the user changes their "scale" setting in windows. How would I make sure that the game looked scaled properly and looked the same as the resolution scales? Making sure stuff like padding and font size scale.
 
User avatar
sfernandez
Site Admin
Posts: 3107
Joined: 22 Dec 2011, 19:20

Re: Proper Resolution Scaling

01 Aug 2024, 10:28

If your UI should look the same you just need to scale it, and for that purpose using Viewboxes is the easiest solution. In our examples we use it all the time to make sure the UI looks the same in all screen resolutions.

Viewboxes work very well inside Grids that have their cols/rows definitions specified as star (percentage) values, as shown in the following xamltoy:



Is this what you're looking for?
 
burst2flame
Topic Author
Posts: 20
Joined: 11 Mar 2024, 18:04

Re: Proper Resolution Scaling

07 Aug 2024, 01:43

This works quite well! I can make a grid within a viewbox with a width and height of 1920x1080 and it seems to scale the whole ui.

However, now I'm not exactly sure how to deal with different aspect ratios. Like if a screen is 16:10 instead of 16:9 then things I have anchored to the bottom and top will no longer be all the way at the top or bottom. Is there a way noesis can automatically detect aspect ratio and perhaps change the width and height of the inner grid to 1920x1200? Or is there another best practice way to handle this?
 
User avatar
sfernandez
Site Admin
Posts: 3107
Joined: 22 Dec 2011, 19:20

Re: Proper Resolution Scaling

12 Aug 2024, 13:29

In our Gallery sample we use a ScaleTransform set in the LayoutTransform property of the root, and then calculate the proper scale based on defined design width/height.

This way the contents are scaled but at the same time they can stretch to different aspect ratios. See how it works in the following xamltoy:

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 9 guests