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

[@МК264]

Great tutorial Managed to hold my picture in the center on maximal zoomout by changing two lines: float minX = mapMinX + Mathf.Min(camWidth, mapRender.bounds.size.x / 2f); float maxX = mapMaxX - Mathf.Min(camWidth, mapRender.bounds.size.x / 2f);

[@piotrek228]

Thanks for the video, everything works. I am pasting the code for others: using System.Collections; using System.Collections.Generic; using UnityEngine; public class CameraMovement : MonoBehaviour { [SerializeField] private Camera cam; //obiekt kamery [SerializeField] private float zoomStep, minCamSize, maxCamSize; //zakres powiększenia [SerializeField] private SpriteRenderer mapRenderer; private float mapMinX, mapMaxX, mapMinY, mapMaxY; private Vector3 dragOrigin; private void Awake() { mapMinX = mapRenderer.transform.position.x - mapRenderer.bounds.size.x / 2f; mapMaxX = mapRenderer.transform.position.x + mapRenderer.bounds.size.x / 2f; mapMinY = mapRenderer.transform.position.y - mapRenderer.bounds.size.y / 2f; mapMaxY = mapRenderer.transform.position.y + mapRenderer.bounds.size.y / 2f; } // Start is called before the first frame update void Start() { } // Update is called once per frame void Update() { PanCamera(); } //przesuwanie pozycji kamery (lewo, prawo, góra, dół) private void PanCamera() { if (Input.GetMouseButtonDown(0)) dragOrigin = cam.ScreenToWorldPoint(Input.mousePosition); if (Input.GetMouseButton(0)) { Vector3 difference = dragOrigin - cam.ScreenToWorldPoint(Input.mousePosition); print("origin " + dragOrigin + " newPosition " + cam.ScreenToWorldPoint(Input.mousePosition) + " =difference" + difference); //cam.transform.position += difference; //bez ograniczenia obszaru cam.transform.position = ClampCamera(cam.transform.position + difference); //ograniczenie obszaru } /* if (Input.GetMouseButtonDown(0)) dragOrigin = cam.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, cam.transform.position.z * -1)); if (Input.GetMouseButton(0)) { Vector3 difference = dragOrigin - cam.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, cam.transform.position.z * -1)); Debug.Log("origin " + dragOrigin + " newPosition " + cam.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, cam.transform.position.z * -1)) + " =difference " + difference); cam.transform.position += new Vector3(difference.x, difference.y, 0f); } */ } public void ZoomIn() { float newSize = cam.orthographicSize - zoomStep; cam.orthographicSize = Mathf.Clamp(newSize, minCamSize, maxCamSize); cam.transform.position = ClampCamera(cam.transform.position); //ograniczenie obszaru } public void ZoomOut() { float newSize = cam.orthographicSize + zoomStep; cam.orthographicSize = Mathf.Clamp(newSize, minCamSize, maxCamSize); cam.transform.position = ClampCamera(cam.transform.position); //ograniczenie obszaru } private Vector3 ClampCamera(Vector3 targetPosition) { float camHeight = cam.orthographicSize; float camWidth = cam.orthographicSize * cam.aspect; float minX = mapMinX + camWidth; float maxX = mapMaxX - camWidth; float minY = mapMinY + camHeight; float maxY = mapMaxY - camHeight; float newX = Mathf.Clamp(targetPosition.x, minX, maxX); float newY = Mathf.Clamp(targetPosition.y, minY, maxY); return new Vector3(newX, newY, targetPosition.z); } }

[@klajswister]

polska gurom

[@ЕваАвокадо-з3ф]

This is the best video on this topic! I've tried a lot of ways to move around the sprite in this way, and all of them were not very good. But your way was the best! It's also very simple. Thanks!

[@jacobgsm]

Great video. Thanks for all of the details and explanations, as opposed to just instructions on what to do. You made it easy to understand why things are happening, not just what is happening.

[@ShackMan]

Thanks!

[@victorkuzmin3416]

Man, you saved me hours. One of the best and clear explanation.

[@friesneverdies]

anyone who needs a scroll wheel to zoom in and out add this in the update function if (Input.GetAxis("Mouse ScrollWheel") > 0f) // forward { ZoomIn(); } else if (Input.GetAxis("Mouse ScrollWheel") < 0f) // backwards { ZoomOut(); }

[@nuhu784]

Thanks

[@bartmanp.4734]

who would have guessed that I would stumble upon the exact tutorial I need! Thanks!!

[@ShackMan]

Probably the youtube algorithm that already knows what you're gonna need next week ;-)

[@urselhorst9253]

thats exactly what i needed man that was awesome. I used DOTween for the zoom animation which makes it feel a lot smoother

[@aminacrawford9761]

thnx so much man been struggling for about like 4 hours now tysm!!!

[@andrewgray9797]

For anyone who wants to zoom in/out with the mouse wheel and clamp the size of the camera to the width of the map, I think this is right? Maybe Shack Man can let me know. It works for me: void Update() { if (Input.GetAxis("Mouse ScrollWheel") > 0f) { ZoomIn(); } if (Input.GetAxis("Mouse ScrollWheel") < 0f) { ZoomOut(); } } private void ZoomIn() { float newSize = cam.orthographicSize - zoomStep; cam.orthographicSize = Mathf.Clamp(newSize, minCamSize, Mathf.Min(maxCamSize, (mapRenderer.bounds.size.x / 2f) / cam.aspect)); cam.transform.position = ClampCamera(cam.transform.position); } private void ZoomOut() { float newSize = cam.orthographicSize + zoomStep; cam.orthographicSize = Mathf.Clamp(newSize, minCamSize, Mathf.Min(maxCamSize, (mapRenderer.bounds.size.x / 2f) / cam.aspect)); cam.transform.position = ClampCamera(cam.transform.position); }

[@ShadowTitan100]

Thank you!

[@FuryTheFurious]

tysm

[@0_0hyunni]

WoW~! Thank you so much! This helped me a lot to start a new project!

[@munchkis]

best tutorial on this, thank you

[@Fresch1990]

Just came by to leave a like. Thank you Sir! Everything i needed in a straight to the point video.

[@technoo4891]

Amazing and useful tutorial brother, thank you for the great content.

[@DanutJMK]

Different engines, same logic. Thanks!

[@WishMakerDX]

Awesome tutorial, needed something to make sure the camera's corners didn't go outside the boundaries regardless of zoom size and this did the trick! :D

[@MxxMkk]

You are the best, thx. Still actual and helpful

[@sergejlopatkin3149]

Thank you man, was searching for ever to find something like this video. Helped a lot!

[@YayapipiStudio]

Another idea for the zoom-out clamp: - Add the code below at the end of zoom out function: _cam.transform.position = ClampCamera(_camera.transform.position);

[@Rexcode]

These tutorials are useful and simple, Thanks for this!

[@lostdragon_1]

These are good tutorials. I like the tilemap ones too.

[@indiandev1588]

sir u have any idea of canvas move with mouse sir pls reply

[@jayanth2209]

Great tutorial. Helped me save a lot of time. Thanks a lot!!

[@renata_navarro]

It Works like a charm, but I don´t have an image to do it, so I used 2 Vector2 to adjust the borders. TY

[@AleySoundz]

Can you please explain the last part. How to not zoom beyond the map?!

[@dudelios3123]

Thanks a lot for this. It's a big help. Keep up the good work.

[@ShackMan]

Thanks!

[@irgendein2.account432]

That was exactly what i searched for, thank you very much

[@valeriag.3324]

Thank you very much for the tutorial !!! Helped me a lot

[@lordheman]

THANK YOU! My breakthrough (learned from you) came when using a sprite, to set the borders of the camera movement!

[@shiyaromischannel9542]

A huge thanks for this awesome help!

[@mrussoart]

Thanks a lot!

[@shung0209]

Awesome video, it really helped me a lot!

[@Ghost-2079]

really useful tutorial, thanks a lot friend

[@1nexts]

Thank you very much. Great tutorial + save a lot of time.

[@mihailmalikov7538]

Great tutorial! Thanks!

[@WanP1su]

Thanks a lot! This is better way to create bounds then use Cinemachine

[@palanolho82]

Hi, How would you adjust the clamp if using a perspective camera instead of orthogonal ? many thanks in advance.

[@vanshtandon1829]

Awesome 👍

[@thePRODYLAN]

How would you make the pan go farther than the mouse, like when dragging it will move past the mouse position?

[@dmytrokorsunskyi]

Thank you, helped me alot!

[@podrix]

Hi, love the video. Just a question, how would you go about clamping the position of the camera if you are using a UI RawImage instead of a SpriteRenderer?

[@cake8242]

Can you make a tutorial for this with the new imput system?

[@kyokaishiro7944]

Camera coded in 10 minutes thanks you

[@anima9266]

Thank you for this video but i got a problem ut sometimes turn blue or the sprite turn invisible sometimes im still looking for solutions 😢

[@GamingTherapy8890]

can you please explain how origin point and newPosition become same after some time. despite position on screen is different than origin position

[@lennardfischomode1940]

I tried to use the first part of the code with just the camera movement but it didnt work for me. I got the console output but my camera didnt move. anyone got an idea?

[@GenJeFT]

Same problem.

[@chrissmalls4462]

Make sure your camera is on orthographic projection

[@tommedenney]

im having the same issue. my camera is set up correctly in orth view and code is correct as well

[@well5832]

all works perfectly

[@guest7play614]

man you are amazing

[@stiluboy]

Why I cannot see "ScreenToWorldPoint" in my Unity ? do I need to add it somehow ?

[@bioman1hazard607]

can you link the script file, its very cumbersome to rewrite the whole thing if i make a mistake. also my camera keeps jittering when i move it in game, whats going on?

[@Jarzykk]

Have you solved this problam? I have the same.

[@bioman1hazard607]

@@Jarzykk sadly not yet, I think I have an idea, tho it's not concrete as i dont have a copy of the code directly to compare properly

[@bioman1hazard607]

It may have something to do with swapping x and z, plus this is completely useless if you use the new input

[@Jarzykk]

@@bioman1hazard607 Thank you for the answer, Artemis!

[@spikeweb5193]

I want build big soace level. How canni do borders when ship cant move?

[@anellaa5070]

hi, im only need pan and boundary but somehow I can't get the boundary working any idea why?

[@anellaa5070]

also i only want to pan on the x axis and the y axis just staying still

[@andreyrosiaev8613]

Hi thanks for the video, do you have any ideas how I could add an offset camera to the limit for the UI panel?

[@davidmartin3772]

just for anyone who wants zoom when you scroll with the mouse: void zoom() { if (Input.GetAxis("Mouse ScrollWheel") > 0f) { float newSize = mainCamera.orthographicSize - zoomStep; mainCamera.orthographicSize = Mathf.Clamp(newSize, minCameraSize, maxCameraSize); } else if (Input.GetAxis("Mouse ScrollWheel") < 0f) { float newSize = mainCamera.orthographicSize + zoomStep; mainCamera.orthographicSize = Mathf.Clamp(newSize, minCameraSize, maxCameraSize); } mainCamera.transform.position = clampCamera(mainCamera.transform.position); }

[@thanhduyphan2234]

thank you so much

[@DavidAdochiti]

ty very very much

[@Ffiree]

Works in mobile devices?

[@bilgipaylasmplatformu8454]

i want to use tilemap instead of sprite renderer, how can i do it?

[@sanketvaria9734]

will this work for 3D camera as well?

[@ShackMan]

no, sorry.

[@ShakerFS]

You are amazing

[@tyberius1313]

Doing all that and then not explaining the last part really ruins what was a really a good video.

[@indiandev1588]

warning CS0649: Field `CameraZoomAnd2dMap.maxCamSize' is never assigned to, and will always have its default value `0' sir pls reply i have get this error

[@indiandev1588]

Sir pls reply

[@darknside]

How to convert to the zoom wheel?

[@lilbocheap139]

How are minCamSize and maxCamSize set? Since they're private it won't show in the inspector, right?

[@ormar4564]

you can with the SerializeField, they appear in the Inspector

[@kaiserium]

On a mobile device the camera jitters around when detecting multiple touches or if I tap around on the screen. Is there a simple solution to this issue? Thank you

[@nustalljic8913]

Yooo I have the same problem. I've tried multiple tutoriakls here on youtube and they all have the same problem. The camera bounces around on mobile when you tap the screen making it unusuable. Game Dev Shack HELP USSSS!!!

[@ShackMan]

I'll take a look at it tomorrow, I hadn't tried it on an actual mobile device yet. What exactly do you mean with multiple touches? like you put down two fingers as if you were going for a pinch and then the camera jumps between those 2 fingers?

[@kaiserium]

@@ShackMan if you tap the screen repeatedly on either side the camera jitters dramatically and is unstable. Tap the left side of the screen and the right side of the screen quickly simultaneously for instance and you'll see the camera jitter. Thank you for getting back to me. If you can help solve this issue I would very much appreciate it

[@ShackMan]

I've tried it out and it works fine for me... What you describe could be that the camera is bigger than the limits? In my example I'm using free aspect ratio, so depending on your phone the camera might be larger (either horizontal or vertical or both) than the sprite it is limited to. You could try to remove the limit or set the camera to be really small, then build the apk and try again. Let me know if it works!

[@mauriciograsso8102]

¡gracias!

[@alperakin2561]

Do anyone know how Can I do this with cinemachine camera

[@softwarecprogrammieren]

does it work in 3D? Your example is a plane (map)

[@ShackMan]

The principal is the same, you check how much the mouse has moved and apply that to the camera, but you would have to adjust some stuff. For one 3D cameras are a lot more diverse than 2D cameras.

[@disobedientdolphin]

You really know you can trust someone if he uses 5 exclamation marks and two "1"s to make a point.

[@hardcodednoob4645]

i tried the code, but why my camera is not moving? any help

[@TheTrolderia]

It didn't work for me either. CHeck your code, it worked after i found out i missed private and big letter U in private void Update ;)

[@fodk7021]

@@TheTrolderia it doesn't work tho and it can't work ScreenToWorldPoint takes a Vector3 not a Vector2

[@foxzyx]

Problem you can’t press buttons when having this script active

[@plusplusgames]

did you figure out a fix

[@lora6938]

Please tell me how to make it smoothness? That there would be smoothness in the movement of the camera, that it would look alive

[@SlitDiver]

by probably creating a vector of the direction youre moving it and moving it with a delay using time.DeltaTime

[@fodk7021]

Vector3.Lerp

[@DevCoreFelix]

@@fodk7021 Where do you put it?

[@ahmed74kkk]

i need to make the zoom with mouse wheel how ??

[@thomasbjrnkrogh-jacobsen6391]

if (Input.GetAxis("Mouse ScrollWheel") > 0f) { ZoomIn(); } else if (Input.GetAxis("Mouse ScrollWheel") < 0f) { ZoomOut(); }

[@AAAlexGames]

You are god

[@Pretty_Ghost10]

camera cant move :(

[@Pretty_Ghost10]

oh i change ortohgraphic camera fixed.

[@quartal9588]

@@Pretty_Ghost10 have you used the latest version of unity?

[@quartal9588]

nevermind, it started to work somehow

[@cinemamovies1916]

didnt work

[@lora6938]

Eh😞 that would be like this for android (touchscreen)

[@atomiz2002]

red

[@niqita_draws]

Thank you!!!