koobas.hobune.stream
New 4.6 UI question: How do you resize a panel relative to the screen but remain height/width constrained?
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.
1) 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).
2) 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).
How do I do that with the new 4.6 UI?
The second way is: 1. Check that you have added Canvas Scaler (it's must be added by default) 2. Configure it: a. "Scale with Screen Size" b. "$$anonymous$$atch width Or Height" c. Set $$anonymous$$atch to Height (in case came is for mobile hardware an it's horisontal-oriented)
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
And that's it, easy and robust.
+1: Easiest, simplest, most built-in way to solve this.
Want to save this, great answer and solves a problem I have been having too. would up vote if I could :-)
Why isn't this the selected answer? I would just like to add that you shouldn't set the aspect ratio to 1, set to whatever aspect ratio you're using
I guess, because IronNinjaGames didn't really care anymore. Thanks for your correction, I updated my answer.
No, the canvas rescaler works for all resolutions. The resolution you set is kind a reference resolution from which it will deter$$anonymous$$e the resolution of an object in the canvas. It is really easy to use, try it with the settings from my screenshot and read the documentation on it :)
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.
If you do this, your entire UI gets smaller as you lower your game's resolution. Not always what you want, especially if you are making a game/application that exists in a resizable window.
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;
}
}
The best solution for this is correct configuration of the Canvas:
As I see the best practice is:
1) to set render mode to "Screen Space - Camera"
2) Plane distance to 2-10
3. Assign one additional Canvas Scaler to your Canvas and set the following settings:
3.a: Ui ScaleMode:Scale with screen Size
3.b: Reference Resolution 2500x1440 (or your max srceen size that you planning to develop for)
3.c: Match mode: Height (1)
4) Set width and height of children with some stock
5) In all texts change Vertical Overflow to "Overflow"
this will solve lot of problems like:
1) large objects on scene
2) pixelization of objects edges
3) Absent ability to add ParticleSystem to your UI screen (sometimes needed in mobile menus games)
4) Absent ability to resize a panel relative to the screen but remain height/width constrained
5) Text hide on font resize
But in your case you can use only 3rd (highlited)
Just go to the Canvas Scaler component that belongs to your canvas and set UI Scale Mode to Scale With Screen Size then set the Reference Resolution!
That is all!
