Update Size and anchors page for Godot 4.0

tutorials/ui/size_and_anchors.rst

@@ -21,47 +21,45 @@ the top of the screen, or maybe the right or left margins.
 
 .. image:: img/anchors.png
 
-This is done by editing the *margin* properties of controls. Each
-control has four margins: left, right, bottom, and top, which correspond
-to the respective edges of the control. By default, all of
-them represent a distance in pixels relative to the top-left corner of
-the parent control or (in case there is no parent control) the viewport.
-
-.. image:: img/margin.png
-
-So to make the control wider you can make the right margin larger and/or
-make the left margin smaller. This lets you set the exact placement
-and shape of the control.
-
-The *anchor* properties adjust where the margin distances are relative *to*.
-Each margin has an individual anchor that can be adjusted from the
-beginning to the end of the parent. So the vertical (top, bottom) anchors
-adjust from 0 (top of parent) to 1.0 (bottom of parent) with 0.5 being
-the center, and the control margins will be placed relative to that
-point. The horizontal (left, right) anchors similarly adjust from left to
-right of the parent.
+A control node can be positioned using anchors under the ``Layout`` tab by
+setting the ``Layout Mode`` property to ``Anchors``. You can now position the
+anchor by setting the ``Anchors Preset`` property to a preset or to ``Custom``
+to customize the anchor's position.
 
-Note that when you wish the edge of a control to be above or left of the
-anchor point, you must change the margin value to be negative.
+.. image:: img/anchor-layout.png
+
+Anchor presets can also be set by using the toolbar's Layout menu, above the
+viewport.
+
+.. image:: img/anchor-preset-toolbar.png
 
-For example: when horizontal anchors are changed to 1, the margin values
-become relative to the top-right corner of the parent control or viewport.
+Custom Anchors
+--------------
 
-.. image:: img/marginend.png
+You can customize an anchor's position by setting the ``Anchors Preset``
+property to ``Custom``. The ``Anchor Points`` properties anchor the ``Left``,
+``Top``, ``Right``, and/or ``Bottom`` edges of the node to the origin, center,
+or end of its parent control. The value of each property can be adjusted from
+0 (the top or left of the parent) to 1 (the bottom or right of the parent),
+with 0.5 being the center. The corresponding ``Anchor Offsets`` properties will
+be placed relative to these points.
 
-Adjusting the two horizontal or the two vertical anchors to different
+Adjusting the two horizontal or the two vertical anchor points to different
 values will make the control change size when the parent control does.
-Here, the control is set to anchor its bottom-right corner to the
-parent's bottom-right, while the top-left control margins are still
-anchored to the top-left of the parent, so when re-sizing the parent,
-the control will always cover it, leaving a 20 pixel margin:
 
-.. image:: img/marginaround.png
+The ``Anchor Offsets`` properties adjust the pixel distance of the ``Left``,
+``Top``, ``Right``, and/or ``Bottom`` edges of the node relative to its
+corresponding anchor point.
+
+Note that when you wish the edge of a control to be above or left of the
+anchor point, you must change the offset value to be negative.
+
+.. image:: img/anchor-points.png
 
 Centering a control
 -------------------
 
-To center a control in its parent, set its anchors to 0.5 and each margin
+To center a control in its parent, set its anchors to 0.5 and each offset
 to half of its relevant dimension. For example, the code below shows how
 a TextureRect can be centered in its parent:
 
@@ -99,15 +97,6 @@ a TextureRect can be centered in its parent:
     rect.OffsetBottom = textureSize.Y / 2;
     AddChild(rect);
 
-Setting each anchor to 0.5 moves the reference point for the margins to
-the center of its parent. From there, we set negative margins so that
-the control gets its natural size.
-
-Layout Presets
---------------
-
-Instead of manually adjusting the margin and anchor values, you can use the
-toolbar's Layout menu, above the viewport. Besides centering, it gives you many
-options to align and resize control nodes.
-
-.. image:: img/layout_dropdown_menu.png
+Setting each anchor to 0.5 moves the reference point for the offsets to
+the center of its parent. From there, we set negative offsets so that
+the control gets its natural size.