Godot 3 - Tutorial - Tree Node and how to send signals to other GUI windows

hello guys this is Karen T and I'm going to make a new tutorial on on trace this time after posting the last video on the god subreddit someone asked for a tree tutorial and hang on to that I'm not going to but your name hopefully there's there's an image of the post in the screen right now so thanks for the suggestion and let's get on with it first thing first I have to make a very small change to my to my previous string here I had get a node on if I change it you can see that everything works there's no problem but the debugger is complaining about you know no dot found it doesn't matter because since it's not found it's not getting inside the day if so there's no no real problem but you know having these warnings is a little annoying to me and I don't know why I scripted this way well probably because coding on screen is always weird so if you make it with has node it takes care of that so now I only have these warnings that I assume is because of the alpha condition of the got all three and that's everything fine and dandy everything works we have no problems ok so we are going to use this as our our frame for this tutorial the first thing that we need is a new scene I'm going to make a control and just to keep with the theme I'm going to use it like West least control I'm going to save my scene into my scenes ass Qwest waste window undone I'm going to import my previous window because it's done no need to repeat anything I'm going to change the title to quest 3 quest list window and I'm going to fill it to the parent I'm going to lock the parent I'm going to move the parent and everything is working and we have a window that can be placed let's change one of these delete the node and add a new instance screen no scenes please quest list ok I didn't save it say and now we have our two windows that should behave and they do so now in our new quest list control we are going to add a tree tree added I'm going to feed it to the parent I'm going to feed it to the parent I'm going to tell him to expand and expand the margins are going to be zero and zero what's going on why are you not okay whatever and I'm going to unlock that stuff grab the tree and make it contained within the window just as we did with the witty text I'm going to leave the black back the black background for now we can change it later this way it's going to we're going to be able to see everything pretty fine so if everything is done correctly I can resize this window and I can resize this window and the tree will be always where I put it so now on with the tree we need our script here create we're going to delete all this stuff and the first thing that I've noticed with the tree is that the inspector doesn't have anything to try the tree you cannot add text anywhere as far as I can tell you can change a lot of stuff but there's no you know no text thing to to add so the three component is pretty easy to work with we just need to get a hole on the on the node quest 3 equals get node I'm going to copy the path paste it done and let's let's work this out so the tree doesn't do anything by itself what it needs is three items so we need to create for example our route how do we create the red we call the node and tell it to create an item and we have the red red set text zero route done word word we have a route and that's it the next question is what's this zero that's the column I'm going to talk more about columns in a moment but I already recorded this tutorial and I did something that I hate when I see in other people tutorial that is simplify things were to the point where it's not useful anymore and I'm not going to do that so you have to bear with me I'm going to set up a very very simple example in one second and we're going to complicate things in a moment so var section section 1 it's equal to quest 3 and this time when we create the item we can give it a parent so the parent of every section is going to be the real root section 1 set text column 0 section 1 let's repeat the process for section 2 section 2 section 2 section 2 and in the in the middle let's create our item one is quest 3 create item the route for this item is going to be the section section 1 item item 1 set text 0 item 1 let's create a second item here item 2 item 2 item 2 is going to have us power in the very the very same section 1 and let's copy this around and make item 4 4 is going to have a spur in the section 2 and item 5 5 is going to have a parent section 2 so now we have a tree with sections that can be collapsed and that worked perfectly so that's all great the most of the times we don't want to show that route so let's fix that in the second quest tree so said set hybrid that's it true great so now we have the basis of our tree let's get on with the columns so we can you know understand why the zero and a lot stuff my quest tree right now is going to have set columns equals to let's say well let's say three for the signified so section one said text the first column is going to be the name the second column is going to be hungry world for example on section two one set text the third column is going to be time lost for example we are going to repeat this for the section terror and now we have the columns so every item is going to have these three columns as any awry it starts in index zero index one and index till for a total of three items and we can work with every single cell in a very very independent way it's it's pretty easy okay so what do I mean when I said that people tend to make the tutorials are very very easy not complex making them like very very trivial because this information you can have drilling through the ducts that that's not the problem if I do an f1 do you look for the tree tree class description and here you have you know all the methods and all that stuff that's the information that you can get your hands on very very easily then the problem here is not how to populate the tree but rather how to work with the tree so I'm going to get rid of all these columns because you know they are not very useful for the example that I'm going to show you and they don't add anything once you understand how this works it will work with anything and you'll be fully capable of implementing any kind of column setting anything like that so this is working only one column great your tree usually is something that wants to reflect a more complex structure okay so we are going to fake that structure let's go into we are going to pass that function and we are going to create fake data our fake data is going to have real leader let's say bar quest list is going to be a dictionary and our fake data this can all go our fake data is going to have let's say quest list completed for the quest that we already have completed and quest list ongoing for the quest that are ongoing pretty pretty easy and now we can add quest to this stuff let's begin with quest least completed app and quest one - on three ongoing ongoing quest for on five let's let's leave it at that so right now I have I have a dictionary with more data okay it's not just just taping the items by themselves let's call the fake data and now what I need is to make the tree show this data funk show quests and data the first thing that I need is the rule right war oh wow okay let's let's do it this way and I'll get to the to the stupid things later create now quest three create item [Music] quest three hide Android and now we have a dictionary with elements right for section in quest list so for the coffee bar section item it's equal to quest tree and as you can imagine I only need to create the item with the parent as grid and section item text for the column 0 is going to be section section done now well actually now it's not going to do anything append and I need to call show quests quest list ok so now we have completed and ongoing let's get on with the quest with a quest themselves for quest ID in quest list section actually in range size because being an array I will not be able you know to to traverse through the for loop like in the like in the dictionary I need to go you know item by item so Ward quest item it's equal to quest tree create item now the route is going to be the section where it belongs section item on the quest item said text column 0 and the information that is going to be quest ID Don easy working so that was not a big leap by any means and I can we can check it on the main so we have our quest list our detail but you know this is a very little information because right now what I have is let's say the quest title but how many times are you going to have this kind of structure that's a very weird structure to have usually what you will have is something more complex okay so more complex asking what let's make a new script and I'm going to save it arts classes quest quest class so now I create a quest class this quest class is going to have all the information that I want to request for example title for example our time limit or completed whatever you need to to have stored in the in the quest class usually there's a function that acts as a as a constructor which is in it but I found very inconsistent for for example if you are creating this kind of quest class the problem that you are going to face is how to set a title but not a time limit nor a completion or a title and a completion but not a time limit because it's not relevant anymore so usually the way I go about it is to find constructor and here I make parens equals whatever title is equals to generic generic title if parents doesn't have title in it else params title for example so I can copy this and do it like this time limit zero completely false this is going to be time limit and this is going to be completed this is going to be time or women and it's copy and paste let's copy so right now what I can is call this function as quest constructor constructor and within the dictionary I can make title is equals to whatever the title and complete it it's equals to true for example and the timeline limit will be you know self set to zero or I can you know just make the title or whatever I have three different components that are mutually independent and that way I can have an object class an an object quest that has all these parameters well define and that can be initialized as to whatever I want so let's keep this thing simple set title T title equals T probably you want to check that T exists and a lot stuff font get title return title I usually like to do I said get set title good title so I always know you know the names of the of the constant of the access points and I don't mess around with variable itself so now I have my quest object what I'm what am I going to do with my quest object this is going to be I need a new script this time is going to be here and it's going to be my Global's in robots in this global what I'm going to do is to set a constant sorry the cold holy cow quest class it's equal to preload race quests personal class class there we go that way I can call this kind of class from wherever I only need to go to the project settings go to outer load my path is this global the name is global and done it's a single term so it can be called wherever now let's do our fake data in a more compelling way so the thing that I'm going to append now is going to be global quest class new constructor title equals first one I don't know if it's going to let me do everything within the within the append let's try on it's not let this complaining about 21 what's wrong in 21 okay because it's it doesn't have I didn't adapt this this part we're going to rock this and see if it lets me I'm not really sure usually don't do it this way because you know it's this a really weird way of going about it but for the example it's pretty useful down so bracket bracket bracket bracket so now that I have an object here my set text is no longer this kind of stuff this kind of stuff is going to give me my object so it's going to be get text see how this array now this arrays now have quest class objects so it's not going to you know there's no text here available I need to come for it okay probably a better way of doing this more clear way is to work bard quest so now they're in quest I have my object my quest object and I only ask for my text my actually my title title let's try that out it's complaining get title so it didn't allow me to do all this inside here my Q equals new Q constructor and I add key okay let's do exactly the same Q is equal to all this stuff except for the constructor constructor okay and let's forget about this right now the coffin is real so as you can see now it's letting me do whatever you want let's copy this stuff here and just change the twos for threes the tears for fours twos four fives okay so now we have a dictionary with two items completed and ongoing and each items is going to have an array of objects of class quest class objects and I'm getting the title of the quest out of them and put it that putting that in the in the tree what here forgot this one so it looks the same it's exactly it looks the same but the way of constructing the tree it's very much powerful because right now I'm not you know hard cutting anything I'm just getting any data at all and as long as the object that I'm passing has the title and golden okay but now with the more interesting part which is well the tree by itself it doesn't do anything okay I think I can you know I'm for deploy and hide the items but you know they didn't do anything the the thing that we will pretty much want to do is to have something like in the main screen and whenever I click the quest to these windows reflects my election or whatever or maybe I have a separate attachment in the very same window or that there are a million things but I need for these items to do something okay so in the tree as a say class is pretty easy to to make them do stuff you go in the tree you go on your signals and you go to cell selected do quit it connect and there you have a new method that has the trigger okay so how what do I get within this method well what I get is preen so so quest tree quest tree get selected and now I can ask for some stuff for example the text the tooltip whatever I have within these items here this quest item that is being defined with these two lines so right now I'm only giving a text so that's the only information that I have get and here you can have all the information and what i i i was missing is the i have the instance ID which doesn't help a lot if you don't know exactly in which order the tree is given maybe if you want to change something with it within the tree for example when you click wow i have the decode unfinished and that's let's get the text for example get text the column 0 so the idea is fine if you want to you know push this this item and change the background of the item or the text of the item or something like that for that the idea is pretty useful but since you have the item itself do you really need that ID i mean i already have the item for example what i can do is set text clip because this is the quest tree item that's exactly that okay so I can change the the text right there I need the color done click click click and you can see down here that I'm getting the text prior to my quake and now the text is quite so quest 1 is going to be me click and you know we can make for some kind of game if you feel like it but my point is with this get selected what you have is I earn and right now the only information that that item has is one the place that it has within the tree within the tree and that's not very useful and the second information that it has is the text that I've said for for the item so when I what I think is is really powerful is a third option and that's it quest item I can add metadata metadata for the columns zero and what kind of metadata I could add that will help me well for a start I could give it quest for example get ID if I had that method okay so let's say that every single class that I have has an ID and I have a set Get Set ID and get ID okay I'm going to make them ID pass yes for for kicks okay so if it has any form of identification you could pass the ID so you could you know ask to the quest list class that cause has all the classes in the world to get to fetch that ID or a database or whatever the other way around it the other interesting part is to pass the quest itself as a reference why not that's pretty useful so in my metadata field I will have a reference to the object itself so right now what I can do is to ask for the for the item let's get var quest tree item it's equal to two that okay now for quest the quest itself is my quest tree item get metadata for the column zero and once I have the quest I can always say quest that get title for example see I have the title but I'm not getting the title as in the as in the text within the quests I'm getting the title from the quad sister itself so I can change here my I can change here my the appearance of my of my items in the tree see with it with the disease but my title remains the same because that's not the tree item it's the the quest title itself and once you have that that quest it's pretty easy to you know make our system to show the details signal quest detail requested for example requested I'm going to clear that well this is very messy the the way I will go about it please you know get rid of this just like that okay so a me see no quest detail requested and as a parameter I'm going to pass the quest let's for the sake of the tutorial more quest quest so right now I'm Abbey Dirac I'm emitting a signal requesting the details for the quest and I don't pass an ID or anything like that I pass the whole quest as a reference this is you have to be aware that when you pass an object like this as a reference any script can change the contents of this of this object that's important to note but other than that it's pretty much okay it's it's pretty fine so you can either handle the details right here or probably it's better to handle it for example in the main so I will make a script in the main in main screen I will get I will get the quest on ready bar quest list equals to get node request at least control now I have the node of the quest list I'm going to get the node of the quest detail quest detail control and what I'm going to do is to on a on the ready function connect my quest list quest list connect on quest detail requested self run quest detail requested that's going to call the function quest detail requested here in the main script whenever I get this quest detail requested signal that is emitted by the quest list control right here okay so my function function on quest detail requested remember that is going to give me the quest right now what I can do is to say trained quest detail quest good title let's give it a shot palm quest detail quest to a suspected quest three quest for quest five now we only need two to link this signal that I'm receiving in Maine with my quest detail window and that's going to be pretty easy I only need to go to my quiz detail control open my quest detail control I'll know what I have here whatever did I do this I don't remember doing it so well actually I need this okay it's from the last time I I I recorded this tutorial that I was doing it like without the class part but I think this is important because this way you can you know not only know how to form the tree but form it with objects that you are going to are likely going to have and Link all those pieces together so right now what I have is my quest details which is this this quest text okay and what I want to do is to make a function that alters this text so function said quest details quest for example I'm going to pass the whole quest so quest details said be be card said text I'm not sure if it's text or bbcode let's try with title Plus first good title for example so now that I can change my let's oh now that I can change the contents of quest list the the quest details from this script I have access to that within my main ok so within quiz did quest details I can do quest details said quest details quest and that should change my quest details as you can see it's pretty easy once you you understand how to form the tree and every item can have not only the text that is showing but this metadata which is the most cool part of it this metadata is going to allow you to pass you know object or identifications for database access anything at all you can link you know this metadata whatever it is with a signal and were operated with that information elsewhere so quest is control only takes care of receiving the data which will be received by fake data for example I can take this out of here this is the the look that you have in my in my world okay this control quest list out there right here so quest okay so now my quiz my quest list control doesn't have the list thus it doesn't have let me phrase it differently it doesn't have anything that makes mention of the data because this component is not supposed to have the data this is only a way of showing data the data is God is coming from elsewhere in this case is going to come from Maine where I have my main logic I wouldn't do it like this in my in my project Maine will be only a way to display the data that is coming from elsewhere too so I will have you know like a main class or game class that have all the quest lists and all the timers and you know the health of the player and all that stuff but whatever my point is here I only have waste to operate with the data that is given to me so I'm going to make sure because writing break here I have reference to quest list instead of data I don't know why why I have it this way but I'm going to change that in a second now everything is operating on this data that I'm passing and the only thing I need to do is to call for fake data here and pass quest list show data quest okay is that so quests is their soul quests so the data is going to be elsewhere here I only managed how the tree is foreign and what signals is outputting this signal is handled elsewhere because I know how this controller doesn't doesn't control the details of the quest sometimes you want to show the detail sometimes you want to check if the quest is accepted to show the details or whatever that's all you know handle elsewhere it doesn't matter right here the only thing I'm doing is with this data so ministry and if the player clicks anything so the request so the request is handle here here we could have you know some logic logic like if you have access to the quest maybe you have items in the tree that you don't want to show the details for or there are details that you want to be hidden until whatever condition is met it doesn't matter the only the only thing that matters is that the information is not handled here so if I run my mail we can break it that's a possibility what what did it break global that and break quest list already exists okay it's the same name so quest list window is going to be the quest list control quest list window quest list window that's the quest list and that's about it let's try again and now see everything works and my quest list window is like really really really small if you if you look at it it's really really small so anything I want to change in the aspect of the quest list window like if I want to add more columns or check for example a column with a button with a check pattern that tells me if the quest is completed or not or if I want to check for the time left or whatever that's really easy to to handle here and I all that the only thing is that all the time I'm going to get the metadata in the column zero where my quest object is and I'm going to pass it to whoever needs that information that it's not the quest least control so I know that it was a lot easier when I had you know all hard-coded and he was you know pretty intuitive but I I'm all for tutorials that so more complex stuff and that shows how to go about it because sometimes people don't know how to really approach these things and I'm begin to think about how to store the data and all that stuff and how to store the quest list for example he saw a whole thing on itself how are you going to store it access it short the data ah I don't know if I set it on the beginning but the reason why I have these items be arrays instead of dictionaries which could be dictionaries too is because the arrays can be sorted that's that's why I have the arrays and you can create custom sort orders that that way I have in my own project function that compares quest class items between themselves so I can sort the array by time left or by difficulty or by completed or by whatever so you can create you know custom sorting systems within the array system that current offers which is a pretty powerful thing so you know those are client those are the kind of decisions that you have to make and when you are constructing something like this tree you need to know how your data is going to be stored how you can access it here you can you know traverse the dictionary this way here you need to traverse the array this way whatever you had to take all the incisions and I only show you know a more complex example than the one that you can have on the documentation already I hope it was helpful I hope that you liked it and I hope to see you soon bye-bye

Channel: Caronte Codes

Views: 6,181

Keywords: godot, godot 3, game programming, tutorial, godot tutorial

Id: luqzBdHmd64

Length: 50min 20sec (3020 seconds)

Published: Thu Sep 28 2017

Reddit Comments

[u/Metathlon]

This is the tree tutorial as requested. It's long, but that's because, instead of showing the tree node working just with strings, I show how to make it work with objects and how to make it communicate with other scripts.

I hope it helps someone ^{_^}

[u/starbuckbeak]

You are a gentleman and a scholar. Thank you!

[u/Grass_H0PEr]

This looks fantastic!!!

Thanks for taking the time to make this, really looking forward to watching it

[u/n1nao]

Thank you. Nice videos.