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?