logo

Exploring UI node anchors

An essential part of creating user interfaces is defining how elements are positioned with respect to one another. In Godot, we do this by composing control nodes. They are represented with green icons. control nodes are special nodes that can be positioned with respect to one another using anchors and containers, two core features of Godot's UI system. Once you understand them, the engine's UI system makes much more sense.
In this lesson, we'll create a test scene with a single texture. We'll use it to experiment with anchors and play around with them to get a feel for how they work.
You'll learn how to:
  • Resize and anchor a Control node.
  • Use the Anchor Presets to quickly set anchors.
  • Experiment with different anchor settings.
Remember the programmer mindset? The point here is to start picking up the habits of experienced developers and power users: Learning a new tool by playing with it and running little experiments.
When I started, there wasn't much documentation or tutorials for some of the tools I wanted to learn, so the only way to pick them up was to experiment. It's a great way to learn because what you discover sticks with you better. And it's fun!
Nathan
Founder and teacher at GDQuest

Anchors and containers

Most user interface frameworks have two general ways of placing elements relative to each other:
  1. 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.
  2. 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.
In practice, we often mix and match both ways to achieve the desired results.
Some CSS parallels for the webdevs among you
If you've created websites before and used HTML and CSS:
  1. Anchors are a bit like position: absolute. They allow elements to place themselves relative to their parent.
  2. Containers are like display: flex or display: grid. They allow parent elements to place their children in a specific layout.
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.
Let's examine this navigation bar to illustrate how anchors and containers work together.
Navigation bar with logo, spacer, a link, notifications, and a user button. The notification and user have a little number indicating there are updates
We have a logo, an empty space, and three buttons placed in a single row. The notifications and user buttons have a little number inscribed in a circle to indicate updates.
To implement this layout, in Godot, we would use:
  1. 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.
  2. Anchors to position the notification circles relative to the buttons.
To create a navigation bar, we would use Godot's HBoxContainer node to place the children in a row (HBox stands for horizontal box). It's one of the most useful Godot containers, along with VBoxContainer, which arranges children vertically, and GridContainer, which arranges children in a grid.
Example of containers
Example of containers
Three of the most useful container node types in Godot
You'll get to experiment with containers in the next module M8. We'll use the VBoxContainer node to create dialogue choices for the player and align them vertically. For now, in this module, we'll work exclusively with anchors to place elements in the scene.
Anchors define the position of each corner of a Control node proportionally to its parent
If a Control node has no parent, then the anchors are relative to the game window.
Control node. There are four anchors: top left, top right, bottom left, and bottom right. This image illustrates a few anchor positions:
Examples of anchors
Examples of anchors
Examples of anchors
Ok, now let's try this in Godot!

Create and resize a TextureRect node

We'll create a new scene with a single texture and try different anchor settings to see how they affect the texture's size and position. Later, we'll build upon this to create the dialogue scene.
By default, the project should have no scene open. Click the User Interface button in the Scene dock to create a new scene with a Control node as the root.
Creating a new user interface scene
Rename the node to Dialogue and save the scene in the lessons folder as dialogue.tscn.
You will first add a test image that you'll use to experiment with anchors. For this, you'll use a TextureRect. A TextureRect is a type of control node that displays a texture image.
The difference with sprite nodes is that TextureRect inherits from Control nodes, so it can use anchors, while sprites are regular 2D nodes and can't use them. You can think of TextureRect as a Sprite2D that can be used in the engine's UI system.
Add a new TextureRect node as a child of the Dialogue node. You can press ctrla (on Mac: ⌘a) to open the Create New Node dialog. A small empty orange box appears in the viewport.
With the Select Mode active (q), notice how there are also four green pins anchored at the top left corner of the box. They represent the anchors of the TextureRect node.
Adding a TextureRect node
In the FileSystem dock, double-click the assets folder to expand it. In this folder, you can see an image file named test.svg.
Drag this image on the TextureRect node in the Scene dock to apply it to the node. This is equivalent to dragging and dropping the file to the Texture property in the Inspector. This resizes the node in the viewport to match the texture size.
The TextureRect node with the test.svg texture applied
In the inspector, the Expand Mode property of the TextureRect node determines how the texture stretches. By default, it's set to Keep Size, which forces the node to match the texture's size. Instead, let's allow our TextureRect node to dictate the size of the texture.
In the Inspector, change the Expand Mode to Ignore Size. This will change the image size to fit the node's bounding box, regardless of the texture's original dimensions. The node should shrink to a small size after changing the setting.
select expand mode
You can now use the Select Mode and click and drag the orange handles to resize the node. Stretch the node until it covers the entire screen. You can also change the node's size precisely in the Inspector. In the LayoutTransform category, set the Size property to 1920 by 1080 (these are the dimensions of our game window).
Setting the size
Time to test! Press f6 (on Mac: ⌘r) to run the scene. Once your game is running, try resizing the window to make it smaller. And notice that... the image gets cropped! That's normal. The TextureRect node is anchored to the top left of the game window by default, so it doesn't resize with the window. It just stays positioned at the top left.

Change the anchors

You will now change the node anchors. With the TextureRect node selected, click the Anchor Presets button in the toolbar above the viewport and select the Full Rect preset.
This preset moves the anchors to the four corners of the parent node: the top left anchor is at the top left corner of the parent, the top right anchor is at the top right corner, and so on. You can see this with the four green pins in the viewport on each corner of the node. This causes the node to resize with its parent and, in this case, with the game window. The Full Rect preset is a good starting point for most user interfaces.
Run the scene again, and try resizing the window. Now, the texture resizes with it!
Let's try moving the green pins manually to better understand how anchors work. With the Select Mode active in the toolbar, click and drag the green pin in the right corner of the TextureRect node. This is the top right anchor. Drag it to the left until it reaches the center of the top edge of the node.
It should snap to the center of the top edge once you reach it with the mouse, which Godot indicates by drawing a red vertical line. These anchors mean the texture will now scale half as much horizontally as it does vertically. The texture will still resize to fit the window vertically.
To better understand these anchors' effect, let's resize the TextureRect node. Locate the LayoutTransformSize property in the Inspector and halve the width and height of the node. You can run math in property fields

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.
by clicking the number in the Size property and typing /2 after the number, then pressing ↵.
Now, you can better see the anchor's effect: the image resizes horizontally to half the screen width.

Try Answering this

What do anchors affect?

Let's explore

It's time to learn by experimenting. You have some basics down, but there's much more to explore. Let's sail some more before uh... dropping the anchor.
Try different anchor settings and see how they affect the texture. Feel free to add different textures, or even add other TextureRect nodes to the scene and experiment with them.
Don't worry about messing anything up. We will delete this texture and make a fresh new one in the next lesson.
Here are four general tips to help guide you. Try them one by one; you can always undo them by pressing ctrlz (on Mac: ⌘z).

Tip 1: Anchor values

When moving anchors interactively in the viewport, you can see their values in the Inspector under the category LayoutAnchor Points. The values range from 0 to 1, where 0 is the top left corner and 1 is the bottom right corner.
Note that the Anchor Points category only appears when the node's LayoutAnchor Presets is set to Custom.
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

When you select a Control node, you can apply anchor presets from two places. One is the Anchor Presets button in the toolbar above the viewport. (That's what we used earlier in the lesson to select the Full Rect preset). You can also select anchor presets in the Inspector with the property LayoutAnchor Presets.
Changing the anchor presets moves and resizes the node
When 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

You can duplicate a selected node by pressing ctrld (on Mac: ⌘d). The new node will appear in the scene dock. In the viewport, the copy of the texture will overlap with the one you duplicated. To see it, you can drag it somewhere else.
Remember since you duplicated a node, the new node's anchors will also overlap with the anchors of the original node you duplicated. With the new node selected, you can move its anchors too.
Go ahead and try it!

Tip 4: Move anchors

When you move a Control node with the Select Mode or the Move Mode active, you change its offset. The offset is the distance between the node's anchors and its position. You can also move the anchors with the node without changing the offset by clicking the anchor button in the toolbar above the viewport.
Try clicking the anchor button and moving the node along with its anchors instead of offsetting it.
You may be tempted to rush into the next lesson... I understand! But I recommend taking your time and playing around. Experimentation is very important to really assimilate and own new concepts. That's how you get out of tutorial hell and become able to progress on your own.
Nathan
Founder and teacher at GDQuest
Try placing anchors freely or using presets or anchor values and practice predicting what you'll see when you run the scene and resize the window.
Here's a series of small challenges to guide you, but feel free to come up with your own.
Challenge:
Position the texture at the center of the screen and prevent it from resizing with the window.

click to reveal Hint

click to reveal Hint

click to reveal Hint

click to reveal Hint

Challenge:
Position the texture/image in the center of the screen and allow it to resize with the window. For this challenge, you'll need the image size to be smaller than the game window. A size of 960x540 is a good starting point.

click to reveal Hint

click to reveal Hint

Challenge:
Make two TextureRect nodes that stay in the top left and bottom right corners of the screen, respectively. They shouldn't resize with the window.

click to reveal Hint

Once you feel you have some grasp on how anchors work, let's move on and create our dialogue scene!

Recap

In this lesson, you learned that Godot's UI system relies on two concepts: anchors and containers. Anchors define the position of Control nodes relative to their parent, while containers place their children in a specific layout. We mostly use anchors in this module, but we'll also use containers in the next module to create a branching dialogue system.
It takes a while to get used to working with anchors and containers, so don't worry if they're not entirely clear yet. They'll make more and more sense the more you use them.
The key takeaways at this point are:
  1. There are two ways to position UI elements: anchors and containers.
  2. Anchors affect the position and size of a Control node relative to its parent (or the game window).
  3. You can use anchor presets to quickly set anchors.
  4. You can also fine-tune how a node resizes with the window by moving its anchors manually.
  5. Experimentation is key to understanding new concepts and breaking out of over-reliance on tutorials.
With these new tools in our inventory, we'll get started on our dialogue system. See you in the next lesson!
PreviousNext

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.

  • Window mode is "maximized" by defaultaramplWindow mode is "maximized" by default in the project settings. Maybe it would be better to set "windowed" by default? 1 2 May. 15, 2024
  • Window Troublesadorable-antWhen I run the project via F6, it opens in a borderless, huge window, despite that not being what I had set it to. There's no handles to resize it with either, which is making experimenting with anchors a little bit difficult. I've tried to fiddle with the window settings a little in the project settings, but without knowing what I'm doing and not wanting to do anything I can't reverse, I haven't really made any progress. No results that I could find from a couple searches either. The window settings for size (I would think that's where the problem would lie) currently are as follows. Viewport Width - 1920 Viewport Height - 1080 Mode - Windowed Initial Position Type - Center of Primary Screen. Initial Position - x 0, y 0 Initial Screen - 0 Resizable - On Borderless - Off Honestly, not even sure why this is happening. It seems like it should be functioning normally but it just isn't. 18 1 Aug. 06, 2024
  • I don't get it.tesfalconI'm focusing on mobile games in Android. There's no window resizing capability. Everything is full-screen all the time. Any UI is either part of the main screen or its going to be overlaid atop the main screen. My current project doesn't change off the main scene because of my own ignorance in dialogue scenes atop the game play area. I'm looking forward to how these dialogue scenes interact with the rest of the game so I can put in some kind of storyline rather than how I'm currently doing it. I don't see how anchors and resizing will benefit me at this point. 3 1 Jun. 05, 2024
  • No lessons folder in the downloadcleverinfoHi, section "Create and resize a TextureRect node" refers to saving in the lessons folder. This did not exist in the download (was this intentional). I created once anyway. Just thought you'd like to know 1 1 May. 13, 2024
  • Final examples in lesson before "Let's explore" moved too quickly.raincloudI feel like I've been able to get a grasp on how anchors work through experimentation, however, I would have appreciated just a bit more explanation before being told to experiment. The lesson was making sense to me until we were told to move the anchors manually. I moved the TextureRect's right anchors to 50% of the viewport width, and then resized the TextureRect to half it's scale horizontally and vertically as instructed. Then the lesson says "Now, you can better see the anchor's effect", but instead I was perplexed! When I ran the scene, it wasn't clear at all to me why the horizontal scale of the texture was staying proportional to the window, while it's vertical scale was shrinking rapidly. In hindsight, I think I would have had an easier time if the lesson had explained at this point that the scaling is affected by the relationship of the anchors to their node's position and scale, not just their relationship to their parent node. It also may have helped if I had known I should try running the scene after moving the anchors, but before resizing the TextureRect in order to see the difference. In general, it really feels like this section could use a bit more explanation and screenshots/gifs before leaving students to explore on our own. The image of example anchor positions under "Anchors and containers" added to my confusion here. The examples for "Resizing with the viewport", "always stuck to the top right", and "always stuck to the middle" make sense, but the example "stuck at 50% right, will only start resizing if the viewport is smaller than 50%" gave me incorrect expectations of how anchors work. In fact, when I try this arrangement of anchors, this is not the result I experience at all. The texture resizes no matter the size of the viewport, however, it resizes slower horizontally than vertically. In the example image, it's also not clear if the positions of the anchors shown are meant to be in relation to their object or to the parent viewport. I understand that every student may find different things hard to grasp, but I found this lesson to be far more confusing than any of the others. It's felt like the previous lessons have better provided the students with explanations about a concept's basics before asking us to experiment. I think with a little more clarification I would have felt much more confident when it came time to explore on my own. 1 0 Sep. 17, 2024
  • First challenge hint issuejumpy-goatMaybe there's something wonky with my setup (I tried deleting my TextureRect and starting over to be sure), but the hints for the first challenge don't actually help me solve the puzzle. When I apply the anchor preset and then change the size of the node, the texture grows down and to the right and the anchor points all stay firmly in the middle of the parent node. I have to **re-apply** the anchor preset **after** changing the size of the node in order to actually accomplish the task. Does that sound like something funny going on with my configuration? Or was I reading the hint text too literally? 1 0 Sep. 16, 2024
  • Maybe speak a bit more to how anchors affect sizingjumpy-goatCurrently, there's a quiz question earlier on in the lesson that confirms that anchors will affect both the size and positioning of a node, however up to that point in the lesson we didn't explicitly say that having anchor points touching removes resizing along that axis. This actually became problematic for me when I hit the first challenge and had absolutely no idea what was meant by "prevent the texture from resizing with the window". A quick look through the questions down here and someone spelled it out nicely and I was able to take note of it, but with the lesson written the way it currently is, that particular ask seems to come out of left field a bit. Even just briefly mentioning right off the bat before we change anything about the anchor points, how that configuration will prevent the image from being resized would set the groundwork for this discovery. 3 0 Sep. 16, 2024
  • setting anchors to full rect makes the image 40x40cautious-crabno idea on what i'm doing wrong, but when i set the anchor preset to full rect it just makes the texturerect smaller and replacing the anchors manually also doesn't work. very frustrating 1 0 Sep. 03, 2024
  • Typomejingiard"A  `TextureRect` is a type of *controle node* that displays a texture image." There is a tiny typo here, just wanted to make a contribution, "control" instead of "controle" 1 0 Aug. 11, 2024
  • About anchor in generalHazlarHello, I followed the course, but I'm a little confused about this node, so a Control is a space that displays a view by a texture composed of anchors that define the visibility of this view according to the size of the window or its resize? In the mini_dungeon, when I shrank the window, all the view and the elements of the scene (sprite, area, etc.) kept their positions in relation to the others. I changed the positions of the anchors and something escapes me: *example 1:* When I position them at the four corners of the size of the Control_node and I resize the window when the scene is launched everything remains displayed in the frame of the Control_Node, however the simple offset of the anchors vertically: *example 2:* `( Right : 0.8 , Bottom : 1, Left and top : 0)` allows to swallow everything on its side, whether I resize the window of the game launched by the left side or not. Now I think that anchors act like walls that, when pushed from behind (by the user), protect the contents inside (example 1) while the offset in example 2 does not preserve the contents after the 0.8 (0.7, 0.6, etc.). Thanks a lot 3 0 Jul. 19, 2024
  • Don't Understand Anchor Scaling When It's Not exactly 0% or 100% of a TextureRect's Dimensionsslim-lemur1) We know what happens when the anchors are touching: No scaling along those axis. (e.g. Top and bottom anchors are touching = no vertical scaling when the viewport resizes. All 4 touching = no scaling at all when viewport resizes.) 2) We know what happens when the anchors match the dimensions of the textureRect: Proportional scaling. (e.g. if you have a tectureRect in the top left part of the screen, and have the anchors on the 4 corners, the textureRect image will scale when the viewport resizes so it's always stays as the top-left quadrant.) 3) But what happens if the "anchor rectangle" is larger or smaller than the sprite? I would expect that the portion defined by the anchors would resize proportionally, like in "2)". (e.g. so if I have a full-screen image, and have the anchors surround the bottom-left portion. Then the bottom-left would proportionally scale with the viewport and take up the bottom-left quadrant.) However, this is not what seems to happen. If the anchors define an area larger than the sprite, then the sprite gets smaller and smaller until it fully disappears, and vice versa. This seems less proportional and more exponential. Now realistically, it's unlikely that I'll move anchors in a way besides situation "1)" and "2)", but I'm just curious about what's going on under-the-hood. 5 0 Jul. 10, 2024
  • Similar to the webyy_alexI feel that the anchor system and the adaptive layout of the web are very similar. If you have experience with web CSS, you can use a similar approach to understand Godot's anchors. 1 0 Jun. 15, 2024
  • Small typoill-fated-heronIn the challenge #1: Position the **texutre**/image 1 0 May. 24, 2024
  • Allow to resizeArtemaleI coulnd't find a way to "allow to resize the image with the window" for challenge #2 1 0 May. 20, 2024
  • None of the settings seem to affect anythingMarcJI've changed the anchors, size parameters and expand mode as indicated above and tried a bunch of other settings but no matter what the behavior of the window doesn't seem to change. The image resizes to fit inside the window but maintains it's aspect ratio, that is it never stretches but shrinks/grows to fit inside the window. 5 0 May. 13, 2024
Site is in BETA!found a bug?