Intro to Themes in Godot: User Interface (tutorial)

you wanted to know about themes let's talk about them so themes are a resource that you can use in Godot to take any bit of user interface in your game you drag and drop the theme in the theme slot on any control node and this node and all their children are going to inherit the visual properties from that theme it's a little like CSS with HTML it's a resource that only contains graphic information about the colors you should use how the buttons should style when you click them things like these so I have one prepared here I'm going to show you another example in the Karoo teen tutorial that you can find on the channel I select the interface and go down to the theme resource it's right here going to drag and drop it and instantly not only the top-level panel but all the children update to use the information in that theme which includes some information about the spacing of my rows and columns all hbox and VBox containers in this case so let's double click on the theme that I have here to see how it looks first when you double-click on the theme resource you will get an area that shows how your interface will look and how the various control nodes that you can create in the game will look and the advantage of this area is that it's interactive so you can hover the elements to see the Hova style you can click to see what happens when you click when they are in focus things like these so you can test the checkboxes etc now to create a new theme you're going to the inspector and you want to click the new file button here this is the button you use to create a new resource and you're going to look for theme in the list you create that and it's going to create a default theme that's going to use the old godo interface you want to save this resource from the start I think that's always a good thing to do when you create resource so click on the tool icon in the top right of the Specter save as and let's call it tests theme you can save it as a TRS as a dud theme file however you'd like it's right here at the root of my project I'm going to drag and drop that theme on my bits of interface we're going to use the style guides seen here drag and drop it instead of my first theme and logging to bounce back to the default look of the gotit interface if I open that theme I can expand it from everywhere in the inspector but I'm going to double click on the theme file to open it entirely in the inspector and to have that theme editor here because we're going to need it by default you can only change the default font so I've prepared some fonts and my project I'm going to look for Monserrat this one I created a font resource drag and drop it here and everything will update to use that font except the titles which have their own fonts built in like hard-coded in them as an override font which is how you handle fonts by the way you set a default and then you can override the font but object so you can not only overwrite the theme elements you could change the font of the buttons only or just the check button something like that for example we can use a monospace font for the text edit which we are going to do in a second for a more code like font but then you can also override the font and the properties from the theme on the individual notes I select the title and I go down to the custom fonts in the inspector you can see that the box is checked and I have a title font if i deactivate it for this element only it bounces back to the default font from the theme i activate it again and i have to drag my title font once more it's kind of bounce back to what it had before look it had before okay let me open the test theme once again in order to add properties that you can edit in the inspector you need to click that edit theme menu in the bottom panel you can spend it with shift f12 or using the double arrow that you have at the bottom so you want to go to edit theme and add class items not just adding individual items because it takes a lot of time but adding class items by class what this option means is really all the control node so I'm going to filter the add list to control node and a class is one of these nodes the pop up menu the except dialog the pop up etc so that's what you're going to add to your theme say you want a theme where you just need labels buttons you know you don't necessarily need to change everything so you might just want to add these items I'm gonna go add class item and then you have to enter the class name it's not the best UX but that's how it works at the moment so you can enter for example I want to add the items for buttons or you can click the option on the right to have a long list where you will have all the classes that you can add so you will find for example button at the top but you can also find a fonts option you can find a label things like these okay let's add all the items for the button so when I click at all you can see a new category appears in the inspector and if you have folding on it won't be folded here and you can change the font color on the button so as I change it you're going to see it's going to affect all the buttons because we're changing the button base class right so it affects the check button the option button etc as well you can change the default font color then you can change the separation between the button and the icon for example and you can override the font here and you can override the individual styles all the buttons so these ones are going to use style box resources or textures let's do that just for the normal style we're going to create a new style box flat and the default is going to be just a flat color can then click to expand your style box resource you get a preview the style box and you have a few options to change if you rounded corners or if you want borders first and foremost going to change the buttons background color of the background color property let's take a bluish color and then we're going to add some border on the sides me add one at the bottom as well there you go and now our button has an outline and because we have only at the style box for the normal button cell and not on Hova when i hover the button it's going to bounce back to the default song from gudo I'm going to clear that one which is a little ugly next we are going to look at the text edits if you want to override the fonts here so edit theme as class item and we're going to go with text edits add them all if I go down to text edit without quite a few colors because you use that for syntax highlighting and for editable code but you can see the font here under the font category I'm going to go search for one I've prepared or let's let's create a new font Rees also click here new dynamic font this is a font created from a font file on your system B it's ATT f4 OTF file we're going to click on new dynamic fonts expand the resource so this one you can see the text disappeared because we don't have any font in there data that's Godot can render so we have to drag and drop a TTFN or an OTA file I have some source code forms here that I've searched in my project I'm gonna get the medium one drag and drop it in the form data and now I have a look that's a lot more like code and a motive space form so every character is going to take the same with the same amount of space that is the gist of it if you want a complete UI theme to create tools for your game or a level editor or something like that you can do two things by clicking on the Edit theme button you can create an empty template it's going to add all the properties from all the classes that you can add with at class item and you can create the editor templates and he edits a template is going to give you the gudo 3 or 3.1 or whatever version you are running theme it's going to fill all the properties with the colors and the interactions from the editor then you can create one from your current editor theme so not the default one this is the colors and settings you have set by going to editor editor settings and let's change for example the base color we're going to go with some weight purple here I'm going to save and restart yet it's a it looks horrible but if you have some specific color if you have a dog theme for example that you're using you can create from the current editor theme and you will get your purple colors as you'd expect you can also create an empty editor template which is going to add all the slots in your test theme here and it's going to add all the icons from the editor as you can see so it there's a lot of complexity here but it allows you to create an application that's going to reuse all of the defaults from the go-to editor and if you don't want that be sure to delete the theme create a new theme resource and the inspector and please allow me to revert the theme because it's horrible there we go so I've broken my test theme here I'm going to create a new theme resource and overwrite it save as and my test theme I'm going to overwrite and sometimes when you do operations like these the you I will not refresh so you have to restart the scene reopen it now we can recreate an edit theme edits a base theme to get all the colors from the editor we don't get the font that we had before you don't get the same font size when you do that so I'm going to go get my default font again which is a monsura in this case drag and drop it on the default font slot and then you can get working on theme I'm going to leave it at this for this video there's quite a complexity in all the options that you can edit in the theme as you can see lots of textures the important thing to know is that first you should build some UI for your game and see which nodes that you use and how many options you really need because if you're not using the checkboxes the drop-down menus and general if you're not creating tools you don't need all of these so it would be wise to then add the individual class items as you need them instead of trying to add all the options and try to customize them all from the start now for the GE Quest theme that we use for our tutorials now we are reusing the editor as a base because we want the debug UI in our games to look like it integrates with Godot as we create lots of tutorials for it you can find the theme that we are creating on github it has these transparent panels to help to create some debug interface that still lets you see the game in the background and we're going to refine it over time for the needs of tutorials and debugging in your game you will also find growing library of utilities and components that you can reuse if you have any questions again please go ahead ask them in the comments because this is what I use to figure out which tutorials to do next especially on the topic of UI that said thank you kindly for watching be creative have fun and let's see one another in the next one bye bye

Channel: GDQuest

Views: 30,449

Keywords: godot theme, godot theme tutorial, godot user interface tutorial, user interface, theme resource, Godot UI, godot tutorial, godot engine, game development, godot game engine, godot 3 tutorial, open source, godot interface tutorial, godot ui tutorial, user interface design, control node

Id: g3p3rtdqCDk

Length: 12min 54sec (774 seconds)

Published: Mon Feb 04 2019