Exploring UI node anchors
- Resize and anchor a Control node.
- Use the Anchor Presets to quickly set anchors.
- Experiment with different anchor settings.
Nathan
Founder and teacher at GDQuest
Anchors and containers
- The element places itself: this is when UI elements, like health bars, icons, or buttons, decide where they should position themselves relative to their parent. For example, a health bar might always stay at the top-left corner of the game window or at the bottom. We achieve this with anchors in Godot.
- The parent places children: this is when parents decide where their children go. For example, a grid component could place inventory items in a grid layout, and a horizontal box could place buttons next to each other horizontally. We achieve this with containers in Godot.
Some CSS parallels for the webdevs among youIf you've created websites before and used HTML and CSS: Note that UI frameworks, whether in Godot or other desktop and mobile applications, have some differences with respect to CSS. You won't be able to directly apply your knowledge of web development but you can still draw some parallels to help you understand concepts faster.
- Anchors are a bit like
position: absolute
. They allow elements to place themselves relative to their parent. - Containers are like
display: flex
ordisplay: grid
. They allow parent elements to place their children in a specific layout.
- A container to place the children in a row. The parent would be the outline of the navigation bar and the children would be the logo and the three buttons.
- Anchors to position the notification circles relative to the buttons.
If a Control node has no parent, then the anchors are relative to the game window.
Create and resize a TextureRect node
My Control node is small and at the top left of the viewportWhen creating a Control node with the shortcut the add child node shortcut, the node is created at the top left of the viewport with a small size. In that case, you need to change its anchor layout to make it cover the entire game window. To do this, select the Control node in the Scene dock. In the toolbar above the viewport, click the Anchor Presets button and select the Full Rect preset. This will resize the node to cover the entire game window. We'll talk more about anchor layouts in a moment.
dialogue.tscn
.1920
by 1080
(these are the dimensions of our game window).I cannot resize the window!On Windows, if your screen resolution is smaller or equal to the game's resolution (and window size). If you're experiencing this issue, you can try the following steps to reduce the window size while preserving the ability to follow along the lessons: The Window Width Override and Window Height Override settings change the size of the game window without affecting the editor viewport. You can use these settings to run your game in different resolutions.
- Open the ProjectProject Settings... window.
- Turn on the Advanced Settings radio button at the top right of the window.
- Navigate to the DisplayWindow category.
- Find the Window Width Override and Window Height Override settings.
- Set Window Width Override to 1280 and Window Height Override to 720.
Change the anchors
My TextureRect node becomes small, it does not resize to cover the screenAn anchor layout is relative to the parent Control node. If the parent node is small, the child node will also be small. In this case, the parent node is the Control node at the root of the scene. To address this: The parent node should now cover the entire game window. The TextureRect node should automatically resize to cover the screen as well. If not, you can select the TextureRect node again and apply the Full Rect preset to it too.
- Select the parent Control node in the Scene dock.
- Click the Anchor Presets button in the toolbar above the viewport
- Select the Full Rect preset.
You can do math in any number field in Godot
You can actually write math expressions in all numerical fields in the editor. Divide, multiply, or add numbers right there! The engine will do the math for you.
Size
property and typing /2
after the number, then pressing ↵.Try Answering this
Let's explore
Tip 1: Anchor values
0
to 1
, where 0
is the top left corner and 1
is the bottom right corner.How come I can drag the anchors beyond 0 and 1 then?Technically, you can drag your anchors outside the limits of your viewport (delineated by the red, green and blue lines), but that's not useful for most applications. It would resize your texture proportionally to a distance outside your game screen. Feel free to try it and run the scene! That's what this lesson's for.
Tip 2: Anchor presets
Changing the anchor presets moves and resizes the nodeWhen you change the anchors presets, your node's size will also change. The anchor presets are a quick way to set the anchors, position, and size of UI elements at the same time.
Tip 3: Duplicate nodes
Tip 4: Move anchors
Nathan
Founder and teacher at GDQuest
Challenge:
click to reveal Hint
click to reveal Hint
click to reveal Hint
click to reveal Hint
Challenge:
click to reveal Hint
click to reveal Hint
Challenge:
click to reveal Hint
Recap
- There are two ways to position UI elements: anchors and containers.
- Anchors affect the position and size of a Control node relative to its parent (or the game window).
- You can use anchor presets to quickly set anchors.
- You can also fine-tune how a node resizes with the window by moving its anchors manually.
- Experimentation is key to understanding new concepts and breaking out of over-reliance on tutorials.
Lesson Q&A
Use this space for questions related to what you're learning. For any other type of support (website, learning platform, payments, etc...) please get in touch using the contact form.