- Create a canvas object
- Set the Canvas Scaler to Scale with Screen Size
- Set the Reference Resolution to for example: 1080 x 800
- Set the Screen Match Mode to Match with Or Height
- Set the match to 1 if your current screen width is smaller, 0 if height is smaller
- Create an Image as background inside the Canvas
- Add Aspect Ratio Fitter script
- Set the Aspect Mode to Fit in Parent (so the UI anchor can be anywhere)
- Set the Aspect Ratio to 1080/800 = 1.35
Now you can add any UI elements inside the background Image.
Last piece is add this piece of script on the canvas' Awake method:
var canvasScaler = GetComponent<CanvasScaler>();
var ratio = Screen.height / (float) Screen.width;
var rr = canvasScaler.referenceResolution;
canvasScaler.matchWidthOrHeight = (ratio < rr.x / rr.y) ? 1 : 0;
This would ensure that the scaling/aspect ratio works correctly across any screen resolutions. There would be border on top-bottom if screen is taller than aspect ratio, and there would be border on left-right if screen is wider than aspect ratio.
No comments:
Post a Comment
THINK: is it True? is it Helpful? is it Inspiring? is it Necessary? is it Kind?