 Hello, welcome back! On the next videos we're gonna look at a very intriguing but interesting graph edit and graph nodes. They are the building blocks that you would use to make a program which has the capabilities of displaying information in the same way as the visual scripting does in Godot or as on these examples here, for instance, a little mouse whiskers, basically you have a bunch of nodes that you can connect on a visual way and you can use them to build from logic to any other kind of process. They are a little bit weird and not so intuitive to work with so I hope that this tutorial will help you understand the basics on how to set up the stuff. Let's start with an empty scene, it's gonna be a user interface, let's save it as the main one for our program, now that we have it, let's create a child node which is gonna be the graph edit, this is the node that you need to add as the container for all your graph nodes, let's make it full and we have it here, if you test it out like this okay, we select the main, you see that you can zoom in and zoom out, these are the basic functionalities, you can scroll, you can also use the middle mouse to drag and drop and move around, this is the size of the grid and here if you want to see it or not. So these are the basic functionalities, now what we want is to start adding nodes and connect them. So how do we do that? First of all, let's add some margin at the top of this node, let's add something like this so we can fit a button at the top, let's add a simple button, yep, which is gonna be add node, we can add a plus there so it looks nicer, okay, something like this, okay. Now we want this button to be connected to a script that we're gonna create for the program like we usually do. So we create a regular script, main.gd and now we connect the button, press the signal to the main one, so we have now this function. So since we're gonna be adding childs to this graph edit, which are gonna be the graph nodes, let's first go ahead and create a scene so we can have an empty node that we can add. Let's go here, create a new scene, control node, let's change it to now a graph node here. So you can see it's a container which has the properties, the size of it is a little bit weird and it's not as you are expecting, especially for the stuff inside of it. What we have here as the standard properties are for instance a title, which we can call it like simple node and you can see here you will have it there, you can add the resizable or show close, which is the close arrow at the top, but you have to be mindful. These default functions are not working by default. You have to kind of connect them using the signals, but you're gonna see that once we are starting because it's very if you see it than if I tell you how it works. Let's create first a node here like a text edit here just as a placeholder and the first thing you will notice, text edit, first thing you will notice is that the nodes that you add inside this control don't have automatically like a size. So what you have to do if you want to see them is here on the rect properties of this control node, you have to add a minimum size that will force the node to be displayed on this container, otherwise you're not gonna see it. I think I'm gonna go with 30 seems like about right. And let's make this something like this, yeah, this should be fine. We have a node now, let's go ahead and save this node as I don't know, let's call it simple graph nodes. Okay, simple node simple graph node. Now let's go back to our main program. Now when we add node, let's add that node as a child of this graph. And now replace the function here. Okay, since every time you press we want to create a new version of this simple node that we created. I'm going to load here the simple graph node. Let's call it a simple graph node. Let's load it. You can drag and drop paths here if you don't want to type it all. It's very handy. Okay, now that we have it, let's create here an instance of Nate, we're not gonna call it like that. And we have an instance here. Now let's add the node to the graph edit, which is graph edit, add child, and let's add that node. Okay, let's try it out. Press play. And if I press here, we see that we have our graph node there. As I told you before, like if I try to resize this node, nothing happens. If I try to close it, nothing happens. And yeah, it's kind of, I don't know why those are not defaults options, but you have to create them yourself. So let's go ahead and let's make those work. Inside the graph node, you have the signals for your node. So let's create a script again, simple graph node. And let's start connecting those signals. This one, close request, let's connect close request to this and on close, what do we want to do? Well, we want to just get rid of this one. So you can do Q3. Okay, now the other one that we wanted was resize request, which is when you want to resize it. It's connected to the node. And now, very simple, direct size of this node, it's going to be the new main size, which is what the signal gives us. So now if I save this, I should be able to, from the main thing, add a node, resize it. Yeah, even if it like has no point to do that, but okay, I can add another one, I can add another one. And if I want to close this one, close it, and it disappears. As you can see, like this area will expand to fit all your nodes. So you don't have to worry about the size of this. We can now close them. Let's continue with some more basic stuff that we want to do on our nodes. Since we want to differentiate them, you know, when you press here, like, first of all, I don't like the default of the position to be here on the zero. So let's add like an offset. And every time I create a new one, it creates on top of each other, which is not very helpful, you know, like I press that a bunch of times and now I have them all there. I don't know how many I have. So let's fix that. The thing we are going to do is create a new variable, which is going to be the initial position for these nodes, which is going to be a vector two. And this is where I want to create the first one. Let's add like a margin of 40 and 40. And now before adding the node, what I will do is I will set the node offset to be and I'm going to add the initial position. You can do also equal, but I want to add it because, yeah, you will see just in a moment. Okay, let's press add and now it's not being created over there. Okay, let's let's track the amount of nodes that we have and start adding more offset depending on how many we create. So node count or node index, I think it's better. Let's start with a zero and every time we create a new one, let's add that number. That way we're going to be keeping track of that. So instead of just adding the initial position, you can also do a node index multiplied by a new vector two, which is going to be how much offset you want between node and node. This will basically be creating the first one at 4040, the next one at 6060, next one at 8080. And so you can see now when you create a new one, they do not overlap. So you can press this a bunch of times and you're not going to have any problem. Also, if you want to keep track of the nodes there, like on the title, we can also change the title for this. Very simple, just node title and you can add a string with the node index. So that way, every time we create a new one, node one, node two, node three, node five, six, seven, you get the idea. You can probably also add a space there or even a dash, yeah, like this. Let's try it out. Yeah, this looks okay. Now these nodes by themselves, they don't really mean anything because the most important feature is being able to connect those. So let's say that we want to make a program that just unifies a lot of text. Just I don't know for the sake of it. So if we say hello, hello on a node, you want to add another one that says world. And the program will say hello world when you run it or whatever. You will need to connect these two nodes. And to do that, you will need to set a slot. Slots are basically the dots that you see if you check on the other examples that will allow us to connect two nodes together. Let's go ahead and on our node where we create this. Let's set a slot, which is going to be what are the properties that we want to select. You can check the documentation here, searching for help graph node. With all the things that you need to set slot. It's a little bit tricky because if you go here to set slot, you don't have like a description for this method, but you can pretty much figure it out by looking at these values. Right now, I'm not going to use all of them. I'm going to be making something simpler. So let's go ahead and go one by one. An easy way to do that if you are just working with this is set everything to what you think is going to be the default and start modifying them. So the set slot is going to be the index zero pool. It's enable left if it's going to have a dot to the left. Let's say yes, we want that dot to the left. The type, let's go for now, let's go with zero. Now the color of it, you can create that color. Let's say let's create a white, which is going to be all to one. Okay, now enable right. If we want a right dot there, yes, we want that. The type of for the right is going to be zero as well. The color, let's create, I don't know, we can do maybe with a green. Okay, that looks green. And I think we have it all here. So right now, if we run the program and we create a node, we see we have the left part, the right part and I create another node. They should connect. Yes, again, the default is not working. You see like the program is recognizing that this can be linked with one another because I have like the mouse, you know, like if I get it closer, it does like this automatically, you know, like locking in. But again, the default is not connecting them. You have to code that yourself. But instead of coding that from the node itself, you have to do it from the graph editor, which is going to be handling the data flowing from one to another. So let's go to our main program here. And now you see here on the signals, you have connection requests. This is the signal that triggers when two nodes are being linked. Let's connect this one to our main script. And on the graph edit, which is the node that we want to connect node. And we have the same properties that we have here. Like we want to connect them the same way as we get the signal. That's why I don't really get why this is not the default functionality for them because it should be like that. Like what else are you going to do with this? And maybe if you want to do something with it, you can create the signal. Anyway, I don't really understand how the graph's nodes work from behind the scenes. So, yeah. Okay, let's save this. Let's try it out. And now nodes should connect and be connected. Yeah, like this. And you get a nice transition if they are from different colors, which is kind of cool. Okay, so this covers the setup environment for us to create nodes. You can, of course, add more buttons here with different kind of nodes. You can use this scene, the simple graph node to create, you know, different, maybe you want just here to have a Boolean or whatever functionality. But I'm going to cover more on the next video. I wish I had more time this week to create more content. But unfortunately, I'm going to have to leave it at this. If you are curious about it, I really recommend you to check the source code for the whiskers. It's very well-written, it has comments, and it works pretty well. So if you are really eager to create something like this and you cannot wait, I really recommend diving into this one. So yeah, that's all for now. I'd like to thank my Patreons. Thank you very much for supporting me. I really appreciate it. And all of you that leave comments, likes, or subscribes, again, it helps the channel a lot. Yeah, if you have any requests for any topic that I should cover as well, I always try to keep a to-do list with all those, so I don't forget. But since this was requested by a Patreon, it was very high on my list. Well, I won't keep you here any longer. Thank you, bye.