How to calculate sizeDelta in RectTransform?

The definition is somewhat confusing, indeed.

sizeDelta, basically, returns the difference between the actual rectangle of the UI element and the rectangle defined by the anchors.

For example, given a rectangle of 300x200:

Anchors in the same place as the corners of the rectangle: sizeDelta is (0,0) enter image description here

Left or right anchors at half width of the rectangle: sizeDelta is (150,0) enter image description here enter image description here

All four anchors in a point: sizeDelta is (300,200) (i.e.: same size as the rectangle) enter image description here enter image description here

As you can see, it doesn't matter at all where the center of the rectangle defined by the anchors is, the only thing that matters is the difference between the width and height of the element rectangle and the anchors rectangle.

In pseudo-code, it's like this:

sizeDelta.x = UIElementRectangle.width - AnchorsRectangle.width;
sizeDelta.y = UIElementRectangle.height - AnchorsRectangle.height;

So, if the UI Rectangle has a dimension bigger than the anchors' one, sizeDelta is positive, if it's smaller, sizeDelta is negative.


sizeDelta: If you made a search, and end up here for an explanation of what sizeDelta means, like GetComponent().sizeDelta.y, then clear your mind.

Visualize a small PANEL, resting on top of a big CANVAS, it's Parent object. In the PANEL's Rect Transform component, there are 2 rectangles defined:

(a) The rectangle defined by its Anchors. Those triangles. Normally related to the Parent Object location and dimensions, in this case the CANVAS.

(b) The rectangle defined by its own size, the PANEL's own dimension.

sizeDelta = (b) - (a)

That's it. Because normally an interactive component like a Button, smaller in size compared to the object where it rests, like a Panel, and because of that, normally sizeDelta is a negative value. Button size - Panel size = a negative value, normally. You know the term Negative Space, used in general Design theory? Think of it, as the space NOT used by a Button resting on a Panel.

Example: How to find the height of a Panel, that is a Child of a Canvas that is a Camera overlay, thus screen sized. The Anchors of the Panel are related to the Canvas dimensions. Script is on the Panel object:

panelHeight = Screen.height + this.GetComponent().sizeDelta.y;

Remember, sizeDelta is normally negative so it reads more like this pseudo code:

panelHeight = Screen.height - this.sizeDelta.y

Hope this helps you, drove me crazy for a while. Cheers!

References:

https://www.youtube.com/watch?v=VhGxKDIKRvc

https://www.youtube.com/watch?v=FeheZqu85WI