> ## Content Index > Fetch the complete content index at: https://blog.febucci.com/llms.txt > Use this file to discover other available public pages before exploring further. # How to Create UI in Godot 4: Core Concepts - URL: https://blog.febucci.com/2024/11/godots-ui-tutorial-part-one/ - Published: 2024-11-28T09:07:46.000Z - Updated: 2026-04-06T07:24:51.000Z - Description: Learn Godot's UI system from scratch: Control nodes, anchors, containers, and responsive layouts. Part 1 covering basic to complex interfaces in Godot 4. - Author: Daniel Bologna - Tags: Tutorials, Godot Godot's UI system is built on Control nodes, anchors, and containers. Once you get how these three pieces fit together, you can build anything from a simple health bar to a full responsive menu that works on any screen size. This is part 1 of our Godot UI series, and we'll cover everything you need to get started from zero. ## How do I create UI in Godot 4? Hi there! This is a short introduction about how to make user interfaces in Godot, from main menus, inventory systems, game HUD and more, while keeping it responsive for different screen resolutions. 0:00 /0:18 1× This post is the start of our own learning notes on Godot (we'll release multiple ones!), and we also genuinely love UI so we hope we'll make it easier for you as well. Stay Updated Email sent! Check your inbox to complete your signup. (Ptssss, if you want to read how to make UI in Unity with UI Toolkit, and/or read our next Godot series, stay tuned for our next posts!) ## Core concepts In Godot all UI elements are subclasses of the "[**Control**](https://docs.godotengine.org/it/4.x/classes/class%5Fcontrol.html?ref=blog.febucci.com)" node. Godot 4 ships with over 30 built-in Control nodes out of the box, covering most common UI needs without any extra plugins. If you also need to [create custom inspectors in Godot C#](https://blog.febucci.com/2025/09/creating-custom-inspectors-in-godot-c-more-easily/), we have a separate post about that. This includes [**Buttons**](https://docs.godotengine.org/en/stable/classes/class%5Fbutton.html?ref=blog.febucci.com) (to handle click/mouse pressure), [**Labels**](https://docs.godotengine.org/en/stable/classes/class%5Flabel.html?ref=blog.febucci.com) (to display text), [**Progress Bars**](https://docs.godotengine.org/en/stable/classes/class%5Fprogressbar.html?ref=blog.febucci.com) (to display a percentage) and much more. 0:00 /0:08 1× where to find control nodes in Godot At first, all control nodes are placed in a rectangle that's as big as the game resolution. ![](https://storage.ghost.io/c/38/36/383676a1-e894-4116-9a98-bb5a9336da39/content/images/2024/11/godot-febucci-game-size-rect.png) the rect (slight blue) of the game resolution In Godot, the origin is in the **upper left corner** of the screen and Y is down. *(Sigh for multi-engine users)* ### Position and Size Every Control node has **position** and **size** properties, which describe their presence on the screen. 0:00 /0:13 1× ### Anchors If we want to make a responsive UI (in other words: scaling based on different resolutions), then we want to link/constrain (or "***anchor***") a Control node based on its parent (you can think of the very first parent as the screen size/viewport), so that when something changes, our nodes also change correctly. You can set a Control node **anchors** in a few ways. The quickest one (and what you'll probably use most of the time) is accessed at the top of the scene view. 0:00 /0:08 1× How different anchors modify and relate to a Control node's settings The anchors icons/templates can be interpreted in two ways: - if the icon is "fixed", then you're anchoring the pivot of a node to its parent/container. - if the icon is "filled" (from one side or both), then you're also controlling its dimensions based on the parent. 0:00 /0:10 1× how "fixed" or "fill" anchors change objects proportions Stay Updated Email sent! Check your inbox to complete your signup. PS. Oh hey just a heads up that if you're liking this post and would like to support us (for free!), read new ones as soon as they're ready and also unlock extra materials... please consider becoming a free member! It'll make us super happy that you're here for us, and also less anxious about algorithm changes, AI and whatever is coming next. We're a small team so it really means a lot; thank you so much! 🥹 You can also set anchors manually via code, the inspector or the scene view/gizmo, to better control how an object resizes in the scene. If all the anchors are in the same spot, then it counts as "fixed" and you're only controlling the movement. If two or more anchors are away from each other, then you're also resizing based on their distance (if it's too far, then it will scale/change a lot, and vice versa) 0:00 /0:16 1× setting anchors manually Note: Godot used to mention "margins" up until version 4.3, but they're now referred to "[**Anchor Offset**](https://docs.godotengine.org/en/stable/tutorials/ui/size%5Fand%5Fanchors.html?ref=blog.febucci.com)". We didn't mention them yet to introduce things more clearly, but just know that you can decide precisely how many pixels you want a control node to "stay away" (or closer) to its container, when resizing dynamically. This value is relative to the anchors ("fixed" vs "fill etc."), and it's set for you automatically when you use the icons/templates we talked above. ![](https://storage.ghost.io/c/38/36/383676a1-e894-4116-9a98-bb5a9336da39/content/images/2024/11/godot-febucci-anchors-inspector.png) Control node inspector --- Now that you know how to resize elements, you could *theoretically* complete your full UI this way, but you'd find yourself having to set a lot of options manually and it would become a messy project really fast, especially if you have a lot of elements (or lists). ## **Using Containers** Godot provides a set of nodes called **Containers,** which **automatically arrange children elements for you (based on specific layouts and settings).** 0:00 /0:07 1× adding control nodes Containers can follow different layouts, like "Horizontal" (e.g. placing all elements next to each other on the same row), "Vertical" and so on, and you can also decide how to distribute them (if starting at the center, beginning or end). Godot 4 comes with at least 9 container types built in, from HBoxContainer and VBoxContainer to GridContainer and MarginContainer, so there's usually one that fits your layout without any manual positioning. 0:00 /0:06 1× 👍 If you want/prefer, you could even build a full UI using ****only** nested containers. PSA you might want to set a "minimum size" to your children nodes, since containers have no way to know how big an object should be. ![control node "custom minimum size" settings](https://storage.ghost.io/c/38/36/383676a1-e894-4116-9a98-bb5a9336da39/content/images/2024/11/godot-febucci-control-minimum-size.png) --- ## Frequently asked questions ### What is the Control node in Godot? Control is the base class for all UI elements in Godot 4\. Any node that appears in the UI, such as a Button, Label or TextureRect, inherits from it. ### How do I make a UI element fill the whole screen? Select the node, open the anchor preset dropdown at the top of the scene view, and choose "Full Rect". The element will then resize automatically with the viewport. ### When should I use a Container instead of setting anchors manually? Use a Container whenever you have multiple elements that need consistent spacing or alignment, like a row of buttons or a vertical list. Manual anchors work fine for isolated elements. ### What is Anchor Offset? It's the pixel distance a node keeps from its anchor point. Godot sets it automatically when you use the anchor icon presets, but you can also edit it directly in the inspector for precise control. ## In Conclusion Here it ends part one about the core concepts of UI / Control nodes in Godot. It's all that is needed (in our opinion) to begin playing with the other building blocks (the actual elements that display information) like Buttons, Labels and much more, to create a responsive UI for your games/projects. Here is a list of common nodes from the [Godot documentation](https://docs.godotengine.org/en/stable/tutorials/ui/index.html?ref=blog.febucci.com#ui-building-blocks). The official [Size and anchors docs](https://docs.godotengine.org/en/stable/tutorials/ui/size%5Fand%5Fanchors.html?ref=blog.febucci.com) are also a great reference if you want to go deeper on anchor offsets and grow directions. That said... it doesn't end here! We'll share *part 2* in the next weeks continuing with signals, themes, animations and more, so that you can go from start to finish and achieve what you want. In the meantime, if you want to learn more about how to connect UI elements to your game logic, check out our post on [Godot signals architecture](https://blog.febucci.com/2024/12/godot-signals-architecture/). And if your UI fonts look blurry at different resolutions, we also wrote about [dynamically scaling font size in Godot](https://blog.febucci.com/2025/08/how-to-dynamically-scale-font-size-in-godot/). Thanks for reading through here (please consider supporting us, so that we can continue doing it) and hear you soon! (P.S. The UI pack we've used, except for the background, is from Kenney's! You can [download it here](https://kenney.nl/assets/ui-pack?ref=blog.febucci.com).)