Pinch to Zoom and Panning on Mobile in Unity

[@fluorescente]

oh I wasted time in other tutorials and this one is the simplest and only working one! thanks!

[@jorgecano6927]

Thanks for the nice tutorial! Already subscribed. In case anyone has trouble with the zoom acting weird when you don't release the fingers at the same time, I think I found a solution (based on the solution proposed by 현빈 in the comments below): Add a private bool variable name at the start, like multiTouch = false; In the if (Input.GetMouseButtonDown(0)) set multiTouch = false; In the if (Input.touchCount == 2) set multiTouch = true; In the else if (Input.GetMouseButton(0)) add this condition "&& multiTouch == false". Hopefully that'll help somebody. Thanks again man

[@Sinhalaparanikatha]

that's what I was looking for. thanks, bud. i worked perfectly

[@williambae5753]

thank you so much!

[@sistemasintegrales3658]

I don't know if I didn't hear if (if not sorry) but should state that camera must be set in Orthographic Projection.

[@kurtiskucera6712]

You just saved me from pulling out my hair!! Thank you so much.

[@magicquest5221]

i wonder why it doesn't work with perspective

[@rogertorres6088]

@@magicquest5221 it's the . Use instead. In addition, you will have to grab the "cameraStart" at the same time you grab "touchStart" and then, instead of you will have to do something like . The 20f is because there's something I'm missing regarding these space conversions, but you sure can figure if you wanna invest the time

[@aadityakiran_s]

Also the Canvas has to be set to World Space

[@yuvgro]

Was looking all over for a good touch gesture tutorial, Thanks man, keep up with the good quality. Subscribed!.

[@spartanh1438]

best video on this topic ive found so far

[@erkambilalbal7170]

THANK YOU A LOT! THIS ONE HELPED ME IN MY PERSONA PROJECT(IB) A LOT. THANK THANKS A LOT. YOU ARE A PERFECT PERSON.

[@N1ghtR1der666]

You sir are a gentleman and a scholar, I have been trying to work this out for a while and there are not many tutorials on this exact functionality

[@festival_91]

Great video to get things started!! watching this video after more than two years.

[@lordheman]

Thanks man! I've been tinkering with this all day, and your code just works flawless!

[@numerikachamba5976]

That's awesome big man, keep the fire burning🔥🔥🔥🔥🔥

[@thuvienanime5441]

start I zoom Camera with touchCount =2 , then I lift 1 hand. At this time the camera is not standing, it is moved by one hand I still touch. how can i fix it? thank you !

[@kapkoder4009]

Dude your TUTORIALS are LITERALLY amazing! Great quality and content! Thanks for the lecture...

[@santiagoaguirre6928]

how can you restrict the panning for the camera?

[@fluorescente]

I'm trying to find a script to fill the screen with objects, like the one you mention at the beginning, any ideas?

[@Dacommenta]

at 6:40 your voice temporarily went from Nerd to Jock 🤣😂 thanks for the video!

[@hegworks]

Wooooooow Really appreciate this It is very clear and straightforward. THANKS!

[@cubedev4838]

You should make tutorial series bro!! Clear explaination

[@nbgamesllc]

I realize this is an old video but how would I update this to work with a canvas background instead of just a sprite?

[@emman6602]

Great Tutorial! :D May I ask if how will I setup a boundaries for the cameras?

[@INeatFreak]

What an awesome tutorial!! it's much better then Brackeys RTS Camera video.

[@chakravarthye]

Awesome tut Waldo. Beautifully explained :)

[@zekrollahnaserie545]

Can you show me how to do this in 3d?

[@Kidopya]

Hello, how can i restrict camera movement and set limits to it? To make camera stay in reasonable positions... with pinch zoom

[@fodk7021]

Use Mathf.Clamp(Camera.main.transform.position.x, MinX, MaxX); You can do this with other coordinates.

[@samuelrussell5259]

Still working in March 2021. Great tutorial!

[@blameyourm8519]

Can you please explain how does direction variable work?! I don't understand!

[@thanhtrucngo4623]

thank you waldo, very cool and insightful tutorial! i'm glad i found you ;)

[@rimia1650]

hi, many thanks for your tutorial. I used your code, everything is fine but Rotate var doesn't work. can you explain Rotate Boolean variable work?

[@XtremClanchannel]

As soon as I put two fingers on the screen, the camera jumps constantly from max to min zoom value and back. Im doing it with a perspective camera but i already testet it with orthographic too. Same problem. Can anyone help?

[@samivtg]

XtremClanchannel same problem :(

[@nirportal7208]

yes, same here

[@I-find-John-Titor]

Thanks you! Have a nice day!

[@-jkr0570]

Dude! This tutorial is a high quality vid. More please!

[@ridnur8982]

Can it work for AR in Unity? I want to create a zoom in/out touch gesture to it.

[@radneypalacios1380]

Can it be possible to set the position of the camera to an object in the start of the scene? and not just on the center of the plane?

[@AsToldByWaldo]

Radney Palacios yes. In your start function just set the cameras transform.position equal to the objects transform.position.

[@radneypalacios1380]

@@AsToldByWaldo thanks bro, it helped me a lot. Is there any way where I can set the starting zoom of the camera to the target object? and I got this problem because the camera does not center to the target object.

[@AsToldByWaldo]

Radney Palacios check out this video I made on my other channel. It’ll help you calculate the perfect zoom. kzbin.info/www/bejne/aam7naGJmtl7hq8

[@radneypalacios1380]

@@AsToldByWaldo Thanks a lot bro.

[@SellusionStar]

Appreciate this quality content. Very well done! :)

[@simonk5361]

Hallo @As Told by Waldo i tried many things but it still do not work in my scene. The Canvas is on World Space and the EventCamera is the Main Camera. Inside the Canvas i hava a image that i can see if i pan or zoom. But nothing happens. What shuold i do?

[@AsToldByWaldo]

PhönixOnTV check out this video: kzbin.info/www/bejne/apCrhp93e9Grrbc

[@simonk5361]

Thanks love your Tutorials

[@anonymoussloth6687]

Also, will this work if i used this script in 3d but kept camera in ortho? with a random rotation also?

[@zexzill]

Great video ! Nice and clear explanation :) thanks, big respect from indonesia.

[@hazemtv630]

didnt work for me it said Object reference not set to an instance of an object and it and this are repeated maybe 60 times help

[@Croccolucho]

how can i do this but with 2 fingers on the screen?

[@prathamesh_dalvi]

Can u tell how to write code to distribute the icon ..As u wrote

[@AsToldByWaldo]

Create a parent object to hold all the icons and attach a script with this code to it. public float maxPerCol; public float padding; // Use this for initialization void Start () { float row = 0; float col = 0; foreach (Transform child in transform){ Vector2 childPos = child.transform.position; childPos.x = row * padding; childPos.y = col * padding; child.transform.position = childPos; if(col >= maxPerCol){ row += 1; col = 0; }else{ col += 1; } } }

[@prathamesh_dalvi]

@@AsToldByWaldo Thanks very very much...

[@vigneshsree3115]

how to perform animation by pinch to zoom in unity for ex a car having tyre, alloy, break etc.when i zoom it will get animated by coming out of the tyre when i zoom out it will get move to the previous position

[@tutorialslibrary5422]

Sir How Can we restrict pan movement like we Only want panning On image One check is when we zoom in then panning enable as well and other I want to restrict pan movement so camera don't go away from image

[@Ibrahimhaxhiu]

How to put borders so the camera can't go any further

[@jeremybayot8889]

Hi. Is it possible to put a limit according to the size of the scene? Great tutorial by the way! This worked very well on my Android application.

[@AsToldByWaldo]

Yeah you could setup boundaries on your object and limit movement based on that. This other video I made might help you in the right direction. kzbin.info/www/bejne/l5rPk6awpdmSd6s

[@jeremybayot8889]

Thanks!

[@williamwoods8977]

Can you do a tutorial on mobile touch or does this work with that too. thanks.

[@arthurshulman]

We found Waldo, and gosh darn good one.

[@mesutyavuzx]

not working... i did drop to maincamera but not working

[@emiljonsson3600]

I just copy-pasted the script but when i run it in game mode it says: NullReferenceException: Object reference not set to an instance of an object PanZoom.zoom (System.Single increment) (at Assets/Scripts/PanZoom.cs:43) PanZoom.Update () (at Assets/Scripts/PanZoom.cs:38) new to this so i don't have a clue what im doing wrong

[@abhijitroy3180]

*Great tutorial!* Please help! How to make panning only in zoom in mode. And stop the panning in full screen mode.

[@prathamesh_dalvi]

Do u imported 380 icon one by one(By Dragging)..Or U have Any method to do it ?

[@符贝磊]

Hello dude, I want to know how to limit the camera view just in the icon area...

[@unexpert]

How do I increase the rate of zoom? I have a very large image. Thank you

[@AsToldByWaldo]

You can multiply the increment in your zoom function by a multiplier: void zoom(float increment){ float multiplier = 1.25f; Camera.main.orthographicSize = Mathf.Clamp(Camera.main.orthographicSize - increment * multiplier, zoomOutMin, zoomOutMax); } Keep increasing the value of multiplier until it zooms at the speed you like.

[@unexpert]

@@AsToldByWaldo Thank you! Works great~

[@laloutayao03]

How about if i want to pan only on Y-axis? Like up and down only? For selecting floors...

[@edgunther8136]

Instead of setting the camera transform equal to direction, set the camera position.y to direction.y You May have to make a new vector 3

[@techd]

@@edgunther8136 Can anyone expand on how to lock it to only one axis.

[@bensamasoni8243]

​@@techd I did this by using this tutorial kzbin.info/www/bejne/apCrhp93e9Grrbc and changing my camera to be perspective instead of orthographic. After that there's only a couple changes you need to make. The code should look like this: using System.Collections; using System.Collections.Generic; using UnityEngine; public class SwipeDetector : MonoBehaviour { private Vector3 touchStart; public Camera cam; public float groundZ = 0; //public float minHeightX, maxHeightX, minHeightY, maxHeightY; // Update is called once per frame void LateUpdate () { if (Input.GetMouseButtonDown(0)){ touchStart = GetWorldPosition(groundZ); } if (Input.GetMouseButton(0)){ Vector3 direction = touchStart - GetWorldPosition(groundZ); direction.x = 0; direction.z = 0; cam.transform.position += direction; } } private Vector3 GetWorldPosition(float z){ Ray mousePos = cam.ScreenPointToRay(Input.mousePosition); Plane ground = new Plane(Vector3.forward, new Vector3(0,0,z)); float distance; ground.Raycast(mousePos, out distance); return mousePos.GetPoint(distance); } }

[@darryldoe4991]

Good tutorial! It works for me when Im using a sprite as my background. But it doesnt work if I use my canvass using the ui scale mode - scale with screen size where my ui elements are

[@jericobaladhay1988]

How do you solve if I am using Scale Mode - Scale with Screen Size?

[@danilob5304]

How do you clamp this?

[@ivavoy2800]

Thanks man. I have a problem though... The zoom in/out is super slow for me. How can add speed to that function?

[@AsToldByWaldo]

iva voy just multiply the increment (replace SPEEDVALUE below with a float value): void zoom(float increment){ Camera.main.orthographicSize = Mathf.Clamp(Camera.main.orthographicSize - (increment * SPEEDVALUE), zoomOutMin, zoomOutMax); }

[@ivavoy2800]

It didn't work. I put exaclty that and my testing values were 10 - 100 - 1000 with no response....?

[@AsToldByWaldo]

iva voy don’t put exactly that. Replace SPEEDVALUE with a float number. Like 1.5f

[@ivavoy2800]

I was missing the "f". Thought float values were simple numbers inside a float variable. Thanks man it works great!!

[@AsToldByWaldo]

iva voy Glad I could help.

[@renskloosterman4045]

Hey Waldo, great tutorial! But i've ran into a problem. When you try it on mobile, and you start zooming but don't release your fingers at the exact same time, the program will think you started panning and the camera will jump. Do you by any chance have a solution for this?

[@걐-n7n]

hello i'm korean novice Developer. i think for that problem and i solve that. That's Add int touchC2 = 0; if(Input.touchCount >= 2) {isMulti touch = 1; } if (isMultitouch == 1 && (Input.touchCount == 1|| Input.touchCount == 0)) { direction = Vector2.zero; touchStart = Camera.main.ScreenToWorldPoint(Input.mousePosition); isMultitouch = 0; } else if (Input.GetMouseButton(0) && isMultitouch == 0)

[@MsMaddeW]

@@걐-n7n I have the same problem, where in the script do you add "int touchC2 = 0;" ? Thanks!

[@anonymoussloth6687]

How to pan using touch? u covered zooming but how to pan?

[@paulpachikara6597]

Hey for some reason, everything in this tutorial did work for me. Like non of the panning nor zooming functions worked at all. Does anyone know why?

[@nikunjsethi9351]

Change the camera view from Perspective to Orthographic

[@маркшкриба]

help please!) I am trying to add your script to the main camera but it not allows me to do it and shows me this message:Can't add script behaviour VisualContainerAsset. The script needs to derive from MonoBehaviour!

[@AsToldByWaldo]

Make sure you copy and paste the entire script. You need to have monobehaviour at the top: using System.Collections; using System.Collections.Generic; using UnityEngine; public class PanZoom : MonoBehaviour { copy and paste it here: www.astoldbywaldo.com/tutorials/2018/07/12/44/pan--zoom.html

[@AffanKhan-lv3ok]

Sorry a little late, but if anyone else has this problem, make sure that the name of the actual script matches the name of the public class: For example, "public class ***PanZoom*** : MonoBehaviour" Change that bit to the name of the script

[@ghazihumamfauzan3310]

the script error.. a note appears "the script needs to derive from monobehaviour", what happened?

[@_inpeymus3603]

doesn't have the limit for maximum viewable displayed image in the scene

[@saumyasaurav159]

Can you do a Tutorial Video on *How to Make Character Inventory System & Unlockable character, like the one in Color Switch*

[@AsToldByWaldo]

I'll see what I can do :)

[@gamerplanet5252]

great explanation. Thanks Waldo

[@comboyx1977]

Loved how to the point you explained. I will take back my like if it doesn't work when I get back home :) thanks

[@MaverixGamesStudio]

ty man, save my life!

[@biseshshakya4006]

NullReferenceException: Object reference not set to an instance of an object CameraController.Update () (at Assets/Scripts/CameraController.cs:56) I get this error

[@AsToldByWaldo]

There is no line 56 on this script. That error usually means you forgot to link an object to a place in the inspector.

[@biseshshakya4006]

Oh i researched about this and found that camera needs to be tagged maincamera but it still doesnt work!

[@AsToldByWaldo]

Bisesh Shakya instead of using camera.main you can create a reference for a camera and then drag your main camera into that reference.

[@MrDr3mer]

wow nice job.. You helped so much...thanks m8.

[@devdop2046]

Short Clear and Powerful!

[@YayapipiStudio]

simple and great !

[@ИванУспенский-ж1х]

Thank you! Works great :)

[@davejones8956]

I am trying to find the most effective way to toggle between pinch to zoom and pan or pinch to zoom and rotate in a 3D game in unity. Would it be possible for you to do a tutorial on this?

[@AsToldByWaldo]

Dave Jones I would always keep one finger set for pan. Two fingers can easily be used for zoom or rotate. To implement the rotate I would just calculate how much the fingers have circled around a focus point. Think about how Google maps does their touch gestures.

[@davejones8956]

Thnanks for your reply. If that's the case I was wondering if you could do a tutorial on how to access Public variables from one scene whilst in another scene?

[@AsToldByWaldo]

It's actually rather easy and I plan to make a whole tutorial about this, but it might be months before it's released. In the meantime, just save the variable to a PlayerPrefs variable: docs.unity3d.com/ScriptReference/PlayerPrefs.html You would basically save the variable using SET like this: PlayerPrefs.SetInt("highestScore", [value]); And retrieve it in the other scene using GET like this: PlayerPrefs.GetInt("highestScore"); Use SET/GET for Int, Float & String: SetString/GetString, etc.

[@coldbyte]

awesome tutorial thanks

[@rickyrinaldy4885]

how to zoom UI image in canvas, icant zoom it

[@AsToldByWaldo]

Select your Canvas and change the Render Mode to World Space.

[@rickyrinaldy4885]

Doesn't work sir, can u make tutorial

[@AsToldByWaldo]

It works. Use the code I provided. Adjust your canvas in the inspector to set Render Mode to "World Space" then adjust the sorting layer and move the canvas so the image is in view. Then you should be able to zoom and pan anything in the canvas including a UI image.

[@_inpeymus3603]

what if i dont want it in a world space?

[@AsToldByWaldo]

Why wouldn't you?

[@AlexandruMarean]

For me, Camera.main not working.."CAmera dose not contain a definition for "main". I tagged my camera as "MainCamera" but still not working..help ?

[@theeeblack0wl]

Just tag it as Main Camera

[@arieljr.atienza6945]

working for me in 3d. , but how may i limit the direction of camera to prevent it to move outside of my plane. THANK YOU ^_^ ♥

[@Roadified]

Limit it, ether with "if else", or Mathf.Clamp(currentValue, minValue, maxValue)

[@nizaralhamid4563]

thanks for the awssome tut buddy

[@amirhamzaozi2205]

thanks very helpful

[@iancabss]

Can this work to 3D? Can You make Pan, Zoom and Rotate for 3D?

[@AsToldByWaldo]

Marc Ian Cabawatan technically yes it’ll work as long as the camera is orthographic. You could use three fingers to rotate.

[@iancabss]

3 fingers did'nt work. Do I have to add some code? I Dont have any knowledge from C#. But it seems good on 3D only it moves from 2D only. Zoom, Pan only.

[@AsToldByWaldo]

Marc Ian Cabawatan yes you have to code the rotation element in it. I was just suggesting that 3 or even four fingers could be used as a gesture for rotation. Where one finger is for panning two is for zooming.

[@ivanlim170]

bro i just copy the code on the first part the pan around the screen but it didnt work NullReferenceException: Object reference not set to an instance of an object PanZoom.Update () (at Assets/PanZoom.cs:19)

[@pressstart6864]

Might be because you don't have a main camera. Create a reference for your camera up top like: public Camera cam; then change the line to this: touchStart = cam.ScreenToWorldPoint(Input.mousePosition); then in Unity, drag your camera into the inspector for the field "cam". Works just the same

[@ivanlim170]

@@pressstart6864 this save me lives because im doing my thesis for an mobile application but my school didn't teach us to code for mobapp even a hello world. thanks i subscribe to this channel

[@ivanlim170]

@@pressstart6864 is there any way to make this work on a perspective projection not on orthographic projection???? if there is can you help mo or something????

[@emiljonsson3600]

I get a similar error message but for a different part of of the script: NullReferenceException: Object reference not set to an instance of an object PanZoom.zoom (System.Single increment) (at Assets/Scripts/PanZoom.cs:44) PanZoom.Update () (at Assets/Scripts/PanZoom.cs:39) Im new to this so i don't have a clue what im doing wrong?? do you have an idea @Press Start ?

[@mandarxsalvi]

thanks helped alot!

[@strangerguy323]

Thank you soooooo much

[@Imperial_Dynamics]

amazing video. Thanks

[@rayankheloufi3621]

Thank you so much !!

[@KappaXBeta]

thanks, right to the point not more not less :)

[@ufukguney1998]

is panning working on phone

[@piotrkot4137]

Great tutorial ! Does anybody knows how to prevent from moving around to the infinity? For example, I have a background and want to prevent moving camera out of its bounds :)

[@abhijitroy3180]

Add camera boundaries to it.

[@ccbelan3156]

How to add a camera boundary?

[@tellosoft]

Awesome Thanks!

[@dhudd3]

perfect used this in my project saved tons of time :)

[@arihantparsoya]

Thank You!

[@Jacky-fb4th]

thanks help lot

[@azmanbarraquias1681]

thanks man

[@luanmonteiro2206]

Okay this works perfect for a 2d game(orthographic camera), but I'm trying to figure out how to do it in a 3d game(perspective camera), I searched the whole internet for a answer, but I didn't find. Could you do a video teaching how to do that.

[@AsToldByWaldo]

Luan Monteiro it doesn’t work for perspective because ScreenToWorldPoint doesn’t work. You’d need to follow this answer here to calculate where the finger is pressing on the screen: answers.unity.com/questions/566519/camerascreentoworldpoint-in-perspective.html Then, technically it should work. Or just get rid of screen to world point and just use Mouse position.

[@AsToldByWaldo]

Then for zoom, change orthographic size to field of view.

[@NoName-kh5id]

Thanks for the awesome tutorial! I only can't figure out how to force the camera to only move on the X axis. could someone help me with that? also, if there is an easy way to limit movement between for example 0 and 1000 on the X axis I would be very glad to know

[@lehuynhquan8642]

You are so cool!

[@Frwager1998]

Make sure you don't use Camera.main in the update function, it's very slow. Set it to a variable in start

[@ВладиславДенис-б9ц]

God i love you.

[@burakakbal5250]

Awesome, but i add something to your code. In your code you have to relase your two fingers same time. // Define isInZoom variable. private bool isInZoom; ------------------------------------------- // Replace this code touchStart = Camera.main.ScreenToWorldPoint(Input.mousePosition); // To this code if (!isInZoom) touchStart = Camera.main.ScreenToWorldPoint(Input.mousePosition); ------------------------------------------- ------------------------------------------- // Add this inside if statement (Input.touchCount == 2) isInZoom = true; ----------------------------------------- ----------------------------------------- // Replace Vector3 direction = touchStart - Camera.main.ScreenToWorldPoint(Input.mousePosition); Camera.main.transform.position += direction; // To if (!isInZoom) { Vector3 direction = touchStart - Camera.main.ScreenToWorldPoint(Input.mousePosition); Camera.main.transform.position += direction; } ---------------------------------------- ---------------------------------------- // At the end of the update code add this line. if (Input.touchCount == 0) isInZoom = false; ----------------------------------------- // Also not Camera.main is an expensive way to find camera. // What i recomend is set Camera.main to a variable in start.

[@wellpdoclube]

You still alive? how I can do to zoom with de scrool of mouse?

[@wellpdoclube]

Sorry, eu não tinha visto o vídeo todo kskdska

[@pascalmoller6097]

I usually don't comment videos but I have to make an exception here as I seriously can't understand how someone could possible be ok with this code. On the plus side the tutorial is very well performed. However, the code is easily written but horrible to understand. When I first used this code I was struggling with line 19 and 20. Vector3 direction = touchStart - Camera.main.ScreenToWorldPoint(Input.mousePosition); From my intial understanding touchStart is taken once on mouse down and you are taking the current position of the mouse on each frame while the mouse button is held down. Hence this would actually result in a direction vector with increasing magnitude. Therefore I was expecting the pan motion to speed up as your are using Camera.main.transform.position += direction; which is clearly accumulating the direction vector. However the motion appears to be constant and not linear increasing which took a while for me to understand whats going on here. So since the actual hit point of ScreenToWorld Point Function is almost not moving at all due to the motion of the camera, line 19 results in a constant distance and therefore your code works. You are actually mixing camera motion with touch motion in a way that makes the code more complicated, technically you are introducing a zero-sum expression, leading to a situation where one has a hard time to actually enhance your code.