Godot 3.2 Absolute Beginners Tutorial | UI and Theming Your Interface

hey guys this is mitch with fine point cgi and today we're going to continue our kind of mini series i guess of uh ui tutorials inside of godot and today we're going to be talking about theming now first off why would you want theming and what's the importance of theming well the importance of theming is that it allows you to have a reusable bit of i guess code or design that reflects throughout your entire project now it's easier once i actually show you and explain it to you so we're just going to go ahead and jump right into godot and i'll just kind of explain it as i go okay so now that we're in godot what i'm going to do is i am going to zoom out a little bit i am going to actually well no i'm going to go ahead and add a button here so if i come down here and i find myself a base button button let's zoom in and let's expand that button out and just bring it down here and let's throw some words in here and let's just say i don't know test button if i want to change how this button operates or how it looks i can come down like custom styles let's say and say i don't know on um so i can come down here and i can click on my normal and i could add in a new stylebox texture and then i could go ahead and edit this and drag in this texture right and that's all well and good and that button is styled and it looks pretty well i mean relatively pretty right but what it doesn't do is it doesn't allow it to be reusable so if i were to add a second button in here let's just type it button this time it'll be easier and i drag this out these two are not the same you know you can see if i look at the custom style it's not the same so what we can do is we can actually create what's called a theme and a theme allows you to save styles between buttons so let's go ahead and do that so if i click on a theme and i go new theme i right click and i'm going to go ahead and save this just because it's a good idea so we will call this um default menu theme just because i'd like to have things semi-descriptive when i name things so default menu theme and then we're going to go ahead and right click or you can double click or single click i should say it's a single or double single click and you can see here all of the themes of this button so you can see all the little cool things in this preview window here now the beauty of this little preview window is it shows you how all these buttons and how all these um different ui elements are going to um reflect your theme so it's really nice and it provides a really compact way to see how your theme is going to work throughout the entire project so what we're going to do is we're going to click edit theme and we're going to add a class item now a class item versus item a class item is a group of items so for instance like a button or a toggle button or disabled button is all kind of under the class of button whereas an item is specific to that button so if i add item button it'll only affect the button not the toggle button or the disable button so i always suggest just use class item it's easier and it just makes things a little simpler to work with and then what we'll do is we will click these three little dots here and we will click on button up here and then we will click add all hey so apologies i didn't have my little uh thing uh showing up so that's my fault and my apologies but what i would do is i would go and add a button resource and now what it's going to do is it's going to come out over here into this little section here so if we click on button you'll see that we have different colors so we could change like the font color and you'll see that it will reflect on these buttons so if i were to make them red you can see that they show up as red if i make them dark red they show up as dark red if i make them pink they show up as pink i mean it's pretty simple right so we'll keep that as white for now font color disabled you can actually change that you can see how it affects the disabled button here when i change that so that's great oh and i clicked off of it naturally um if you come down to constraints you can change like height separation so the more you have that the more height separation there's going to be within your um there's going to be more height separation within your buttons if you go to fonts you can actually change the font of your button so this is where we get into some cool stuff let's go to a website called da font and let's go ahead and pick a font so let's go to google and we will go to duffbot and we will click on default and then we're going to go ahead and pick a font i don't know something like little cupcakes that sounds like a good one so if we go ahead and download this one we save it and then we go ahead and open it up in here and we extract little cupcakes and then we have ourselves a little font here so if we go ahead and drag this in that will import it into godot we're going to drag it into godot and then we're going to take this we're going to click on our fonts we're going to go to a new dynamic font now the difference a bitmap font is pictures so something like a image texture or something like that and a dynamic font is something where you're using more of like an actual font from the fonts or any other font website so if we click on dynamic font and we open that up you'll see that it kind of brings this little drop down you can change your settings extra spacing font and fallback so if we go ahead and drag little cupcakes into our font data you will notice that these buttons will have changed so i can change like the size of the font i can change the outline style so if i wanted to add an outline to it let's say a little single pixel black outline right to give it more of like that cartoony feeling things like that so we'll keep that cartoon feeling because i kind of like it and to kind of illustrate it on this button we'll add some text in here so you can kind of see how it would look so how it would look and so that's how it would look now let's also look at some other things um inside of here and you see how there's a little filter button here i i kind of suggest you click it because using the filter can help make it less blurry so if i zoom in on this see yeah it's kind of blurry if i use a filter it kind of blurs out those lines so it can make it look a little better that's kind of a little tidbit there to just kind of make your stuff look a little nicer and fallback is useful if you want it to fall back to something so for some reason the font data breaks you can give it another font to fall back on just in case somehow it doesn't get loaded now if we come down to styles and you can see we're still inside the theme so remember how we had custom styles here and we have styles inside of here this is the same stuff that's in here here so if you look at custom styles you can see here versus here it's the same stuff the difference is this is globally and this is more locally so if we do a style here you can do a lot of different options here so if i were to click on this you can see we have style boxes here and style boxes are basically a editable bitmap that allows you to kind of adjust how it looks if that makes sense um it makes more sense once you start using it but just note that it's useful and we're going to need to create a style box texture so go ahead and create a style box texture and actually i did it on the wrong one so let me clear that and let me go with normal my apologies and do a new style box texture you'll see that it completely removes our style on this so if i right click and you have to right click this because there's a bug in godot currently in 3.2 that if you double click this it closes all of it so if you just right click this and go to edit you'll see it's looking for a texture now i'm going to kind of explain how to create a texture so that way you understand how uh styles are created and then we can go from there so what we're gonna do is we're gonna go ahead and open up an app called krita providing it feels like opening awesome so if you don't know what krita is if we go to google you can type in krita and it's right here go ahead and click on the get creda now and it will go ahead and download it once you click this little download button and that'll give you a uh art application um for doing different styles different things like that so now that we're in krita what we can do is we can go file new and we're going to set it to something small like 30 pixels by 30 pixels okay and we will create that and now what we want to make sure that we do if you don't know anything about krita that's totally fine you don't need to know anything about creta to do this all you need to know is this is your brush okay this is your eraser so if i were to use my brush and i draw and i use my eraser i can erase those drawn strokes pretty simple my color is up here so i can change my color of what i'm going to draw so if i were to change these colors and one thing that you need to know is the different brushes now there are a lot of brushes and i'm not going to go through all of them but what i would do is i would scroll through until you find a brush that looks like this right here this is the pixel brush and in general for doing the style of tutorial that i'm doing here this is what you're going to use so now if we drag this down make our color wheel pretty large and let's go ahead and fill this with a base color let's say something i don't know like this nice blue color now we're going to do is we're going to pick something a little bit darker and we're going to drag along this line here oh i missed a little bit so i will go back to that color by hitting by uh going up here and clicking this little button up here and i'll clear that and then i'm going to choose a lighter color here or up here like that and then i will choose kind of a middle color somewhere in here for the sides which is just slightly darker but not by a lot not enough for it to be that big of a deal so we'll do this you can see that i'm terrible with a mouse normally i would have my draw pad for this that's okay and then we'll go back and click on this and then we're gonna go oh whoops let me see it is this one i think yeah so we'll draw that in and we'll draw that in now you can see we got a nice little simple if we zoom out by using our mouse wheel you can see how it looks now what we're going to do is we are going to click file save as and we are going to save this as a jpeg file and we are going to navigate to our project so i've navigated already to godot ui theming and we will say button underscore normal uh dot jpeg and we want to make sure we have a hundred percent quality if you do it at 80 quality it compresses some of your textures and you don't necessarily want that for this specific use case so let's hit ok and we will reopen up godot and you will see that our button has already been loaded so if we go up here and we drag this into our texture of our style box you'll see suddenly it looks like our button now it's a little on the finicky side because you can see kind of like this little dithering effect going on see that so what we can do if we want to go for more of like a pixel rd style look if we click on our button and we click on import and we change our preset to 2d pixel and re-import it'll keep that 2d pixel already feeling to it now something that you'll notice is this it feels like this is a little bit larger than it should and the reason why is because as you expand this you'll see that this little bit here gets larger see that see how the bigger the button gets the bigger these get and we don't want that right so what you can do is you can do what's called a margin here and what you can do is you can say margin of 1 margin of 1 margin of one and margin of one and what that will do is that will snap all of those one pixels to be one pixel see how it's one pixel long no matter how small or how large this button gets it'll always be the same size so that's just a good uh tip to make things look better and more consistent throughout your ui now what we can do is if we reopen or if we uh come back to our theme so if you were to unclick and click or if you just go ahead and click on your default theme and then open up your styles here you can go ahead and add in a pressed um style you can see here when i hover over it how's it go how it goes dark and when i click it it does this really weird like transition or not transition but this gradient effect and i don't like that that's not how i want this thing to be themed so if we go back to uh krita and uh we just kind of go with a darker color let's say and let's go ahead and use the fill tool and fill it well that didn't fill it the way i wanted it to so if we go to tool options and pull our threshold down that'll fix that and if we go file save as button pressed now this is bad form you probably shouldn't do it this way the way i'm the way i'm doing this because you should save everything as layers or as multiple files so that you're not losing your um previous version of that button so i'll kind of show you how i would approach that so what i would do after i save this is i would uh control z to undo this i would duplicate this so duplicate click and now i have a layer here of normal and i would name this normal and i would name this pressed so now i have my normal and not my pressed here that i can refer back to if i ever need to make changes so now if i minimize this and i see that i have button pressed i once again change my preset to pixel then i go back to my theme and i do pressed and do it as a new style box texture i right click it i edit it i drag in my button pressed onto my texture and then i once again set up my margins one one one and one in this case it's one one one and one but you might want it to be you know two or three or four depending on how you set up your your image to reflect how it's going to look but now if i go back to my theme so if i click this little button up here when i press it you'll see it changed it to be more in line with my cartoony style that i'm attempting to go for so now that we've set this up why is this useful what does this do for me right well if i go ahead and i click on this button and i remove this theme so i clear it and make sure that you've saved it here see how it's saved if you don't save your theme so if you don't click the save button and you clear it you will lose it so just as a note don't do that if i clear it you'll see it goes back to the exact way that it used to be then if i click on this and i undo my custom style on this i can go above both of those buttons and click on my control and i can click on my theme and i can drag my theme in here and now all the buttons underneath that theme or underneath that ui element follow that theme so that means every button i make from this point forward right every single ui element i create is going to follow that theme and if this isn't blowing your mind then i don't know what would because this will save you a lot of trouble in the future when you're doing stuff so that's gonna do it for us guys uh we talked about theming we talked about creating your button jpegs and uh downloading different um fonts we talked about the importance of theming and really that's that's about it you know if you guys have any questions hit me up in the comments you know if you enjoyed this video obviously hit me with a like if you disliked it go ahead maybe with the dislike it's fine um i would love to know more about what you guys would like me to do so if you guys have suggestions again throw them in the comments below and i'm more than happy to cover any subject you guys are interested in with that being said thank you guys again for watching and i'll see you all next time thanks

Channel: FinePointCGI

Views: 1,660

Keywords: godot tutorial, godot beginner tutorial, godot, godot interface tutorial, godot tutorial for beginners, godot engine, godot game engine, godot user interface tutorial, godot 3 tutorial, tutorial, godot engine tutorial, godot 3.2, godot ui tutorial, godot 3.1 beginner tutorial, godot 3 beginner tutorial, godot 3, godot 3d tutorial for beginners, godot game engine tutorial, godot for beginners, Godot 3.2 Absolute Beginners Tutorial | UI and Theming Your Interface, godot 2d

Id: Lc2_2qFZEiQ

Length: 19min 26sec (1166 seconds)

Published: Fri Jan 01 2021