Godot UI QUICKSTART (Ex-Unity friendly guide)

today we're gonna build a simple in-game user interface using good dough engine you're gonna learn how to create panels images texts progress bars and finally buttons with some simple interaction if you have previous experience with unity system fear not good though control system is very easy I will be showing you the alternatives for all the things we are doing along the way so that you will feel at home in case you don't have Godot installed just yet simply go to the official website click download latest and then godo engine that should download an application for your operating system after installation you will be greeted with this screen press new project select the path for all of your godo projects then give it a name and click create folder that way you will have a nice project structure as for the renderer if you're doing 3D desktop stuff select forward plus otherwise go with the mobile option click create and edit as you can see the editor window is quite similar to the one in unity here you have main editor you can switch between 2D and 3D here you can find file system here is a scene hierarchy and finally here you can find the inspector tab that will allow you to modify different settings let's start by creating our first scene here on the left under create root node select user interface we can immediately save it as well just press Ctrl or command s and name it main.tscn which is a Godot scene file you can find it here now time to create our first component on the scene in the scene tab click plus button or command a to open the new node window as you can see here we can find all possible nodes that will be put on the screen the most important ones are those three groups note to D used to create 2D game elements control used for the user interface and node 3D for the 3D elements today we're gonna focus on the green ones which are all about the UI let's start with the panel you can either find it or simply search for it we can describe panel as a container for other UI elements with fill color think of it as an image without any texture or Sprite in unity here in that 2D view we can already see it let's resize it a bit and put it 24 pixels from the edge of the screen you can find this value while dragging here or you can manually edit it by clicking in the inspector layout transform position finally I will rename this panel to player info box next let's create another panel that will be a frame for our Avatar image right click on player info box select ADD child node and go with the panel once more that way we've created a child node that is tied to its parent name it Avatar frame I want it to always be on the middle left side of the player info box for that we can use Encore presets they work exactly the same as annuity and allow us to stick components to the screen or the parent side corner or even resize them to fill the hole width height or both click the small green circle at the top and select left Center option that way our box will always stay on the left side of the parent now let's move it a bit from The Edge and make it bigger just like that my only problem is that this Frame frame is now not really visible let's change its color click on Avatar frame and in the inspector go to the theme overrides Styles and instead of empty click new style box flat now to edit the style simply click on it it may seem a bit confusing but we can now modify many useful properties I'll change the background color to white and modify Corner radius I'll change it to 4 pixels for all sides by the way I love that this feature is built in in unity it was quite a tedious task which I created a whole video about now that you know how to change panel properties I would suggest you pause this video right now and also modify the properties of the player info box alright here is what I did I changed the color of it to this nice red color added Corner radius of 6 added a bit of Shadow I hope YouTube compression won't destroy it and added this white border from all the size perfect now we can move on to the second component and image right click on Avatar frame click ADD child node and search for texture rect it will also be a rectangular shape but this time we'll be able to fill it out with an image call it Avatar I'll change it and copy set to Center and resize it a bit to fill it out with our texture we need to import it first the easiest way will be to just drag in your image to the project file system then let's make sure that the Avatar is still selected and drag in our image to the texture field in the inspector as you can see my image is a bit bigger than our frame but we can easily fix that by changing expand mode to ignore size and here it is nicely placed a butter image before moving on let's prepare a similar frame for our coin container as an exercise here is a task create a similar container to the player info box it should be smaller and always on the top right of the screen pause the video and try it now [Music] alright hope it went well in my case I won't be creating it from scratch I'll simply use the duplicate option let's rename it to coinbox and its children accordingly change its anchor to top right change its position resize it a bit and change the object's properties inside notice that if I try to change the color of this rectangle it will also change the color of the first player info box this is because for both shapes we are using the same theme details to override that in theme overrides Styles click this small arrow and select make unique that way I can now change the background color without modifying the other one here of course we would like to have a player Avatar but a coin instead what is great about Godot is that it not only supports a raster Graphics like pngs or jpegs but also a vector graphics specifically SVG files that allow infant scale change for example we can visit gameicons.net and search for coin here is the one that I like so I will click on it change its background to none and download SVG then import such a file to Godot and change our recording texture because our image is white I will make it a child of a coinbox get rid of the frame and scale it a bit in case your SVG file is pixelated select it in the file system go to import tab change scale to something bigger and click re-import that should fix the problem now we'll move on to the text that should be pretty straightforward add a new node to player info box called label rename it to nickname nubid and resize it to change label text write a text here in the inspector to change text properties we'll need to go once more to the theme overrides Here For example we can change text size let's try with 28. if you like to change the font first find the one you are interested in download it and import it to the project file system finally go to the labels phone section and replace empty with the desired fonts great I will quickly duplicate this label change its parent node change position and size its name and its text to coins as you can see the text is aligned to top to fix that let's change the vertical alignment to Center then the same for the coins value text that for now will show question mark symbol if you like this Godot tutorial so far please leave a like under the video thank you time to fill out this empty space under the player nickname add the new child notes to player info box called progress bar call it experience progress this time we'll use the bottom wide anchor preset this preset make sure that the progress bar will scale with the container horizontally let's modify the progress bar position and size notice that when I hold Ctrl helpful guidelines show up so that I can align the beginning of the shape with the text now everything perfectly scales on panel resize while obviously later on you will connect this bar with the game logic for now we can change its value to something bigger to have a better view of this component if you like to change the design we need to revisit our theme override section and change its Styles and fonts please pause the video and give it a try [Music] alright here is my take on this design notice that in this case we can modified font colors font outline font family and size as well as both the slider background and feel area that way now we got this nice slider alright last but not least let's add some buttons I will create a new child of root node called the button notice that we have a few options here like a check button link button and more but we'll go with this very basic button option let's resize it and put it in the middle of the screen using the anchor preset I will call it Grant coins button and give it a text Grant coins as you can see that will be our debug button that will change the coin's value as usual you have a ton of values to modify including disabled option action mode keyboard shortcut assign which I really love and as usual all the theming options before We'll add some logic to it I think it's finally time to test out our project click on the play button in the top right corner and wait till the window will pop out here it is our great UI as you can see the UI elements are anchored to the top left top right and the center of the screen depending of the assigned encourse perfect if you like to modify the way that the windows scanning works you can go to the project project settings and here go to the display window tab apart from changing the viewport width and height which will be the initial window size you can also decide if the game will run in the full screen mode if the window is resizable and more I'm mostly interested in the stretch section as it allows us to decide how UI elements will scale currently with the mode disabled you can see that all of the elements in the game stays with the same size that's nice but on the bigger screen players might find your game UI too small or too far apart from each other to change that select mode canvas items that way all of your elements on the screen will scale accordingly by default the game will try to keep its aspect ratio but you can experiment with that by changing aspect property all right time to work on our button it already works you can click on it with a nice State change but it doesn't do much just yet this video won't be going much in depth about Godot coding but here is a very quick guide on how to change coins value on control button press to create a script for our scene first select the root component and click this script button don't change anything in this dialog window just press create godo is using its own language called gdscript it takes a second to get used to mostly because it's indent based but if you had any experience with python before you should feel at home to Define a variable that will hold our coins value just type VAR coins value equals zero as you can see we already have two functions ready and process they work the same way as start and update in unity but in our case we'll need one more function that will be triggered on button press what we can do is to go to the scene click on our button and go to the node tab here we can see all the signals that this button can emit in our case we are mostly interested in pressed action to use it simply double click on it and select which script would like to connect it to that will be our root control node click connect that automatically created an on button pressed function which we can now use to increment coins value just type coins value plus equals 10 and then to write it to the console type print coins value now when I run the game you can notice that every button press increments our variable to change the text on the screen we also need to connect it to the script right click on coins value text and select access as unique name now in the script tab drag in the comments value text but very important hold the Ctrl key just before releasing the mouse that way we can now have a nice variable that can be used in our script so in on button pressed add coins value text that text equals s tier with the value of coins value a Serial function converts into string additionally in the ready function we can also add the same line to reset the counter now when you press play and click the grant coins button the label text updates with the coins count special thanks to all of my patrons for the continuous support of Coco code if you like to see more good dough tutorials let me know in the comment section down below see you soon

Channel: Coco Code

Views: 53,800

Keywords: godot, godot game engine, godot ui, godot gui tutorial, godot tutorial

Id: RHcHMRUGDHU

Length: 16min 8sec (968 seconds)

Published: Mon Sep 18 2023