1
\$\begingroup\$

I have been some time working with unity, and I am trying to get a better understand of the UI system.

I am a mobile developer and I am redesigning the UI but I am unable to achieve what I want.

My game is portrait and I have a panel. I want the panel to have a maximum width of 1080. In case that the panel doesn't fit in the screen when the aspect ratio is less ( like new iPhone X) . I want it to shrink it a bit with a minimum of 700. In the case that the screen is larger than 1080 ( like iPad pro). I want the panel to have the maximum size.

Visual of what I want to achieve.

Nexus 6P ( 1080x1920)

enter image description here

iPhone X(1125x2436)

enter image description here

iPad pro (2048x2732)

enter image description here

I have been playing with layout element and content size fitter without good result

If I set the min width size to 700 and preferred size to 1080 nothing happen (even playing with flexible width)

If I set the content size fitter. If I choose the preferred size it just get always the preferred size and same with min.

How these elements works, and how I can achieve the desired effect?

Canvas configuration: enter image description here

\$\endgroup\$
1
\$\begingroup\$

I think you can solve this problem using Anchors. Set your anchor of parent panel to stretch.

below I attached a screenshot to make you understand what I am saying,

You can found this tool in Unity's Transform component

You can found this tool in Unity UI's Rect Transform component where you have to click on the icon and it pops up the attached screenshot.

Now press Alt + Shift (Alt to set position and Shift to set pivot of the object). You will achieve the result you wanted by pressing both alt and shift together and select right one on the downside (last one).

you can learn or read more about anchor point in this unity doc :

Setting UI for multiple screen resolution

\$\endgroup\$
  • \$\begingroup\$ Thank you for the answer, however, this will make the RectTransform to scale always at the same ratio. I want to scale it with a maximum and a minimuim \$\endgroup\$ – D4rWiNS Oct 18 '18 at 8:09
  • \$\begingroup\$ As per my understanding, it scales to your screen size, even i use this method to scale my UI according to screen size, i think you understand it in wrong manner. however, i will explain here again that when you press Alt with shift and holding both key when you click the last anchor preset it sets your anchors at the corner and it allows you to strecth your screen. \$\endgroup\$ – Kartik Shah Oct 18 '18 at 12:06
  • \$\begingroup\$ As you has stated it scales with screen size, but it don't limit the min size or max size, it just scale it, so If you have a panel with a width of 100. and you want to limit the width to a maximum of 200, if there is a screen 3x times larger the width will be 300, instead of 200. I want to give a maximum width \$\endgroup\$ – D4rWiNS Oct 19 '18 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.