Resolution to fit any monitor

I'm making a commercial spaceshooter game and I want it to fit any monitor so to fill the entire screen without the two black stripes.

What i don't want - What I want to do



In the 'Game' tab, I set up it as follows in the red areas:




In order for the game elements (canvas, sprites, background) to fit the screen according to the resolution the player will choose and their monitor, what is the best way to set up both Canvas and resolution?

 

Well i can't check now, but perhaps someone else will help you better in unity, But
What i want to say is , it could be your windows display settings, i had that too.. If i wanted 5:4 resolution on my 16:9 monitor i had black stripes on the sides.
I had to go (in my case ) intel graphic setting and set to scale fully there.

 

But my game, for example, is commercial and I want it to work perfectly on any monitor in the world.
I'm developing the game on a 4:3 monitor, but I want it to work on 16: 9, 16:10, 4:3 monitors ... that is, any monitor.
The correct way to configure the 'Game' tab is to leave it in Free Aspect, Standalone (1024 x 768) or 16:9?
In Build Settings > Player Settings > Resolution and Presentation, the Default Screen Width and Default Screen Width Heigth options are in 1024 x 768. Should I change that too?

 

yes, so if anybody has 16:9 he will set it to 1366x768 Or 1600x900, with 5:4 monitor they'll set it to 800x600 1024x768 etc. i just have to set it to non-native resolution for more fps.
if i have 1600x900 and set game to 800x600 i would have stripes also.(by default,but i changed windows settings so i don't anymore)
anyone can correct me, but i don't think free aspect is a option once its build. its just a editor thing.
what i do is set custom resolution in my "game tab" to my native 1600x900 and go from there.
where does it look bad in editor or in build?

 

For now it seems to have no problem, but I'm afraid not to choose the proper resolution and after compiling the game the game screen will not adjust on other monitors.

If I build my game in 4:3, will it have problems with 16:9 monitors for example?
So should I must set custom resolution in my "game tab", not an aspect ratio (4:3, 16:9 for example)?
I'm still in doubt ..

 

So you're not going to get it to look identical on any and all resolutions... because they're different resolutions.

Instead what you'll be doing is designing your game to a specific resolution (that's the resolution you set in your Canvas Scaler), and then define how the game should scale relative to that resolution.

So if you design to a 4:3 resolution, on the Canvas Scaler set it to a 4:3 resolution of choice. If you're going for smooth clean graphics, make it high. If you're going for a low-res look you can go low (we did 640x480 for our spoof Resident Evil/Silent Hill series).

Now as for how it scales, that's what the other options on the Canvas Scaler are there for. And what to set them to depends on what you want for behaviour. The nice thing is that the 'Game' output screen has a drop down that lets you simulate various resolutions and you'll see how your screen behaves on those resolutions. They include some standards... but you can add your own customs. Throw a bunch of different resolutions at it and make sure they all look how you'd like them to. Tweak your Canvas Scaler settings to work. DO NOT forget to test things like ultra-wide resolutions (we forgot to... doh), cause things can get really weird when you get into very tall displays or very wide displays (phones and ultrawides respectively). And of course you can use 'Free Aspect' to just check random aspect ratios by just wriggling it around.

Note, you likely will not find the 'perfect' settings. There just are some ratios that don't translate from 4:3 well.

 

On script, I made a list of resolution options that the game will have:

Code (CSharp):

1. if (screenMode == 1) {
2.             Screen.fullScreen = false;
3.         }
4.  
5.         if (screenMode == 2) {
6.             switch (resolucao) {
7.                 case 1:
8.                     Screen.SetResolution(640, 480, true);
9.                     resolutionOptions.text = "640 x 480";
10.                     break;
11.                 case 2:
12.                     Screen.SetResolution(720, 576, true);
13.                     resolutionOptions.text = "720 x 576";
14.                     break;
15.                 case 3:
16.                     Screen.SetResolution(768, 576, true);
17.                     resolutionOptions.text = "768 x 576";
18.                     break;
19.                 case 4:
20.                     Screen.SetResolution(800, 600, true);
21.                     resolutionOptions.text = "800 x 600";
22.                     break;
23.                 case 5:
24.                     Screen.SetResolution(1024, 768, true);
25.                     resolutionOptions.text = "1024 x 768";
26.                     break;
27.                 case 6:
28.                     Screen.SetResolution(1152, 864, true);
29.                     resolutionOptions.text = "1152 x 864";
30.                     break;
31.                 case 7:
32.                     Screen.SetResolution(1280, 720, true);
33.                     resolutionOptions.text = "1280 x 720";
34.                     break;
35.                 case 8:
36.                     Screen.SetResolution(1280, 800, true);
37.                     resolutionOptions.text = "1280 x 800";
38.                     break;
39.                 case 9:
40.                     Screen.SetResolution(1280, 960, true);
41.                     resolutionOptions.text = "1280 x 960";
42.                     break;
43.                 case 10:
44.                     Screen.SetResolution(1280, 1024, true);
45.                     resolutionOptions.text = "1280 x 1024";
46.                     break;
47.                 case 11:
48.                     Screen.SetResolution(1366, 768, true);
49.                     resolutionOptions.text = "1366 x 768";
50.                     break;
51.                 case 12:
52.                     Screen.SetResolution(1400, 1050, true);
53.                     resolutionOptions.text = "1400 x 1050";
54.                     break;
55.                 case 13:
56.                     Screen.SetResolution(1440, 900, true);
57.                     resolutionOptions.text = "1440 x 900";
58.                     break;
59.                 case 14:
60.                     Screen.SetResolution(1600, 900, true);
61.                     resolutionOptions.text = "1600 x 900";
62.                     break;
63.                 case 15:
64.                     Screen.SetResolution(1600, 1200, true);
65.                     resolutionOptions.text = "1600 x 1200";
66.                     break;
67.                 case 16:
68.                     Screen.SetResolution(1920, 1080, true);
69.                     resolutionOptions.text = "1920 x 1080";
70.                     break;
71.                 case 17:
72.                     Screen.SetResolution(2048, 1536, true);
73.                     resolutionOptions.text = "2048 x 1536";
74.                     break;
75.                 case 18:
76.                     Screen.SetResolution(3840, 2160, true);
77.                     resolutionOptions.text = "3840 x 2160";
78.                     break;
79.             }
80.         }

If the 'screenMode' variable is 1, the game will run 'Windowed', otherwise it will be fullscreen with resolution options.

But in 'Canvas Scaler' and in the 'Game' tab, what do you suggest me set so that the game runs well on any monitor?
In the Canvas Scaler, can I leave the Reference Resolution at 1920 x 1080 and the game will look good on both 16: 9 and 4: 3 monitors?
Would it be nice to define as 'Free aspect'?
Remembering that my monitor is 4:3, but I don't want to make this game only for 4:3.

 

if you build game on is 5:4, and someone will play it on 16:9 without stripes its gonna be stretched, so those stripes at least help to maintain stuff to their correct proportions so its not all that bad, might look weird at first but one can get used to it.
for example if i'd set skyrim to 800x600 on my 16:9 i'd have those stripes too.(on the left and right side).
..Also, even windowed things have "resolução" : - ).
p.s. how come in your first screenshot one is correct and the other one is not.

 

As the lordofduct said: "So if you design to a 4:3 resolution, on the Canvas Scaler set it to a 4:3 resolution of choice. If you're going for smooth clean graphics, make it high."

So I did the following, I changed the 'Canvas Scaler' to 1920 x 1080 to play in high graphics:



Is it a correct way to set up?

 

1920x1080 isn't a 4:3 resolution...

Is it the way to set it up? No idea what behaviour you specifically want. But you said you were designing it as a 4:3 game, so I would assume you'd want a 4:3 resolution that you scaled around.

A 4:3 resolution with a 1080 vertical resolution would be 1440x1080. Though you could go higher to say 1600x1200.

But like I said, I don't know in what manner you want the display to scale around that... your source images in OP show different scenes...

 

In fact, I want my game to look like this, without the stripes:




The best ratio to make this game is 4:3 anyway?
But depending on the resolution that the player will choose the first time they play, is it possible not to have the black stripes building this game in 16: 9?

If so then I will set it to 16: 9 in 'Game' and on the 'canvas scaler' I will set it to 1920 x 1080.

 

That doesn't make sense because that's a 4:3 screenshot. There are only two ways to display that on 16:9 without stripes and that's either to s-t-r-e-t-c-h the image wider, or to show more of the level on either side of the screen. Which one did you want to do?

 

It would then be to 'stretch' the image wider.

 

By the way, what you have set in the game window tab won't affect your build in any way. That's just to get an in-editor preview of what your game will look like at different aspect ratios/resolutions. If you want to experiment with what your game will look like in full-screen mode, make a build with the resolution dialog enabled.

 

Where do I enable resolution dialog?

In Build Settings > Player Settings > Resolution and Presentation, the Default Screen Width and Default Screen Width Heigth options are in 1024 x 768. Should this also be changed?

 

It should be enabled by default. have you tried making a build yet?

 

Yes I did a compilation and experimented with the various resolutions of my script above. It looks good, but the challenge now is how to configure HUD to look good at any resolution.

 

well you could design it to the middle top or middle bottom.. it's easy to set things to middle at any resolution , because middle is middle anywhere.

 

I chose HUD stay on middle top.

I have some problems to solve, such as an object that is spawned outside and very close to the right edge of the camera and appears on the screen moving forward (as in the spaceshooters 'Powerup' items).
I set the initial position of the items in the old 4: 3 ratio.
Now I changed it to 16: 9 in the 'Game' tab and it expands the sides. Items now appear within the camera area because their x positions are set. I wanted to change that, make the items spawn off camera, regardless of resolution.

 

If it helps, there's a manual page about that:

https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

 

I highly recommend you don't do this. LCDs are designed to run at one resolution only and if you don't support it the results will look bad. I see you've included many of the common resolutions but at a glance I see at least one resolution missing from your list that can still be found today.

Instead I recommend you familiarize yourself with the more advanced components of Unity's UI. Some examples are the auto-layout components that will automatically adjust other components to fit the screen according to the information you've fed into them.

https://docs.unity3d.com/Manual/comp-UIAutoLayout.html

Concerning the Canvas settings that's completely up to the needs of your scene. Typically my settings are a resolution of 1280 by 720 with the scale set to "Match Width or Height" with a value of 0.5 which makes it pay attention to width and height equally. That said I frequently alter the value one way or the other depending on the canvas.

Incidentally you don't want just one canvas. You want multiple canvases. For a simple menu I'm currently sitting at around four to five canvases. This is partially for organization, partially to make it easier to size sections better, and partially for performance.

Whenever you modify a canvas element every single element in that canvas has to be recalulated. For performance the best thing to do is separate elements that never change from elements that do need to change, and by change I mean literally any change that affects the graphic of the component.

 

Right! For my game to run on LCD and LED monitors, what should I do in the script?
What is this missing from my list that can still be found today?

I set my Canvas Scaler at 1920 x 1080, Match at 0.5. Is this setting good too? Or is it better to do as you did, 12080 x 720?

There is a function in the script that gets all resolutions supported by the computer in question, the Screen.resolutions; // Store all resolutions supported by the computer
Should I use this in the script?

When changing the resolution, will I have to recalculate the positions of the objects, right?

 

For starters, ultra-wide resolutions are more common than people think, but just looking at everyday resolutions you're missing the 1920 by 1200 resolution. According to NewEgg, a US-based component supplier, there are more than 460 different monitors at that resolution. That's more than all the variants of 720p available.

Edit: A second glance reveals you're missing 1680 by 1050 too.

I choose that resolution because it comfortably fits on my development monitors which are 2560 by 1440.

If you've properly set up the canvases everything will be handled for you. You don't have to work with the resolution yourself other than to change the resolution the game is running at.

 

Getting back to what you said above about my list of resolutions in the script and about the problem of LCDs monitors, can i lkeep this script adding both 1920 x 1200 and 2560 x 1440 resolutions, or should i write in the script otherwise? what is the best way?

 

Just depends on how far in you are and how much you feel like reworking your interfaces. I wouldn't waste my time with an approach like this but then I'm very familiar with the current system having worked with on it almost exclusively for months now. It's not that hard to learn but it has a very trial and error feel to it.

 

Okay, explain to me how do this, no matter if it is hard a bit.

 

For starters, you need to become familiar with the anchors of the rect transform. How you position them impacts the way the user interface scales with the screen. Below are the tutorials that helped me learn how to use them.

https://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html
https://medium.com/@johntucker_48673/building-a-responsive-ui-unity-a201a1014f9
https://www.febucci.com/2018/10/unity-ui-tutorial/

If you need grid-like behaviour with your components or if you need them to be more exactly at the cost of being able to easily adjust them you will want to learn how to work with the layout components. Having experience with Java's Swing UI can help understand how these work since they're basically the same idea.

https://medium.com/sketch-app-sources/prototyping-ui-in-unity-part-4-layout-components-9a9451998203

Anything beyond this is ultimately more complex than can be easily explained in several posts let alone one.

 

Okay, I will study these topics
About the anchors of the rect transform, I am already understand better.
In case I have another doubt I ask here later!