Pan, Zoom and limit camera movement - Unity 2D Tutorial

welcome in this video i'm going to show you how you can make a camera controller for your 2d games i will show you how to move the camera around by dragging with your mouse or your finger if you're on mobile how to zoom in and out and how to limit the camera in this case to a sprite or any kind of position so it doesn't overshoot the actual game world okay let's get started so here i started with a new unity project i chose the 2d template and now i'm bringing a sprite that would serve as the map i adjust the size a bit since i want it to be bigger than the camera and then i make a new script called camera movement and open it up okay so since we're working with the camera first of all we need a reference to the camera so for that just make a field and serialize it so we can set it in the inspector you could also use camera.main if you want to access the camera but that is pretty bad practice because it searches for the camera every time you call it so don't do that also if you have two cameras you don't know which camera you're gonna get but if you just make a field you can assign exactly the camera you want and then let's go over to the functionality to move the camera around with the mouse when the mouse button is first click we save the position in word space then for every frame it is still down we calculate the distance of the origin and where the mouse is now and then remove the camera by that difference if this is still a bit unclear don't worry i will add some print statements to make it easier to grasp so let's first make a vector3 outside of the function and reset it every time the mouse button is down which is the frame in which it is clicked for the first time now that way we can we keep track of where the drag started and for that we simply convert the mouse position which is relative to the camera to a world position and now for every frame that it is held down we check the mouse position and compare it to the origin and then we simply take the camera position and add the difference that the mouse has moved once the camera has been moved the first line here where we where we calculate the difference will change because the mouse position to the screen is relative to the camera so if you were to move the mouse and then stop it would actually be the same as the origin so we don't move anymore and as i said before if that is confusing let's just add some print statements so you can see it in action back in the editor let's add the script to the camera assign the reference and try it out as you can see the mouse involved position is 0.8 and 0.4 which is now stored as the origin variable when i move the mouse that changes and the different becomes non-zero but only for a single frame actually if you look at the bottom left corner you can see it more clearly because that just prints out the latest so it's basically like a an update ticker and so that only is true for when the camera is moving so when it moves then the position gets reset and the difference is zero and when you look at the actual map the sprite which is a game object that is not moving the mouse stays at the same spot all the time it's always right there in that center and on the side note if you want to prevent the panning round to stop where the mouse is over in your eye element i recently made a video about controlling the mouse within a single script including the mouse over ui check so you could check that out and then use like a bull to see if the mouse is over ui element and at the start of the function you will just return and on a different side note i've used the normal update function here but if you want the camera position to be based on a moving game object like following a character you should use late update instead late update is called after all the update functions of all scripts have been called and that is quite useful when using the camera because otherwise what could happen is this within calculating a single frame the camera position gets set first based on some object's position but then this object gets moved by an update function in some other script and now everything's messed up but that just as a side note in my case it doesn't matter because i set the camera based on input and that will always be calculated first anyway okay moving on to the zoom this one is really simple because all we have to do is change the size of the camera we're going to need three float variables here that can be set in the inspector so make sure to serialize them one for how much we want to zoom each step called zoom step and then you probably want the minimum at maximum size for the camera to zoom in we decreased the size of the camera and i'm mixing that up here in the code but we'll correct it very soon and to zoom out we increase it i'm using an autographic camera meaning no perspective so i change the autographic size to make sure the value is within the minimum and maximum i use the clamp method you just put in the value that's supposed to be clamped and then the minimum and the maximum that this value can be and you can of course do that in one line i just wrote it here in multiple ones just for clarity and by making this function public they can easily be called with a button click so let's do that back in the editor just create a button which will create a canvas for us assuming you don't have one already and i really prefer to set the canvas to screen space camera so i do that and for that i need to assign the camera so now the ui is the size of the camera and i think that's easier to work with and then i also need to set the order in layer above since everything is on one layer now but anyhow that just as a site so take the button duplicate it name it and maybe change the text then with both selected i add an event and drag in the camera because it has the camera movement script and then with only one selected each time i assign the right functions and then i kind of forgot to set the values for these zoom functions and so i'm just working with way too many zeros here so i do that and set the zoom step to one and the minimum to one and maximum to one and now everything is working quite nicely okay now the last part let's limit the camera by something and i will use sprite as an example because that is what i'm using as a map to make things clear here is a quick overview of how things work so this little orangey rectangular is going to represent our camera and then of course the background that's our sprite when we get the camera.transform.position it always refers to the center of the camera camera dot autographic size is the height of the camera but only from the center until the top or bottom so it's basically half the height like the green arrow here if you want to get the width of the camera you simply multiply the height with the aspect ratio which is variable you can just get like camera dot aspect ratio and now for this byte once again transform.position refers to the center assuming you're using the default and haven't changed that in the spot settings to get the width and height we can call the renderer.bounds.size which is vector3 where the x value refers to the total width and the y value to the total height and those are the things we need knowing that the camera position is always at the center so if we want the maximum y position that it can go up we need to get the y value of one of the top corners of the sprite and then subtract the height of the camera meaning the camera dot autographic size and now we know okay this is the maximum y it can go to get the minimum wipe position we get the bottom corner of this pipe and at the height for the min and max x position it's the same game using the width okay now back to the script first we need the four outer corners of the sprite in word space and since this sprite doesn't move i will save them into private variables and set them in a wake and then we need another field to assign the sprite vendor of the map because from there we get the renderer.bounce.size i mentioned before assuming the anchor of the spot is at at the center we need to add or subtract the height and width from the position to get the outer edge as i just showed you getting the height means we are going all the way from top to bottom but we only want to go from the center to the top or bottom so we divide everything by two since the size of the camera changes every time we zoom we will calculate the final positions where the camera can move from scratch every time so make a new method called clamp camera which takes a vector3 and returns one this one takes a target position as a parameter and the one it returns is the one taking the limitations into account so first let's get the height and width of the camera and store them in fields and the rest is as i mentioned adding or subtracting the camera size from the outer corners of these sprites and then we take the target position x and y and clap them with our new minute max values before creating a new vector3 that will be returned now of course you could write the entire function in a single line and not use any local variables but to make things more clearly i did it this way and then this method should be called every time we want to move the camera and every time after zoom has occurred and now with everything done let's do a final test and hopefully it is working quite nicely for you as well when you pan around the camera is now limited to the sprite and when zooming out while the camera is at a corner it gets moved nicely in position all right there is just one tiny problem when i zoom out so that my camera is bigger than the map it leads to a rather unlogical clamp method the minimum x might be bigger than the maximum x the good news is that this doesn't cause an error it would simply clamp to the max value the bad news is that you still have to make sure to not go bigger than the map you could just do that in the inspector by trying it out and just messing around with some values but it will be much nicer to do that in code so it adjusts to any sprite automatically i'm actually going to leave that as a little challenge so feel free to post your solution in the comments and i will take a look at it and this is it for this tutorial i hope you've learned something and enjoyed the video if you want to see more stuff and support me please subscribe to my channel and give this video a thumbs up thank you and goodbye you

Channel: Shack Man

Views: 59,680

Keywords: unity, unity tutorial, video game tutorial, unity pan camera, unity pan camera with touch, unity pan camera with mouse, unity move camera with mouse, unity zoom, unity zoom camera out, unity zoom camera in, Unity camera 2D, Unity move camera, unity camera tutorial

Id: R6scxu1BHhs

Length: 14min 53sec (893 seconds)

Published: Sat Sep 12 2020