Wrpping my head around canvas,Wraping my head around Canvas placement

Question

Hi

I'm having difficulties wrapping my head around this one:

I'm trying to get the following layout:

alt text

Where the red triangles are buttons and should always preserve aspect ratio, that is they should always be right-angled triangles.

In between the triangles, i want a list of buttons, so its not just a fancy border, it's a UI element.

So basically the list of buttons on the sides should be exactly as wide, as the list of buttons are high on top and bottom.

However, using canvas allows only to have proportional heights and width, to screen height and with. So changing the aspect ratio would yield something like this: alt text

See how the corners don't match up anymore with the triangle tips?

What's more, the triangles themselves should obviously scale up and down, depending on screen resolution.

So Question:

How can I achieve a layout, where the height of the rows, matches the width of the column, but keeping that number variable, according to screen size.

Any help appreciated.

Answer 1

Ok, so i found no easy answer. what I ended up doing is the following:

The Panels containing the buttons on the side, as well as the triangles, get scaled naturally using RectTransform.

The Panels on top and bottom I have to scale myself, using the following code:

 private void Rescale(){
 
         ratio = parentRect.rect.width / parentRect.rect.height;
 
         if (bottom) rect.anchorMax = new Vector2 (rect.anchorMax.x, ratio * offsetX);
         if (top) rect.anchorMin = new Vector2 (rect.anchorMin.x, 1-ratio * offsetX);
 
         rect.offsetMin = new Vector2(0f, 0f);
         rect.offsetMax = new Vector2(0f, 0f);
     }
 
     void Update(){
         var newRatio = parentRect.rect.width / parentRect.rect.height;
         if (newRatio != ratio) {
             Rescale ();
             ratio = newRatio;
         }
     }

It's not the best solution, as it has some problems. First, It doesn't seem to be fully accurate. Looking very closely, the lines are sometimes a little off.

Setting the canvas-scaler to use only width or height helps a little.

Second, the triangles stop resizing at some point. It's right-angle triangles, so their ration is 2:1. If the Screen exceeds this ratio, the scaling of the triangle becomes somewhat unpredictable. I tried to limit my Rescale() function to max on a ration of 2:1 but it didn't really help, because the scaling doesn't just stop at that ratio. Maybe someone can still give me a hint, on how unity scales objects. So far this solution works for me.

regards.

Answer 2

Answer by spilat12 · May 22, 2018 at 11:28 PM

Try changing the UI Scale Mode of your Canvas Scaler to "Scale With Screen Size" and see if that helps you achieve the desired effect, like so: alt text

scale-with-screen.png (40.6 kB)

0 Show 1 · Share

joergipoergi · May 23, 2018 at 05:22 AM 0

Share

Thanks for the answer.

It is set to scale with screen.

It also doesn't help, to restrict scaling to either width or height, because always, the other is affected as well.

The Problem is, that the height of the buttons area, is not only defined by the device height, but also by the device width.

i.e. the the triangles size is defined by both, the height AND the width of the device. The area of the buttons is always only defined by either the width OR the height, but should actually just be defined by the scale of the triangles.

Wrpping my head around canvas,Wraping my head around Canvas placement

2 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions