Instant Better UI with Godot 4's Theme Editor - Tutorial

hello everybody today I'm going to show you how you can make your UI look way way way better in Godad four point oh 0.1 yes so I have a control node and then I have a button what I'm gonna do I'm going to create a new theme right here click on this new theme and now we have a new theme this when when you click on this it's gonna open this menu which is the theme editor here we can change literally every button line edit text edit tabs lists whatever so let's say I want to change this button and how it looks like right all I have to do is come here click on this little plus icon and select button and now we get a bunch of different settings here the most important one is this one um here we can change how the the our buttons will look like in different modes like when it's pressed when it's hovered uh when it's disabled focused or not how it looks normally that's why I want to change its normal look so I click on this plus icon I create a new style box now all the buttons suddenly turned out great now we gotta change that we click on the style box and we get a bunch of different settings let's say I want to change its color click here pick a color um let's pick a nice shade of blue that's nice that's really cool and let's say oh now add a border to this button I can do that right here I just set the pixels for each side and now we have a border around our version the good thing about this is that you can like set pixels for only one side or two sides you know I can do like this or I can do this or no border at all oh also you can change the Border color as well right here um yeah this is also nice and you can blend the Border as well so that it looks like this um Corner radius I really love this one because this is gonna make the your button not a complete rectangle but it's gonna round the edges or Corners like this and that looks much much better expand margins this will basically just expand the the margins of your button if you like and you can also add a shadow to your button you have to just set the size of the shadow shadow and it's gonna add a shadow the good thing about this um instead of it being a shadow you can like make your button kind of like glow uh yeah all you have to just you know pick a color for for your shadow um anti-aliasing yeah this uh enables and disabled anti-aliasing and then there's content margins this um it's better to show what it does um yeah basically let's say you want your button to be uh sorry your text to be right here instead of in the center so what you can do is uh basically this oops oops there you go yeah um all right that's great now how you can make your button look way better using a combination of the settings what I like to do is this add a border but only on one side I add it at the bottom let's make it fire and see how it looks I mean this already looked like um like it's a 3D button and if I also change the color of the Border let's pick this color and make it like um darker as you can see it it I don't know this looks really nice it's a very nice effect and you can also do this so that like the bottom side is uh not um round on the up is around but I like it when it's like completely round you can add the shadow as well um let's also you can offset the shadow it does maybe just a little too much that's much better this looks a whole lot better than the default UI um now when we go back to our theme to get to this menu again you have to click on your control node and go to click here on on the theme Button as you guys can see this changed the look of not only button but other buttons as well now you might want to ask why the hell did that happen well it's because these buttons use a button as a base so any change you make to button will change these buttons as well if you don't want that to happen what you can do is click here let's say you don't want your checkbox to be blue you just add your checkbox here by the way you can like switch between elements here so that's how I don't want my check box my checkbox to be blue what I can do is click on this normal now I can edit this box here add another style box what I do is actually I just like usually copy and modify it all right let's paste it here so let's say I want my check box to be another color I do that like this so now if I come here as you can see my checkbox is a different color when I hover over the buttons as you can see it turns back to the default look and also when I press it too that happens because we didn't edit um we didn't edit the other modes basically so again what I'm going to do is copy this click on this plus icon paste it here and now we're gonna edit how our button is going to look like when it's pressed so I can make it like a little darker and now if I now if I press on it as you can see it's not the default look we can also do this for the hover paste it here so I want to be brighter when I hover over it and now everything looks perfect also if you have a nice font you can set a default font for your theme right here and now everything is way way better so all you have to do is just you know set the other modes as well again if you want to change like another item on this list all you have to do is click here um and just pick whatever you want and let's say you wanna change line edit fine line edit you add it and also you can like do a bunch of other stuff as well there's like more and more uh stuff here that you can edit and let's say I want to change the line edit right create a new style box which you guys can see the line edits now customizable just like that I hope that was helpful sorry this was like a quick Dirty tutorial I hope it was clear enough thanks for watching foreign

Channel: Abra

Views: 36,589

Keywords: gamedev, godot, devlog, indiedev, indiegame, godot3, godot4, tutorial

Id: jIk-OG5hG3k

Length: 8min 58sec (538 seconds)

Published: Thu Mar 23 2023