 The Gradle documentation has a very good example of how to do to the movement, and you can see it here, there's like an 8-way directional movement, there's a rotation plus movement, and rotation movement with the mouse, click and move, there are a lot of examples, and it's very good that they give you all this information, but if you want to do it with visual scripting you might be a little bit lost, so let's go ahead and recreate this same tutorial in visual scripting. So, first step would be to add the keys, so we need to add the left, right, up, down and click, we're not going to be adding the click because we're only going to be doing the 8-way movement first. I have a new project here, I added some images that my brother made, so I'm going to be using those, it looks a bit nicer, and yeah, project settings, input map, and here we can add our new keys. So, left, right, up and down, okay, left is going to be a key, A, right is going to be a key, D, okay, up and down. So, that way we can access these variables, so we know what kind of keys are we going to be using in the tutorial, and we do the same with the arrow keys, some users might prefer them, I don't know who still prefer them, but hey, left, right, up and down. Okay, so we have all the keys here. Let's close it now and create a 2D scene. In this 2D scene I will add the background, which is the image that my brother made. We are going to be moving the player, which is this sprite that we have over here, but first, let's continue with the official tutorial. We have a kinematic body, which is a kind of node, as we can see here. A kinematic body, we have a variable here, which is the speed of the movement, and then all the code with the logic. So, you can read the description here if you want to learn more a little bit about vector math, but I will assume you already have the basics covered, so let's go ahead and start with the scripting. First of all, we need to create a new node, which is going to be a kinematic body. You can see the icon of the little guy moving, so this indicates you that this is the node that you want for a player in a game. So, we have it here, but there's a problem with it. We have a warning first, we cannot see any image. So, first of all, now we can add a new sprite node, and this sprite will be the texture here. You see this variable here will be the player, so we can drag and drop it there, and we have the player. Now, another thing I'm going to do is lock this node, so the children are not being selectable, and let's save this scene. It's going to be 8-way movement. Okay, let's move the player in the middle of the screen, and now, since the image is bigger than the viewport, let's modify the viewport so it's full screen. Let's see this image, it's 608 and 544, so let's go to project settings, general, window, and here we can set 608 and 544. We disable resizable, okay, so we have it here. Now, we center this, let's transform, you can set it to 0 again, and the offset is not going to be centered, alright, so we have the window here. Let's try it out, and we have here the window with the player, same as we have it here, so this is our game. Let's add the movement now. So, we right click on the node, we attach a script, and instead of using the language gd script, we're going to be using visual script. The name of the script is going to be the same as the name of the scene this time, because it's a tutorial for 8-way movement. Recreate it, and we have our view here. So, this is the 3.2 version of visual scripting, they added a bunch of features, and it's overall better than the version that we have currently in 3.1 or previous. There are still some issues, but we can circumvent around them pretty easily. Let's set up a view so that we can see both the tutorial with the code and the visual scripting on the same screen. Let's make this smaller, as small as possible, so we have more room to work on our canvas here. And let's see, it extends kinematic body, it says on the first line, and we see here the base type is kinematic body, so this is the same. Now, we need a variable, which is speed, the speed for the moment of the guy there. So, we add a variable, we right click, we edit the member, it's going to be an integer, the value is going to be 200, and let's double click to rename it, it's going to be speed. And we also need a new variable, which is going to be velocity. So, velocity, and we edit, it's going to be a vector 2, like so. So, we have here the same, we have this and speed. We have export here, which means that whenever you click on the node, you can modify it from the specter. You see, like when I click here on the node, we have some properties here in the inspector, collision, motion. If you want to modify the speed and you don't want to open the script and doing it manually, you can right click here, edit member, and set to export. And as soon as I click it, you can see that the variable is appearing now on the inspector, so we can change it to the value we want later on. Let's go back to the script. After getting the speed exported, the velocity, we now have a function, which is get input. This is going to reset the velocity, it's going to be checking for the keyboard input, so if we press right, or if we press left, it's going to move the velocity in a different direction. And then it will set the velocity to a normalized version of itself, multiplied by the speed. Okay, so how can we create this function? On the editor, we have another section here, instead of variables, we have the functions, and we can create one and rename it. Pressing here on the pencil, it's going to be called get inputs. So we have the same, we have the function get input. And this arrow is going to be marking the flow of how the app works. So first thing we need to do is to set the velocity to zero, to reset it here. I can use this variable here, I can press control, and I click here, and I drag it to the screen. And when I drop it, we have here the set velocity. This is the same as the first line, and it's set to zero by default, so that's what we want. We connect the flow from here to here, and we have the first line of our code. Now we need to start checking for actions. And to do so, we can right click in this empty part of the screen, we can right click, and now do the action press. Here we have a visual screen action, we double click it, and we have this action. We can set here the variable that we want to check, so we have a list of all the actions that we created before. So let's check the first one is right, let's check for right. This will give us if it's being pressed or not, but we need the conditional. The conditional here in this case is if this action is pressed, let's add plus one to velocity. So let's do a conditional. We can drag and drop from here to an empty place, and condition open. The condition will require everything that is here on the left, it's a requirement. And everything that is here on this box is the default. In this case, here, when we were setting the velocity, we could set it here like we can write it or we can give it a value. But in this case, since it's false, it will always be false. Since we want that value to be the checker here, like is the action press, we can connect it and it will take the value from there. Okay, so now that we are checking, we need to set the velocity. In this case, there are no way of adding plus one to a variable. Now you see here the x is the horizontal and y is the vertical. There is no easy way of doing this. We will need three different visual nodes. In this case, one that will be getting the velocity. So we drag and drop it so we get the current velocity. Now it's going to be pressing control and drag and drop it, setting the velocity. And another one is going to be, we can right click in the middle and it's going to be math add. So we are adding. The description could be better, but yeah, okay. We open it. Now, as you see here, it will require two different values. In this case, it's the current velocity that we have and the velocity that we want to add in this case is plus one to x. So in x, we add plus one and okay, this will give us the new velocity that we want and we can connect the result to the set velocity call. Since we want this to only happen when the condition is true, in this case, the condition being action right, we connect the flow of the chart here. So we start the script. We reset the velocity. We check for the action press in this case, right. And if it's true, we set the velocity to a new value. That value is going to be the addition of the current velocity plus the one velocity. So we need to do the same for all the different keys. The flow is going to be a bit weird, but let's go ahead now and check for the other ones. Let's add more room. I need to see better. This is starting to get claustrophobic a little bit. Maybe we can press here on this destruction free mode and boom, we have it full screen. Okay, so now let's continue with the left. So again, right click action because it's what we are checking. Press it here. Oh no, to change these values, I need the inspector and here I don't have it. So let's go out of destruction mode and set the left one. And since I want to be back there, I want to get the other ones. So right click action and again, right click and action. It will be the same every time you click it. So now have right, have left. Now we need down, which is the default one. If you wanted to show that you have to change to another one and then back to down and use it here. The title up is the last one. Okay, so now that we have them all, I can go back to full screen. Okay, let's do the same now for this. But as you can see here, the order of the flow when you're writing code in text is always from top to bottom. So every line that is on top is going to be executed before the next one. In this case, it's following the white arrow. So if we have this conditional here, when this conditional is done, we can continue with the second conditional. So whenever this is done, let's drag and drop to a new area and let's create another condition. So this condition, it's going to be the left checking. Let's connect left again. And we can do the same for the other two. We can do the math later. We drag and drop to the air, another conditional. We place it here nice and tidy. We connect it. We do it again, another condition. And we should have the four keys ready. Now let's do this set and get velocity of all of them. So pressing control, we get the set. So let's create three of them for the other ones. And we get now the values just without pressing control or anything. We're just recreating these three times. And now the addition with math add. We do right click, math add again, right click, math add again. Okay, let's connect everything. So if this is true, we want to set the velocity. The velocity is going to be a plus in this case, minus one. And that value is going to be set here. The same goes here. So let's add it. If we press down, we want to add to y plus one. So here in y, we add plus one. And we connect it here. And if this is true, okay. Now here again. If this is true, we connect it. And we want to subtract one. So minus one. And we set the velocity here. So we have all these lines done already. Actually, all this. We are almost there. We only need to set the velocity and create a physics process function. It looks very, very unorganized. There's probably better ways of doing this. So you can go ahead and play with it. I prefer to have it like this because it's more similar to above. We can change it later. So now we need to get again, we need to set velocity. So press control, drag and drop, set velocity. We connect the done with the set velocity. And the value to get this is going to be a bit trickier. First of all, we need to get the speed. Second of all, we need to get the velocity. But the velocity, if you see here, is going to be normalized. What does it mean normalized? It means that whenever you're pressing up and left, it's not going to be going faster than if you're just going in that diagonal. There are a lot of tutorials covering that, so I invite you to read them. But if you don't want to, it's something that you have to do in this system. And since we are following the tutorial code in the documentation, which is something that you can do on your own, let's just do it as it is there. So normalization, how do we go and we search for that? The same as we do with the rest of the things, we right-click and we type normalized. So vector to normalize. Here, this is the one that we want open. It takes one value, in this case a vector, and it will give us the normalized speed. And now before setting it, we need to multiply them both. So right-click, math, multiply. We can multiply two values. In this case, we want to get the speed and the normalized velocity to the other one. So you can see here, it doesn't let me select. It doesn't let me do this because it's expecting some integers. So let's go and go out of this mode. So instead of having an integer, we're going to do this as a vector too. This is the first time we have to modify something to adapt to this. The code can work if you do a little hack, but here with any, if you set it to bold for instance and any, it should get them as you want. So if you get the int and you multiply it by there, it doesn't allow you, it changed automatically for some reason. I think that's not how it's supposed to happen, but we can remove this node and change this variable to be a vector too. And since the speed is going to be the same up and down, left and right, let's just do the same value for both. So we had to improvise a little bit, but we should be fine. Let's remove this old speed and let's get the new speed. So now you see it's a pink one as well. And we can add the math, multiply again. And it should be fine now because we can take one vector too, another vector too, and the result is going to be a vector too as well. And we can set it to speed. So we have the first piece of our puzzle done, which is the function get input. Now we have the physics process. So every time you see in a tutorial function that has this underscore at the beginning, that means that it's a function that already exists in this class. In this case is Kinematic Body. To access a list of all these functions, you can press here on this drawer. And when you click it, you have here all the functions that this class has. So now we want to get the physics process. We open it and we have here the function and the delta, which you can see here. It's already there. We're not going to be using the delta for now, but you can use it later as a regular get value here. So let's first of all call a function, which is get input. So we can drag and drop it, get input, and we are running it. Let's connect it. So now we just need to set the velocity and use this move and slide. So let's get the right click, move and slide. Here we have it. Move and slide. It's not move and collide. Okay. And also not with Snap. Like we just move and slide it. Okay. Let's connect the white arrow, move and slide. And we need to get the velocity. So we drag and drop the velocity. And now the result of this is what we want to set the velocity to. So we press Ctrl, drag and drop velocity, and we set the velocity to the move and slide. That way this is the same as these lines. This part of here is the same as all this. This part on the side here, the two variables are these two things. And here we have the base type of that. So let's go ahead and save it the moment of truth. Let's try it. Let's see how many errors we got. Okay. Nothing's broken yet. Let's press the keys and we move the guy around the screen. That's great. So we have the same tutorial with the same effect here. You see it moving in the same directions. Right now it just overlaps everywhere. It doesn't matter. But at least we got it just moving as we wanted. You can do the same kind of translation for the rest of them. For the direction you're going to need to create a different variable, which is rotation deer. And you're going to have to be adding the speeds, things like that. But you already know everything you need to know to implement this. And the same with the rest. There's not a lot of magic to it and having very nice tutorials around. It's also something that is very useful. But if you want to do the visual scripting, you might not know how to do it. So I hope this tutorial helped. I'm going to do just one extra thing at the end, because I'm getting nervous that this guy is kind of blurry. So it's just an extra. I'm going to select here the player, which is the PNG that I have and import. Okay, I had to deselect it and select it again now with the import. Let's remove the filter. Let's re-import it. Let's run it again. And now it's very sharp. Okay, so now that's better. So thank you very much. I want to thank my Patreons and everyone that commented, liked and subscribed on my videos. And there are more video tutorials coming soon. Just to talk a bit more, and if you are still here, maybe you want to know my opinion, but I feel like the visual scripting is still not there yet. There are a lot of improvements, of course, but there are still a lot of things that we should be improving. I'm going to try to do them myself. So I'm learning a little bit of C++ and seeing how I can contribute to Godot itself. But enough with the rambling, and thank you very much for coming today. And see you next time. Bye.