 Hello everyone, today we're going to be making a smooth animation for our players, so whenever we press a button it will move slowly, and we are also going to improve how the game displays some of the fonts in our theme. If you're new, this is a series, so you can check the previous video on the description or on the button above. So let's start off with adding a twin node to our character. So what is a twin node? A twin node basically creates an animation given two variables, so you can get out the position x and move to x plus 30 and it will generate an animation in a smooth way instead of having the jump like we have in the current game. So let's add that twin as a child node, so we add it to the player scene, so twin. The name comes from in-betweening, so basically it's in between those two variables. So we add the twin and that's all we have to do from here and we have to continue now with the code. And let's add the twin interpolation here. So in our move function we're going to add a new line which is going to be twin and now the function that we're going to use is interpolate property. So this is where we're going to write which is the property that we want to animate. We're going to first say that we want to be applied to self, which is the player, then the name of the property which is position and in case you want to know what the name of the property is you can hover in any of these inspector properties and it will tell you the first line, the name of the string that you have to type. So if you want to do rotation degrees is rotation underscore degrees. If you want to do see as relative or whatever else you need to get, you can use that as the string, which is what we are moving here. You see like we're moving the position to a new place, so that's the one that we want to edit. Now we have to reference that variable, the current value, so when we start is position and when we end is position plus vector. So position plus vector position. This is the end goal of our animation. Now the speed, let's try with 10 for now. We can tweak this number later and now for these properties you have to set the kind of wave and how you want to ease it in or out of things like that. And there's a great reference which is this image that I'm showing the screen and it will help you understand how it goes from state A to state B. So we're going to be using doing trans sign and for the last property Twin is in and out. So here we have it. Let's study this up a little bit so we don't have everything in one line. Okay. Is vector post not vector position like okay. So now we have the interpolation going on. Since this animation will take care of that, we have to remove this part of the logic and we can replace it with playing that animation. So Twin start and the same will happen here because it's basically the same like when we're moving pushing a box or not. So we have the same there. Now one last thing that we have to do is here when we are checking for the keeping press, we need to make sure that the character is not in between the animations because if we don't check it, we will always keep moving and we will go out of our grid. So here we check if Twin is active, false. So basically if it's inactive, we can move it. So let's try that now and let's see how it looks with this new effect added on. The movement is very slow because the number that we used there for the speed, it was 10. So basically it's 10 seconds that it takes to move from one place to the other. So let's make that way smaller like 0.3 seconds and we should be moving from one place to the other. Let's see. Okay. This feels better, but maybe even a bit slow like I don't want it to be this sluggish. So 0.1. Okay. Yeah. This looks much smoother and we can move the boxes and everything. If you see the boxes are yet not moving like we want them to, they're snapping, but okay. Let's add the Twin now to the boxes. So let's go back to the game. Here in boxes, let's modify this node and we do the same thing. We add a Twin node and in the code, we do the same. So while typing it, if you can, copy and paste it. So we copy this Twin interpolate here, which has the same properties. We want to modify the position. We know that the position is going to be the end. And last thing, remember, Twin start is what we need to replace with this. So if it can move, it will move like that. So let's try it out and now everything moves very smooth. Okay. So we have that animation going, but there's one problem here, which is that since we were checking if the both areas, the one spot here and the one below were being occupied or not by using the physics. And right now the boxes are not exactly snapping from one place to the other. We create a situation that if you move the box, it's going to be touching both at the same time when they meet in between. So if I do it, it seems like the level is clear, but you can clearly see that it is not. So we need to be sure that we check that those places are occupied once all the twins animations, like all the things are settled to do that, we're going to go back to our script here. And on the game script, we are always checking for this on every step. So every, every frame that is happening, we are checking if the game is sending or not. But we don't really have to do this check all the time, we can do it whenever the player stops moving. So since we know that the player is going to stop moving, and then we can do all the checks to know if the box is finally in this place or that let's move this into a separate function instead of having it here in the process, which is going to be called funk, check, end. So now whenever we call this function, we see all the information that we need, and we set the game to end or not, depending on that, instead of checking it every time. Now let's go to the player. And here we can see that our player has on the twin node. A signal, which is called twin all completed. Let's connect this signal to our script. So that means that one of the players stops moving. So when this twin that we start here stops, we can check now on get parent, which is on our game. The parent is the script that has the game script. So let's go back again there. So here, check, end. So now whenever the player stopped moving, we check and we see our places occupied are not like, are we good? Okay, let's go. So let's try it out again. Okay, let's move the box. And yeah, it is working. We now get the end whenever we want it. And that's it. So that fixes one of the main things. We now have movement. And let's make the dialogue a little bit prettier. If you see here, the dialogue is not pixelated as the rest of the of the game, because the game is basically being zoomed in. So we need to create a small theme to modify this dialogue. So to do that, let's go to this UI, a control node, we will have the theme that will get inherited to all the other control nodes inside of it. So if we create a theme for the UI, we'll have a theme for all of them. So let's go here and here in theme, let's select new theme. Now let's click on the theme. There's another video that I made if you want to check on the description or above, where I go a little bit more into detail for the theme creation. But it's very simple. We now have this dialogue that we want to modify and the font. So here on default font, let's load. And we have one before, which is the one that we use here. So now if I open it, we see that the buttons already have that nice and sharp font. And we could leave it there, or you can keep adding more styles to the buttons, for instance. So here, clicking on edit theme, add class items, and button. At all, we have here now some options. So we can check. So the styles here on the normal one, we create a new box flat. It's a lot of creating sub resources. But now we have the style here. Let's make the button green. Okay, something like that. And you can add more properties again, expand margin, left six, right six. And we have now that button there. Now, since we are modifying the style of the normal one, we need to also modify all the other ones. So we can right click, copy, paste, paste, paste, and paste. So now when we try the game, we see our button with the style and everything. So we can press OK there. And yeah. So that was it for now. Sorry for making this video a little bit shorter. I planned on making it bigger, but a lot of things got in the way. I think I'm going to be start making videos a little bit shorter so I can make them quicker, because if I plan to do a lot of things, then they end up being those 32 minute videos like the previous one. I don't really want to make them that big because then it's very hard to go back and search for specific things. I still plan on adding some level editors here, but I don't know exactly if I'm gonna go with the level editor or with sharing levels using a website or something like that. So yeah, please let me know if there's anything you want to know in particular. Thank you very much to all my Patreons. I really, really, really appreciate your support. And see you guys next time. Bye.