I’m having a little trouble getting my title screen set up and I’m curious how I make something that stretches with the screen in proportion, yet remains size constrained. The title is a Panel with several other UI elements as children.
A simple way to describe it is that it should have a distance from one side of the screen of at least 20% of the screen’s width/height on either the horizontal or vertical (whichever is less). Or put another way, it will always be 80% of the screen’s smallest dimension.
So for example – let’s say the setup screen is 1000 X 1000 pixels and my title is 800 X 800 pixels.
When the screen is shrunk to 700 X 500 pixels, the title would shrink to 400 X 400 (80% of 500, because it’s the lessor of the two).
When the screen is increased to 2000 X 3000 pixels, the title would be stretched to 1600 X 1600 (80% of 2000, because it’s the lessor of the two).
I don’t know, if you are still searching for an answer, but Unity added an Aspect ratio fitter.
The way I would do it:
Create an empty game object and add a aspect ratio fitter to it (Layout->Aspect Ratio Fitter). Set the Aspect Mode to “Fit in Parent” and the aspect ratio to whatever you need it (1 in case it is a square). Then add a child object to it. There set the rect transform to stretch in both ways and the pivot point to 0.5 0.5. Then set the anchors to to where-ever you need them. For example if you would want 80% of the screen size, then it would be:
Min: x: 0.1, y:0.1
Max: x: 0.9, y:0.9
Actually isn’t necessary anymore do extra-code to make the UI fit in screen. Usign “Canvas Scaler” component, you can select the “Scale With Screen Size” and define the best screen size for Height and move the slider entirely to height. you will have you canvas scaling and not deforming the elements in screen.
Of course you still needing have some work to anchor the UI on left/right to perform correct Aspect Ratio resize on multiple screens.
Another method is a custom script that I made, just keep in mind that the object should always be set to the highest screen resolution so the UI does not blur.
using UnityEngine;
using System.Collections;
[AddComponentMenu("UI/UI Resizer")]
public class UIResizer : MonoBehaviour
{
// The resolution that the UI was initially designed for.
[SerializeField]
Vector2 targetResolution = new Vector2(1920, 1080);
// The Transform that should be resized, if not given then itself.
[SerializeField]
Transform UIObject;
void Start()
{
if(!UIObject)
UIObject = transform;
SizeResolution (new Vector2 (Screen.width, Screen.height));
}
public void SizeResolution(Vector2 newResolution)
{
Vector3 scale = UIObject.localScale;
scale.x = newResolution.x / targetResolution.x;
scale.y = newResolution.y / targetResolution.y;
UIObject.localScale = scale;
}
}