Godot 3 Camera Tutorial - Camera2d and Grid Snapping

welcome to this new tutorial for guru 3 in which I'm going to look at the camera to denote are going to see how to create a smooth camera that follow the player effortlessly almost without any code and then we'll see how to create a camera that smoothly transition from screen to screen but that also snaps to the grid all that thanks to Lance Kokomo who made this example initially will they know that you can add or remove without breaking the game head to github you'll find a link in the description to download the full sources for this project so when you land on this page you can download all the examples by clicking the green button and downloading them as a zip file you'll find the exact example in the 2018 s folder March 16 camera to the rig subfolder ok and you have a start project and the end project with the final code you can use for reference when you import the project in go to the start 1 you will have a player inside the level scene if you try out the game the player can move around you can use the arrow keys to move press shift to run the thing is there's no camera following it so when it gets out of the screen it gets out of the screen we're going to add that camera in B play a scene for that click the open and editor button in the scene tab and you will land on the player so to have a camera tracking our player select the layer node the object you want to track and you add a camera as a child of it they camera 2d node in this case because we're working on a 2-d game example with that you do have to set the camera to current this is the current camera that the viewport is tracking so there can be one camera active at a time per viewport in your game if you try out the game you will see a camera Center on the player at all time so when you move the camera moves with it not all the time you can see that there's a dead zone in the screen center where the camera doesn't move this is defined by the drag margin cat in the inspector the drag margin is expressed in units relative to the screen size 0.2 on the left and right means 0.2 times the windows width can go to the editor section and the inspector and click on the checkbox next to draw drag margins to see exactly the size of this dead box now you can modify the drag margin to see the box expand as you increase the value and contract as you lower it note that point 2 on the left means 0.2 times the windows width so if you have point 2 on the left and point two on the right the box is 0.4 times the width of the game window this system has one little issue by default if we move the character around the scene it's not centered on the screen when the camera starts to follow it worse than that the camera is actually lagging behind if we're doing an action game or something like that we'd rather want the camera to move ahead of the character so it's easier for him to spot obstacles and monsters coming up we're going to solve this problem using a rigging technique a rig and animation is the setup you'll use to allow a character or an object to move in certain ways and in our case it's going to be constrained we're going to apply on the camera select the player again and add a position to the node this one we'll name pivot this will be a point that will rotate it's going to be centered on the character let's add another position to D as a child of the pivot and this one we'll call camera offset so I'll move it to the right of the character and drag and drop the camera to D on it now you'll see the camera didn't move and we want it to Center on the camera offset node so select the camera go down to the transform section and no to D and reset the position to zero now the camera will always be at an offset compared to the player so if I play the game now you will see if I move to the right the camera is ahead of the player there's a bit of a dead box still if I try to go to the left or down it is worse than before to solve this I'll select the pivot no to show you we just have to rotate the pivot and the camera will follow it well needs a little bit of code for that so let's click the add script icon where the pivot note selected well place this inside the characters folder create a new folder called camera and we'll call this our cameras pivot da Gd if we look at the player script press ctrl alt o and type player to find it at the top you'll find a luke Direction variable it represents where the player is looking in a 2d game it's very common to represent the direction as a vector to a value of 1 represents the positive direction on a given axis so on the x-axis is right on the y-axis it's down and minus 1 represents the negative opposite direction on the given axis minus 1 is left for the x-axis and minus 1 is up for the y-axis we're going to use this look direction and I will pivot script so let's move back to it remove almost everything we do need your ready function we're going to do two things first using the unready keyword we're going to get a reference to the notes parent it's going to use the get parent method this is one of the ways you can access your parent the other way is to use the dollar sign open quotes and type two dots which means you're going to move up one step of the node hierarchy and get that no sir in our case it would be the player now we're going to add a little function that's going to convert the characters look Direction to an angle that will apply to our pivot node so let's create a new function well call it updates pivot angle it won't take any parameters it's going to get the look direction from the parent and convert it to an angle we can do this with the angle method that's bill into vector2 and we'll apply this value to the rotation property of our node now we have this method we have to call it so let's go to the already function we're going to call it once there and then we'll add a physics process method because our character is a physics object and on every physics stick we also want to update our pivot angle this is why we turned it into a small temple function but with this you can play the game and as you change direction the camera will rotate with the character and move ahead of it with a small delay so that's not very good that's not really what we want and this is where the built-in smoothing comes in handy let's select the camera to denote we're going to go to the smoothing category and be inspector and enable it when smoothing is on the camera will catch up to the position it's trying to track you can change the speed value to make the camera catch up faster or a bit slower so you can see that with this code in this system there's little bit of Jaganath sometimes in the camera you can see that the camera I start catching up to the player but at least be players mostly centered on the screen when it's moving if you want a camera that behaves differently you'll have to code your own essentially and we can always move the camera up set node farther ahead and move it dynamically via code when the character accelerates or decelerate to make the camera move a bit more ahead of the player when it's running for example for the next part we're going to make the camera snap to a virtual grid for that let's add a new position to denote as a child of the player and we're going to call it red snapper this node its sole goal is going to snap to a grid so let's add a new script for that well store it in the characters folder camera subfolder and call it great snapper we're going to handle this only with code right now so we need to have some kind of grid for that will create a new member variable called grit size it's going to be vector2 with this we can make our red cells as squares or rectangles and on top of this we're going to have a grid position this is going to be a vector two as well but this value is going to represent the position of the grid snapping node on the grid at any given time that we can then convert to a world position to a position inside the level by multiplying it by grid size we're also going to have a reference to the parent node so let's create an unready variable called parent and we're going to use the get parent method to get the nodes parent in this case it will be the player now we need new function to calculate the character's position on the grid and when I'm saying the character I'm talking about the player not the grid snap a node itself right let's add a new function called updates great position it doesn't take any parameters and we're going to get the position of a parent in the world and we're going to divide it by the grid size and round it out to get our position on the grid so let's do this we're going to create two variable first for the x-axis we round out the parents x position / grid size dot X so we have to create two variables for the x and y axis if we want to use the round function that doesn't work with vectors let's duplicate the line do the same for the Y value so I'm going to get the parents Y position divided by the grids y size and round out the volume then our new grid position is going to be a vector - made of our x and y values this grid position is equal to the current grid position of the grid snap a node we don't want to do anything with it we don't want to reposition our node so let's make this check if the grid position the position of our grid snap a node on the grid is equal to the new grid position we'll return from the function and we don't have to use an else statement after that we can directly assign the new grid position to the grid position variable to store it so we can print it process it later and then if we change the position of our grid snap node on the grid we also want to change the nodes position in Cartesian coordinates let's set the position of the node to grid position x the grid size that's how we can move it to the new position so now in the ready function you want to call that update grid position function and we also want to call it from physics process so on every frame remember that our node the grid snap node will only move if the new grid position is different from the current grid position if we try to play the game now we would have a little problem because our grid size is an empty vector - its equal to 0-0 and when we calculate the grid position we divide the parents position by the grid size by zero this would throw an error so we want to initialize the grid size value and we'll do this in the ready function we're going to pull a value from the OS class and can get it with the gets screen size method this will return the game's resolution in a sense which will make the camera change position only when the player hits the edge of the screen now on top of that we want to set our grid snapper as a top-level node a top-level node is one that doesn't inherit the position from its parent the way it is right now if you don't set this node s top level it's going to move along with the player once it's set as top level it's going to move independently from the player essentially snapping to the grid based on the player position now you can save and if you try out the game you will see one last little issue in our system is that sometimes when we are still quite far from the edge of the screen the camera stars changing position but we really want this to happen only when the player hits the edge of the screen this is happening because of a drug margin on the camera when you are in this dead area the camera doesn't move so it's going to still change position outside of it but it can be placed anywhere inside of that box to save all the drag margins to fix the issue and now you should have a zelda-like camera transitions it does not block the character when you hit the edge of the screen all that with a simple grid snapping note that said I have to think last cooker' more for providing the example initially if you want to see more you can check out the course be creative have fun and see you in the next one bye bye

Channel: GDQuest

Views: 50,682

Keywords: camera tutorial, godot 3 camera, godot 3 tutorial, grid snapping tutorial, grid, camera2d, 2d camera, 2d game creation, gdscript, programming, godot game engine, open source, godot 3

Id: lNNO-Gh5j78

Length: 14min 9sec (849 seconds)

Published: Wed Mar 21 2018

Reddit Comments

[u/NathanGDquest]

It's been a while since I made a tutorial just for the channel, so there you go! You can download the source project on GitHub.

Big thanks to Lars Kokhemor who wrote the grid snapping example for Godot 2 last year, and who let me port it to Godot 3.