Godot UI Basics - how to build beautiful interfaces that work everywhere (Beginners)
Godotneers Godotneers
27.9K subscribers
189,044 views
0

 Published On Sep 1, 2023

Hello Godotneers! Building a nice-looking user interface Godot that works across screen sizes and aspect ratios can be quite a daunting task. This video will provide you with the basics that you need to build your very own user interfaces with the Godot game engine that work everywhere. With it you get a good foundation on which you can build in your future adventures.

00:00 Introduction
00:50 Scene setup
01:27 Building a small dashboard
04:17 Setting up a reference resolution
06:09 Separating the UI into a separate layer
07:16 Introduction to containers
07:56 The GridContainer
08:48 Replacing sprites with TextureRects
11:22 How containers do their work
14:33 Auto-resizing with PanelContainer
15:36 MarginContainer for adding borders
16:37 Why using containers is important
17:05 Using themes for a custom look
17:56 Creating a custom look for labels
18:47 Applying the theme to the UI
20:18 Creating a custom PanelContainer
22:10 Applying theme changes
22:35 Creating a mission dialog
23:20 Auto-wrapping label text
23:41 Stacking components with VBoxContainer
24:29 Creating a variant of the PanelContainer
25:50 Using a variant in the UI
26:09 Overriding built-in variations
26:51 Centering label text
27:08 Creating custom buttons
29:25 Horizontal controls with HBoxContainer
29:54 Controlling the size of controls
30:57 The "expand" flag
32:36 Dividing available space
35:00 Sizing flags explained
36:55 Centering controls
37:17 CenterContainer
38:15 Using spacer controls
40:18 Handling changes in window size
40:43 Anchoring UI elements
42:01 Handling different resolutions
43:44 Handling different aspect ratios
45:45 Conclusion

Useful links:
-----------------------

Godot UI documentation: https://docs.godotengine.org/en/stabl...

show more

Share/Embed