Update size and anchors tutorial #8855
Open
+52
−36
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
KMouratidis
force-pushed
the
update_size_and_anchors_tutorial
branch
from
bf946e2
to
0101d29
Compare
Calinou
added
bug
area:manual
KMouratidis
force-pushed
the
update_size_and_anchors_tutorial
branch
from
0101d29
to
461a918
Compare
menaechmi
reviewed
Feb 14, 2024
There was a problem hiding this comment.
I was trying to understand the currently available Godot Docs on this topic and came across this PR when I finally understood the terminology had changed significantly. In reading it, I discovered you can do it all with the mouse, and I thought it should be mentioned in the page.
My suggestions would be:
- Instead of a note saying "Read the section at the end" just have the section there
- Add mouse control information, which makes setting anchors much easier. It even makes it so you don't need to know what the values mean.
With mouse information, this could probably be along the lines of:
- Anchor Presets
- Drag and drop the green handles to show where the control is relative to. Drag the control to where it should be.
- Inspector Anchor Points and Anchor Offset information (Precision placement of a control)
- Centering a control
Comment on lines
+116
to
+123
| Instead of manually adjusting the margin and anchor values for every node, you | ||
| can use the toolbar's Layout menu, above the viewport. This offers multiple | ||
| common presets (e.g. top right, bottom left, center, full rect, bottom wide). | ||
|
|
||
| .. image:: img/layout_dropdown_menu.webp | ||
|
|
||
| After picking a preset (bottom right in the image below), you can also offset | ||
| the control node manually by simply dragging it away: |
There was a problem hiding this comment.
- This is also available from the Inspector > Layout > Anchors Preset. I'm not sure either is preferred, but so much happens in the Inspector that it's probably worth knowing you can also adjust it there.
Comment on lines
+24
to
+29
| .. note:: | ||
|
|
||
| The simplest approach to control node positioning is to pick a layout | ||
| preset from the toolbar above the viewport (see the section at the end). | ||
| We go into a bit more detail here for demonstration purposes, and so you | ||
| can get a better understanding of how the layout system works. |
There was a problem hiding this comment.
I think instead of the note, the Anchor Presets should just be here, because if that solves all of the problems the user has they don't need to keep reading to learn information they aren't going to use.
Comment on lines
+31
to
+55
| This is done by first selecting **Anchors** under Layout > Layout Mode and then | ||
| **Custom** Under Layout > Anchors Preset. This opens up a menu where we can | ||
| edit the **Anchor Points** and **Anchor Offset** properties. Each control | ||
| has four anchor points and their corresponding offsets: left, right, bottom, | ||
| and top. Anchor points represent a distance in the range of [0, 1] relative to | ||
| the equivalent point of the parent control or (in case there is no parent | ||
| control) the viewport. | ||
|
|
||
| .. image:: img/margin.webp | ||
|
|
||
| The other important group of properties that affects positioning is the | ||
| anchor offsets. The *anchor points* adjust where the *anchor offsets* | ||
| are relative *to*. Each individual anchor point can be adjusted from the | ||
| beginning to the end of the parent. So the vertical (top, bottom) anchor points | ||
| adjust from 0 (top of parent) to 1.0 (bottom of parent) with 0.5 being the | ||
| center, and the control anchor offsets will be placed relative to that point. | ||
| The horizontal (left, right) anchor points similarly adjust from left to right | ||
| of the parent. | ||
|
|
||
| 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. | ||
| anchor point, you must change the anchor offset value to be negative. | ||
|
|
||
| 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. | ||
| For example: when the horizontal anchors are changed to 1, the anchor offset | ||
| values become relative to the top-right corner of the parent control or | ||
| viewport. |
There was a problem hiding this comment.
This can also be done with mouse control by dragging the green anchor handles to set the anchor points along with setting the offset by dragging the node to where you want. With snapping and being able to see where they end up visually, it's an easier path to setting the anchors that doesn't require knowing the numbers.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Seeing #7106 wasn't ready to be merged and went inactive, and that no rewrite has happened yet, I tried addressing some of the comments on there, but kept the rest of the tutorial as close to the original as possible. I also updated & added images.
Edit: The latest force-push was a slightly better image for showing anchors.