I am re-making an old game and the resolution is 640x400 so I set everything I know to work with that. But I can’t figure out how to make the screen scale in the way I want when the aspect ratio changes. The UI elements move all over the place and I can find some nice anchoring settings etc. but I don’t need a flexible UI, it should just stay in that aspect ratio and scale as much as possible to fit into the current screen size (leaving black bars around where needed).
In the screen shot are my settings for the canvas scaler, I know I could force the aspect ratio in the player settings but the game is a collection of a few remakes and they all have different screen dimensions (the other one has 320x256 for example so I would need a fixed aspect ratio for each scene)
One simple way (assuming you don’t care about pixel perfect scaling and are drawing stuff using only canvas no world space objects rendered by camera) would be something like this:
set canvas screen match mode to expand
add top element in the canvas with size set to your intended resolution, anchored to the center of canvas
place all your UI under the top element from previous step, don’t place stuff directly in canvas
(optional) change the camera settings, or add a background element in the canvas (behind top element) so that the filler/black bars area is at least black (or your preferred background) instead of default camera blue
Note that this doesn’t do anything about the scaling of non-canvas objects drawn by camera like sprites or objects using physics components. Depending on the kind of game you are making drawing non GUI stuff with with canvas can get messy. Probably fine for the stuff which can be seen in your screenshot, but wouldn’t want to do that for something like platformer.
Different setup B:
Add pixel perfect camera component to camera
Set the reference resolution
Enable Crop Frame X Y IMPORTANT!
Set canvas “Render Mode” to “Screen Space - Camera”
Set canvas scaler to “Scale with Screen Size” and specify reference resolution. Screen match mode in this case doesn’t matter, it will do the same thing assuming camera was set up properly.
(optional) enable or disable stretch fill for pixel perfect camera depending on what you want
(optional) combine with previous technique if you care what happens when window/screen resolution is smaller than reference resolution
Technique B has the benefit that it allows pixel perfect scaling (although getting it completely perfect without any defects will take a lot more work than than I can describe in this post). Whether it’s needed or suitable will depend on the art style. It also allows you to use in camera world objects like sprites instead of drawing everything with canvas. One downside is that once the screen resolution is less than reference, stuff will break (most likely not a problem since you are recreating old games targeting resolutions smaller than any modern screen).
Thank you very much for giving two detailed solutions. I tried them both and they work just fine! Since the game is really only UI I can use both and am still undecided about which is better, I think for now I stick with the first one because it is slightly easier to setup but if I should be in need of sprites I know what to do
I did not notice any difference in quality when upscaling, the image in the middle was still sharp like scaled with nearest neighbor method, can you confirm that? For that game it is great. The icons left and right of the screen seem a bit unsharp but I think I had some anti-alias in them in the first place.
