Godot Engine 3 - Scriptable Objects? P1

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to a small Godot tutorial video this is going to be a single video it won't be a series but I'm going to be exploring some stuff that I might end up doing in a series when I when I kind of figure out what I'm gonna do for that so the first thing I want to mention is I have turned ads back on on my videos I had turned them off on my newer videos but I've turned them back on there's two reasons for that number one to be blunt I could use a little bit of extra money it's not a lot of money but every little bit helps and number two is because YouTube seems to be recommending the videos that I have that have ads on them surprise or no surprise there that YouTube would recommend videos that are going to make them money so now that that's out of the way let's get started in today's video I'm going to be showing how to do scriptable objects in Godot in Godot you use resources for this and if you haven't heard about scriptable objects in unity they're basically an object that you can create before you before you run the game so they're not dynamic so you create them before the game has actually ever run but they store data and there's some benefits to them over stuff like a JSON document that could also store data and there are I'm sure there are drawbacks as well I'm still fairly new to them but I'm gonna link in the description to some different videos that I've been watching about them and learning about them and I think they're an interesting solution to certain problems and so I kind of wanted to show how to do them in cadeaux cuz when I first learned about them I didn't know you could do them in Godot so let's get started we're going to first first okay so I'm using Godot 3.1 the alpha version so you're going to need to go download the alpha version of Godot 3.1 in order to follow this series so 3.1 or newer for not series this video so 3.1 or newer for this video then I'm gonna create a new project here and well you know what let me show you what the final product is going to look like by the end of this video because it might be a little bit longer so here you can see we've got these three character classes right here we've got our night class our wizard class and our thief class and we can select them by clicking on these different icons and these classes are set up as scriptable objects so it's very easy to edit this data and then this UI this to this character class display element right here it takes a scriptable object basically to know what data to display so that's what we're going to be making okay so we'll create a new project here I'm going to come into my Godot 3.1 folder select current folder and I'm going to name this class well scriptable object objects tutorial that should be good will create this folder and create an edit okay so first we're going to need to import in those assets now these assets are I'll include them in the description as well they're right here and drag them and drop them right into my files right here but I want to give a shout-out to the creator of these assets he put them on open game or I think they're under the public domain license but it's always good to credit people even if their stuff is public domain so and you you might want to check the license for sure but I I'm pretty sure that it was public domain in fact let's let's check it real quick we'll go to 2d art and his is one of the top ones if you search characters search right here and if we come into click on the author we can find his RPG portraits and we can get the license here it is public domain I just wanted to double check I was pretty sure but yes it is public domain here is his patreon right here or her patreon I think it's him but I'm not a hundred percent sure so you can come and support support them in the artwork that they're creating if you want to and I just wanted to give credit to the creator of these assets so we're going to start by creating a new user interface right here and I'm also going to change the project settings we're going to come into our display here and we're gonna change our display width to 320 and our height to 180 and then we're going to set our test width to 1280 and our test height to 720 this is going to be the windows size and this is going to be the this is going to be the camera size and this is going to be the window size so if we run the game again we're gonna be a lot smaller now but if we run the game if we well let's let's let's move a little bit more forward so we're going to we're going to name this scene right here we'll call it class display like this I think this would be or maybe character display well but it's not really a character displayed as a class display so class display like that okay and we're going to we're actually going to change its type so let's right click on this we'll do change type and I'm just going to do under controls under control nodes let's do a color rect I think this should be fine we're gonna turn on snapping and I'm going to configure the snap to be 32 by 32 close should be pretty and then we'll make it I think we're gonna go one smaller than that [Music] that looks the wrong size to me but it'll probably be fine then I'm going to just make this black for now but we could set it to whatever color we wanted to later now we're going to we're going to attach a script to this and we're going to basically set up the UI for the class display and so we're going to attach a new script create and we're not going to actually do much in here yet we'll just actually get rid of this code and save it class display and if we run this and we select it as our main scene then we can actually see our game running and our class display although that didn't seem correct let's check our project settings here yeah this should be right 3:20 oh we might need to i forgot we need to set our mode to 2d and our aspect ratio to keep width should probably be fine and close let's let's run it again now there we go now it's running correctly okay okay now we're going to basically create our our what this UI is going to look like I think maybe maybe this needs to come out one more I don't know that'll be good enough so we're going to add a margin container because I want to add a slight margin to this so let's add margin container for the layout for this do full wreck that'll make it um fill up the entire parent and then we're going to give it a custom constants down here of four for all of the margins so for tab 4.4 Tab four so this will give us a margin of four on all sides then we're going to use a V box container I think yep and inside of this V box container we're going to have one center element so Center container like this and this is going to be for our image so we'll put a texture rect inside of here texture right here text your rect and then we can give this a texture so let's just drag our knight in for now we'll drop it right here in this texture and our our center container here should also take up the full rec light there okay now our texture here is blurry so let's select all of these textures come up to import and turnoff filter and then call re-import and that will fix the blur on your textures there so come back to see now that we've got our characters sprite here and you can pretty clearly tell that this is too big so I think we're gonna have to set our margin or our snap to 16 by 16 not really sure why I have it 32 by 32 to be honest there we go and make the center container full again there we go yeah that looks that looks better and this probably set our class display bring it in one I think maybe two oops make sure you have the parent selected when you do this there we go and we'll make that full is this not full the V box container want it to be full ISM hmm drag your view box container back to the margin container and then make the center container full again I don't know why it's not filling up the whole space correctly it feels like vertical maybe needs to expand we'll just set expand to the vertical so in your Center container here come down to size flags and four vertical to expand well we'll see if that fixes it okay I'm gonna save now in our V box container here we need to add another element and for this element we're going to add another V box can oh yeah another oh this should be an H box container so that's a mistake on my part right click on this do change type H box container there we go and then our center container here should expand horizontally and vertically in the size flags there we go now let's add another element to our V box container and this is going to be an H box no no this will actually be a V box container and we should rename this one so that it's an H box I mean it is an H box container but I need to rename it okay and then in here we're going to add a couple more H box containers actually H box container okay and this H box container will contain some basically two labels so let's add some labels here one label will have this one say class and then we'll give it another label and this second label what we will say night oops night okay it's important at this moment to get a new font so let's come into I'll also provide the font this is a font that I made let me grab the right font here I think it's pixel robot just copy this well actually let's just drag it into here there we go pretty sure that's the right one let me make sure there's no other fonts here okay so we're going to need to create a new font let's get rid of our second label actually right now and we'll come into here we'll name this first label right here now I can be called label that's fine scroll down until you see custom fonts right here click the font and do new dynamic font and we're going to double we're gonna click on that new dynamic font we just created and oops and that should open up some information about it right here in the editor so we're gonna dry we need to add give some font data to it so we'll grab our pixel art font and drag it and drop it right here okay so now we have that font data now this dynamic font we want to save this so we can use it in multiple places so we're actually going to click on this little arrow right here for the dynamic font click Edit that'll bring us here and then we can click on this little object properties do file save as and we'll just call it pixel font TR es like that save now it creates it as a resource so we can use that font in multiple places if we need to so let's duplicate our label here and this second label we're going to call this one we're going to call this one data so the first one is the label which is class and the second one's the data so in this case that's going to be night night like this but they're they're kind of they're leaning right here and we want them to be separated so one thing we can do is we can make the data take up if you come into it its size flags we can do expand on horizontal oh but we need our H box container to also expand on horizontal so size flags expand on horizontal no we shouldn't need to do that it's our V box container yeah so right now our our V box container is only taking up the space that it actually needs but we want it to take up all the space that it possibly can so we're gonna come as size flags and to expand on horizontal now this is close but our but because our Center container and our V box container are both expand on horizontal it is dividing a 50/50 basically here and in our H box container so we don't want our image here to take up that much we just want it to take up exactly what it needs so we want our Center container to expand vertically but no longer horizontally like this okay but now our label right here and you can see now our data is when we do expand horizontal it takes up all the space that it possibly can inside of this area and now we could change the alignment to be right and now we've got a right alignment on this one and I'll just a left alignment on this one but this one takes up all the space that it possibly can which is good it'll give us more space for stuff so instead of having this be called H box container we're gonna call it class and then we can duplicate these right here so we can duplicate duplicate the class right here and we can call this one help like that you can duplicate this one and we can call this one strength and we can duplicate this one and we can call this on intelligence okay now I don't know why this is but there's a really big space here and it might have something to do with how he set up the font like maybe if I remove some spacing here can they get have one or something yeah so it might be my font has issues size 16 that looks good I think maybe if I just remove a bunch from here so that my fonts not quite so spaced out we'll get what we want here so this container needs to go back to full there we go the margin container and now we've got a decent spacing on those don't know if you want the spacing to be any different than what it is here yeah I think there might have been something with my texts or my font and that's why it was kind of being weird like that but I think this is good enough so then we'll change each one of these so let's change the text and a label here to match health we'll change the text and the data here to be like 100 for now and we'll come into here for this label strength in this data 100 and in here we'll do the same thing label intelligence and 100 okay and save so we've correctly set up our UI and it should scale fairly well I think like if you well I guess I guess maybe we need like a center container for the text here if you wanted to scale pretty well but this is good enough for now this is good enough for the tutorial because this isn't the focus of the tutorial now what we need to create is our first scriptable objects and so the way that we can do this is by creating a new script will come in two scripts will do file new script and you have this inherit from resource like this and we'll call it right here class stats class stats like that and create ok so it extends resource now we can give it a special name using class underscore name and we'll just name it class stats like this and we can give this some data basically this is how we choose what data to give it so this the our class stats have the data that we did in our class display right so we'll say export string of our class name oops can't use that you can't what are we gonna call this maybe just character class class or class type class type let's do class type we'll say export int var Health set it to a default of 100 export int var strength set that to a default of 100 export int of our intelligence and export image of our profile and maybe we just call this type does it really need to be called class type maybe it's just called type we'll set it to a default of night like that okay and profile we'll set it to equal to null by default so what does this do um the export basically just allows you to edit these variables in the editor over here on the side and I'll show you what I mean there but we're just creating some variables and giving them some values and we're using export in order to be able to edit them manually and the type of export that we choose like image int and string will determine how it looks over here and how we get how what options it gives us for editing it so we can save this right there and now that we've saved this we can actually create a class so let's create a new class and the way you do this once you've saved this is coming over here into files I'm just going to click that to show it as a list we're going to right click and we're going to do new resource and then over here this lists all the resources that we have available to us however because we did class name class stat we now have a new resource called class stats stats and you can see it right here class stats and I haven't set an icon for this but you can set an icon so that's why it shows error here but it doesn't it doesn't really matter that much now when we click on class stats it will let us save this so let's let's save this as um we'll save it as night yeah that should be fine right let's let's not do the night though let's do the wizard first because our UI already kind of shows the night so let's do the wizard so we'll call it wizard TR yes and save okay so what does that do it creates a new resource file over here that basically has this script attached to it and so now you can see when we double click on this resource or when we clicked on this resource over here on our inspector we can see the different variables that we saved so we can update these in the inspector so I'm not going to cover all of the benefits of scriptable objects versus versus other ways of storing data the benefits and drawbacks or whatever I'm not really going to cover that I think there are other videos um that kind of talk about that and other places that kind of talk about that but one of the things that I do really like about them is that if you have a designer on your team that is not a programmer it is going to be very easy for them to edit the this data over here they don't have to know how to use Jason they don't have to know how to program there's a lot of stuff that they don't need to know in order to still be able to affect the way the game plays and that's really good or even if you're just a even if you're a programmer the the less time you spend in code honestly the better while you're making your game you want to setup your game in a way that you can design it quickly and have minimal program like the less programming that you have to do when you actually designing the game the better because when you're making your game engine or whatever you've got to do quite a bit of programming to set up to get that set up you know the base for your game but once you start actually creating content and and designing the way the game interacts it's if you don't have to touch code a lot there it can be very helpful so I like this so let's create our type here we're going to give it a type of wizard right there and we're gonna set its health to mmm maybe 70 set its strength to 10 I guess and its intelligence to 100 and then the profile here because we did image we can actually select an image let's load an image and we'll select the wizard profile and then we just control at Boop's ctrl s to save and we've saved this new wizard scriptable object so we're here it's data no it's all saved and if we want to create another class so you can easily right-click and do new resource and create a new class but let's start using the class we have so let's go back to 2d here we'll click on our class display and and we're going to give this class display we're going to give it access to that scriptable object that we just created so we'll say create a ready function here so this is the function that's run when the game starts we'll say data equals load well we'll call this class type equals load well class data equals load and we'll select our wizard TR es like that and we can load this class data then what we want to do is use that information to update all of the UI so let's start with the very basics mmm so the first thing we can update is the profile image so we'll do VAR profile equals get node and I'm just going to grab I'm just going to come over here and come to our texture right here let's see you come back in the script texture and drag this and drop it right here and you can see that is pretty cool it just creates it gets that path right here to our texture and gets the node there for us and then we can say profile dot texture actually texture equals class data dot profile okay now let's save and let's run our game and what we should see if all things go correctly is that our UI has updated to be the wizard right here we've got the wizard and hmm I want these to be evenly distributed it bothers me that they're like not quite evenly distributed and I know there's a way to fix it but I don't want to spend the time to do that in inside of this video so let's do our other ones however let's try and make this just a little bit easier on ourselves here we can actually get this node up here so we can do on ready VAR profile equals and then we'll just get this right here like this so the on ready value the on ready keyword here I should say makes it so that it's like putting it in the ready function because technically the this node when we're getting when we're creating these variables this node might not exist yet but if we do on ready then it will then it should exist and then we can do all our other ones as well so on ready var and we'll say class data oh man I'm my naming is not going here going very well class label I should say and maybe this should be profile image profile dot texture I don't know profile image dot texture yeah that's pretty good I guess class label equals get node and we should be able to do the same thing here but make sure that you get the data version come to script here grab the data label and drag it right there okay and then we should be able to copy this and I'm running out of room here I need to give myself more room we should be able to copy this and then change this to health label and change this to help and then do it again and change this to strength oops string I feel like I'm gonna have typos somewhere in strength strength data a string okay it looks like you have it correct and then we'll do intelligence label and call this intelligence okay then we should be able to say for each one class label dot class class label dot text equals class data type which is the string this night text or whatever that we have in our wizard class label dot text equals class data health and this is health label help strength label dot text equals class data dot strength and intelligence label dot text equals intelligence label class data intelligence intelligence there we go okay however we're gonna get an error when we run this because we're not converting our types so our health here is an int but we need to set this to a string so we can really easily convert by just doing STR around each of these right here and run it again and there we go we have class wizard health 70 strength 10 intelligence 100 just like what we set up in our scriptable object now the benefit of having a scriptable object like that is that we currently are our class display here has a reference to the scriptable object right we're getting a reference right here but that scriptable object is going to be the same scriptable object that our battle unit uses to detect the stats of the wizard it's going to be the same scriptable object that is displayed when that is used when you're just looking at your characters stats so you can have the same object and they have it be basically you choose what other areas of the game get access to it because it's just data it's like it's just data like an image so let's now that we've set this up let's create a function here called function update class display and this will take a new scriptable object that we're going to just call class data like this and then we're just going to pass or do all the same stuff that we did there now we can just instead of running all that code we can just call update class display and we can have or we can pass in our class data right here so now it's in this it's a in a convenient function that we can possibly call in other locations which is what we're going to do next but let's create let's create our different I may end up doing this as like a two or three video on part video just because it's getting ten along here but let's create our other classes here so class stat right here we already did the wizard so let's do the night now night right there and we'll come into the night resource we just created so this health 280 strength 290 and intelligence 230 and will set his profile to the night profile right there and save let's create another class and you can see how easy it is to add classes to your game now and we'll do an resource class stats call this on thief and save and make sure we've got the thief resource thief set his health to something like 65 I don't know strength 250 intelligence 270 or something I don't know just making this up and we'll load our profile which will be our thief right here and save and now I'm instead of passing in our wizard here let's try our thief this thief GREs and run the game and we should see our UI correctly updates for the thief class I feel like we could get our yeah let's not mess with it it's bothering me but I don't want to mess with it and that's I think that's going to be it for this video I'm gonna do another one real quick and I'll probably upload them within a day of each other that will show the rest of the concept which is getting the buttons that you can click and it will switch to the different the different classes but you can imagine it's pretty easy you just give each button its own reference to the scriptable object and then that button just calls update class display on our class display passing in its scriptable object that it contains so it's not too tricky so thank you guys so much for watching this video hope hopefully you found it at least inch interesting and potentially useful depending on the kinds of games that you're planning on making and you know whether you see something like data like this that can be easily created over on the right hand side that designers can easily access whether you see that as being beneficial to your project or not so I just wanted to make this video because I was interested in scriptable objects and I wanted to know how to make him in Godot and it was kind of tricky to figure figure it out I was able to find the information but you know it wasn't like an easy Google search at least when I was looking for it now it may be because this video might pop up but that's the plan people who are interested in scriptable objects in Godot hopefully this video was what you were looking for thank you all so much for watching I really appreciate your support and if you enjoyed this video give it a thumbs up and I will talk to you all later

Channel: HeartBeast

Views: 50,183

Rating: 4.9207048 out of 5

Keywords: Godot Engine, Godot 3, Godot Tutorial, Godot Game Engine, Godot 3 Engine, Godot Engine 3, Tutorial, Make Games, gdscript, Open Source, Scriptable Objects, Scriptable Objects in Godot, Character Classes, RPG Classes, Character Selection Screen, Knight, Thief, Wizard, godot, game development, game engine, godot tutorial, godot 3, open source, godot engine 3

Id: wuxal3C0800

Length: 42min 10sec (2530 seconds)

Published: Tue Oct 09 2018