Pinch to Zoom Detection with the Input System - Unity Tutorial

today i'm going to be showing you how to do pinch detection with the new input system for mobile devices so right here you can see that when we pinch in the square will start to move towards the screen because we're zooming in and when we pinch out you'll see that the square is zooming out so the camera is moving away from the square meaning we're zooming out of the scene so let's get started so the first thing that you want to make sure to do is have it installed the input system so go to window package manager and under unity registry search input system and make sure you have this installed right here it'll say install and just click yes when the pop-up comes up and once you have that installed i'm going to make a new scripts folder here and in this folder i'm going to right click and create a new input action and i'm just going to call this touch controls all right and then for our input asset we want an action map so let's just call this touch and this is just a set of controls our actions are our controls for our actions or our controls we want several things so the main way we'll be doing pinch detection is by tracking the position of the two fingers and as they get nearer to each other that means we're pinching in but as they get further away from each other that means we're pinching out and we're going to be keeping track of the distance so if the distance is getting larger that means our fingers are moving away from each other and if it's getting shorter the distance that means our fingers are moving towards each other so we can start with that so first we want the primary finger position so this is the first finger that touches the screen the position of that one and then we want the secondary finger position and finally we want an action to tell us when that second finger has touched the screen because when it has touches screen that means we can start our detection algorithm to see if our fingers are getting closer or further apart and we only need to keep track of the second finger because once we press down with the second finger we can assume that of course the first finger has already been pressed down so secondary touch contact we can call it for that one we can just select the action type for button because it'll be kind of like a button and you can add an interaction if you'd like press is a good interaction so we're pressing on the screen and you can do it either press only release only and press and release so i'm just going to do it on press down and then for the binding we can go to path and then we can go to touch screen and then we can go to our second contact which is touch number one because the index starts from zero so this is the primary finger and this is going to be the second finger that touches the screen let's just select touch contact which will return a boolean if something has touched the screen if it's in contact with the screen for our primary finger position we can change the action type to either pass-through or value i usually always pick pass-through but i've seen some people having difficulty with pass-through and once they select value they found that it worked for them and one big difference i saw in the documentation is that pass-through action will not use the started or cancelled callbacks except when you've binded an interaction to them so maybe that was the issue that people were experiencing and if you want to read more about it i'll link this documentation down in the description so i'm just going to go with value in this case but yeah if you'd like to learn more about this i have several other videos on the input system that i'll link the whole playlist in the description for the control type let's go with vector 2 because our position is an x and a y value and then for the binding we can go to touch screen and we can go to touch number 0 and click position for the secondary finger it's the same process value vector 2. open it up under no binding go to touch number one and press position now we can save our asset all right so now that we have our input action let's generate a c-sharp class and click apply next let's create a new c-sharp script and let's call this pinch detection and so if we open that up you'll see that we have our empty file here and touch controls is just our list of controls that we made so i'm just going to erase this and i'm going to erase this generic using statement and so we want to make a new instance of touch controls so that we can read the values that we just made so we can say private touch controls let me just zoom in here and i can just call this controls let's have an awake function where we instantiate it controls equals new touch controls then we have to enable our input on enable controls.enable then we have to disable our input controls.disable this is called when the script is enabled and this is called when the script is disabled and then we can have our start function here and so for our start function we want to track when we've pressed down with the second finger and we also want to track when we've stopped pressing down on that second finger so we can say controls dot touch dot secondary touch contact that started so once we've started our action and i'm just going to use the syntax here which is subscribing to an event but also not wanting to get the parameter that the event is passing in that's what the underscore is for so we don't really have to pass in anything to our function we just want to know whether it's started or not and we can just call pinch start and maybe pinching isn't the best name because that implies that your fingers are moving towards each other so maybe zooming might have been a better name so i'm just going to say zoom start here and i'm just going to copy that and instead of started i'll put cancelled which is when our finger lifts and it's going to be zoom end i'm going to make those functions private void zoom start and then private void zoom end so when we start to zoom we want to keep track on every frame what our fingers are doing and so i think the best way of doing that is occur routine so we don't have to populate our update function with a bunch of stuff so let's make a carotene right here i.e numerable and then we can say zoom detection and so a curtain this is a curtain basically stops execution of the function depending on your conditions that you put in it but it's also a great way to keep your update function uncluttered by doing a while loop inside of it so we're going to start this curtin and let's keep track of that curing so private keratin zoom curve routine and then when we start our zoom we can say start curating we can call our function zoom detection and we can equal that to our zoom current in here and misspelled it and then on the zoom end we can just say stop curitine and pass in our curritin that we previously stored ah and here it's giving us an error and that's because i actually misspelled this it's ie numerator no i innumerable so make sure you spell that correctly and then here we can actually start our algorithm so we're going to want to keep track of the previous position of our fingers and compare them to the current position so we want to compare the previous distance to our current distance so we can just keep track of it with a float previous distance equals zero and here we can also just declare our current distance and now we'll want to do a while loop so while true so this will just keep on going forever until of course we lift our finger and that will stop the curing here so now let's set the distance so distance equals vector2.distance and we want to pass in our current finger which is controls dot touch dot primary finger position and let's pass in controls dot touch dot secondary finger position let me just organize this a little better and for the primary position we actually have to read our value so read value vector 2 or else we can't get the value and same with this one read value vector 2. all right and then down here i'm just going to set the previous distance equal to the current distance but that'll be after we do all of our processing here so here's the detection all right so now we can check if the distance is greater than the previous distance that means we are zooming out else if our distance is less than the previous distance then we are zooming in and if you're asking why i just didn't do an else because if we're not currently moving our fingers then that means it's stopped so we're not either zooming in or zooming out if we did an else statement it would also include the fingers being stopped which i didn't want i want to make sure that the distance between them is increasing and so this is a pretty simple way of detection if you wanted to take it one step further you can figure out if they are going in the same direction so if your fingers are traveling towards each other or away from each other via the dot product which returns one if they are traveling the same direction and returns negative one if they're traveling in opposite directions and you can use that in combination with this to further your accuracy of the detection however i think this is really all that you need but if you do want a hint on how to do that then you need a vector three dot product or a vector two dot product between the deltas of your fingers so your deltas are the change in position basically the direction they're moving in so if they're moving in an opposite way from each other that means that we're either zooming in or zooming out and so it should be negative one if you are moving in opposite directions but we want to have a slight threshold so we can do if it's less than 0.9 that means that it's a pretty good chance that we are zooming in or out all right so now we have this code set up so let's actually zoom in and out or pinch in and out and for that we need a reference to our camera which i'll just actually get a reference to the transform of the camera camera transform since that's what we'll be changing i mean say camera transform equals camera.main dot transform and make sure that your camera is tagged as main for this to work and so we want to keep a reference so we don't have to keep doing camera dot main all right and now one other thing that we need is our speed so private float speed we just said that's a four so this is the speed at which the camera moves i'm going to put a serialized field so we can change it in the inspector so i can use camera speed here all right so here we're zooming out so we can do a camera transform dot position so we're setting the new position equals vector 3 dot slurp and we're doing vector 3 because the position is a vector 3. we take in the current position so we're going from the current position to a new position which i think we can just declare it here vector 2 target position and we can equal it to the current position because we want to start from the current position and move all right since we are zooming out and this is going to have to be a vector 3 since it's going to get converted to a vector 3 anyways if we go into our scene you see that the blue arrow of the camera is the way it's pointing right now so if we move inward towards that blue arrow you'll see that the z axis gets higher so to zoom out we move the blue arrow backwards and that means that the number gets lower meaning that we'll have to subtract the z-axis so targetposition.z we can do minus equals one so we're just going backwards and then we can just pass in our target position here and for the slurp we can add in the speed but first we need the time dot delta time and then we can do times camera speed and so this is very similar to the other one i can just copy it for the zoom in but instead of minus equals one we do plus equals one all right and then we must not forget for a curtain on each frame of the curing we have to make sure if we're in a while loop like this we have to make sure to do yield return null so that it waits until the next frame to continue this execution because if not it'll just execute this a bunch of times and it'll go crazy so make sure you have the yield return null down here and so before we actually build it to our phone let's actually right click and create a cube here and let's make sure that our camera is in view for this cube so i'm just gonna put it where the cube is kind of centered here so this is how we'll just find out if we're actually zooming in or not so the cube will get bigger if it zooms in if you are using orthographic which is 2d mode so if you're in 2d mode you can do camera.main of course storing the camera main orthographic size which is the size of the camera so a bigger value means that you are more zoomed out while a smaller value means that you are more zoomed in so for zooming in you can just do minus minus of course you'd want to slurp to this value and the same for the other one instead of minus minus you want to increase that orthographic size value but i'm just going to set mine to perspective so i can just show you all that it works and last but not least just add in empty game objects call it pinch detection and add in the script we just made all right and then unfortunately since we're using two fingers we can't really test this in the editor since testing is more for one finger and you can use your mouse to simulate the finger so we'll have to build it to the phone unity does have a render streaming package that you can stream to your phone however i have not tried that out yet but i will be trying it out and making sure to update y'all if this is a viable way to use the new input system for testing because unity remote does not work all right so go to file build settings and if you haven't watched my previous video on touch then make sure to do so because i show you a more general overview of the new input system with touch and also how to build to your phone and how to set it up so i have my scene added here i'm going to switch to android alright and now here under run device you should see your device make sure you have it on and connected to the computer alright so now if i refresh my device is here and to avoid setting up a key we can actually just click development build here we can select build and run i'm going to right click and create a new builds folder and save it here i'm gonna call it zoom detection press enter to save it and it will now build it to your phone all right so you see when we build the game and now if i put one finger on the screen nothing happens however if i put two and i start moving then if i move my fingers closer to each other it zooms in and if i move them further apart it starts to zoom out i found that the speed might be a little slow so if you'd like you can increase the speed you can also put a threshold if you'd like so if the current distance minus the previous distance is greater than a certain value or threshold then you can move so this might combat sometimes the small finger jitters that one might have when moving on a screen but yeah that's the basics of the video i hope you enjoyed thank you so much for watching i'd like to thank all my patrons and subscribers thank you so much for your support it really means a lot to me and my previous video which was a q a and face reveal was awesome and i got a lot of nice comments so thank you and so of course i want to thank my patrons so much because their support means a lot to me and they really helped me continue making these quality videos so with that i'd like to thank my new patrons in the supporters tier [Music] and in the enthusiastic tier i'd like to thank beardie and ekrtgl thank you so much for your support i really appreciate it and if you're interested the link is in the description i offer source code early access to my videos and an exclusive discord channel and i'll also be starting to work on a game so i'll post more progress on my game for the dedicated tier as well and if you haven't already make sure to join our discord channel where you can ask questions post memes or just chat so thank you so much for watching i hope you enjoyed and i'll see you next time you

Channel: samyam

Views: 6,802

Keywords: unity3d, unity, tutorial, unity beginner tutorials, pinch detection, how to detect pinch in unity, pinch to zoom, unity pinch to zoom tutorial, new input system touch, new input system pinch, unity detect pinch, unity detect pinch mobile, unity detect pinch input system, unity touch screen zoom, unity touch zoom script, unity pinch to zoom camera, input system zoom, input system touch detection, touch screen pinch, unity touch controls, unity new input system touch controls

Id: 5LEVj3PLufE

Length: 15min 57sec (957 seconds)

Published: Sat Jan 23 2021

Reddit Comments

[u/BruceBallad]

This is great. If I can finally start using the new input system in my projects, it will be thanks to you.