# How can I scale my UI elements to the lesser screen dimension in Unity 5?

I want to create a custom mobile pad for my game. The mobile pad consists of two parts (both inside an ui canvas):

• The D-Pad, which will be anchored to the bottom-left side.
• The button group will be anchored to the bottom-right side.

I would like to resize the element on different resolutions, so that the element (in my case, the D-Pad is an image):

• Has a size of 20% of the minimum of the width and the height.
• Has pivot of x=0.5, y=0.5.
• Having anchor of left-bottom, its coordinates are (15%, 15%) wrt the minimum of the width and the height.

What I tried is to use an Aspect Ratio Filter in the D-Pad image with ratio=1, but it did not work as intended (the coordinates led the image to an unexpected place).

Note: I am a n00b to Unity. I don't know whether it is right but my Canvas Scaler scales by Constant Pixel Size

These images should illustrate what I want to achieve:

What should I do to make it work like in the pictures?

Edit I attached this behavior, based on answer, to handle the change by runtime:

[RequireComponent(typeof(UI.CanvasScaler))]
class CanvasSmartScaler : MonoBehavior {
private CanvasScaler _scaler;
void Start() {
_scaler=GetComponent<CanvasScaler>();
}
void Update() {
//OMITTED CODE: here I set the scale mode as in the Editor but right now i am in my mobile device and cannot remember the exact lines
if (Screen.currentResolution.width < Screen.currentResolution.height) {
_scaler.matchWidthOrHeight=0;
} else {
_scaler.matchWidthOrHeight=1;
}
}
}


And attached that behavior to the canvas. However, for my debug exe (just for debug purposes) it always picks the 1-case regardless how do I resize the window. What am I missing?

• Have a look at scale with screen size. docs.unity3d.com/Manual/script-CanvasScaler.html – M156 May 9 '16 at 7:31
• On your second problem. First of all i could not get Screen.resolution to compile. I Had to use Screen.currentResolution. This however returns the size of the monitor not the app window and this will not change. To get the current size of the player windows use Screen.widht and Screen.height. – Uri Popov May 9 '16 at 14:39
• Sorry. currentResolution – Luis Masuelli May 9 '16 at 14:40
• I rewrote the code from my mobile device instead of copypaste. That's why the code may have that stuff. But let me fix it – Luis Masuelli May 9 '16 at 14:41

On the canvas scaler try :

UI Scale Mode = Scale With Screen Size Then give a reference resolution. I like to use the standard 1920 x 1080. Screen Match Mode = Match Width or Height with a Match value of 0.5.

Also you might want to checkout how to make your UI image into a 9 sliced type. Check this out.

You can get a reference to the canvas scaler.

using UnityEngine.UI;
CanvasScaler scaler;
GameObject canvasGameObject;

void Start()
{
scaler = canvasGameObject.GetComponent<CanvasScaler>();
}


I'm writing this code directly off the top of my head so it might not work. Let me know.

• Perhaps will work. I'm trying it now. However, the scalefactor is determined by a weighted mean of height delta and width delta. 0 is for width, 1 is for height. Is there a way I can play with this in Runtime? – Luis Masuelli May 9 '16 at 12:56
• Is there a way I can reference the CanvasScaler on runtime? – Luis Masuelli May 9 '16 at 13:05
• updated the answer a bit. – Uri Popov May 9 '16 at 13:09
• You have my upvote. Please could you check the addition I tried? I am trying this in an exe right now, but it is not reflecting other value than 1 (height as reference) when I resize the screen. – Luis Masuelli May 9 '16 at 14:24