Pinch and Scroll to Move and Zoom in Unity for Mobile Games

if you are developing a mobile game you sometimes need to move soom or rotate around and sometimes you need to do this at the same time and this is what we do in this video so it can be quite challenging especially if it's not camera pointing directly top-down but some kind of sideways but I will make it easy and the experience will be as viewing some images or maps on your smartphone I definitely recommend you to download unity remote app you will notice some lags and delays but I promise you as soon as you build your app and have it natively on your phone the complete game with one very smooth though the only thing you need is the script scroll and pitch and an object that you can use to attach it the object is just for defining this normal you can see what here and the position of the plane and this plane is used to really define as a scrolling and the movement of your fingertips you have to attach a camera just grab the main camera and attach it to the camera slot and you can decide if you want to have a rotation feature or not you can find the link to the script down in the description ok let's start with a little bit of theory so here you can see the camera you can see the screen here and you see the landscape there basically what we are doing is we will track the finger for example you tip here on the screen and you have to imagine that this is your smartphone we will cast away and the resume is going for example to is this to be right here and it doesn't have to be an object or something it's just for explanation that here is a point we mark in the next frame we move the finger a little bit down a little bit to the left and there we go this is the next frame and we will cast away again and maybe it will be here and the only thing we have to do is to move the map in this direction here okay here we are in the script I just created a scroll and pin script and added some preprocessor statements that this code is only accessible in unity for iOS or a unity for Android so it doesn't make any sense to try to pitch with your mouse and that's the reason why you should use a remote app of unity because then you can really test it first step very simple we will add the camera just a public camera so that we have a camera slot and if the cameras now we will take the main camera on awake next up the plane the plane is protected we will construct this plane we will use this plane and just for calculations and this plane is this video you need a object that is not really as a mesh it's just object for calculations and we will update the plane so we will set the normal and the position the normal is the position is exactly the normal of the transform so the up Vector and the position of the transform next up we add this method here called plane position and you will insert a screen position this will be a screen position of your finger on the screen in pixels I guess and we create a way so like in physics you can say the camera screen point to way and you pass in the screen positive position and you will get out away back in the editor for example you touch here and he wants us way that is pointing towards the camera direction now we can use the constructed plane and create a ray cast we will insert the Ray and we will get out the distance away traveled this means in our example we will have the plane here with a big plane you CH and then we will cast away and then our application will say okay here you have entered the plane exactly whereas those three for example and the return value is a distance from the start to the collision and to really get this point here or at this point say way now and get the point and you enter as a distance this is just a helper function we will need a second one the other one is plane position Delta you insert a touch the touch is accessible through the input and it's really just a finger and imagine this is a screen you touch anywhere then you have the event touch begin then you move it in the next frame then it's a touch face move and then you are at the destination and then it's a touch face end and we only want to add Delta calculation so this means how far have we moved from A to B if we are in a touch face move otherwise the vectors we vivo will be returned so we do the same thing as before right now and way before are two ways it's the same as here and then we will just way cast here and there and back in unity it would look like this I touched here I moved here two ways pointing to the ground we have these two positions and then we know this is a delta of these positions not in screen size but in the world size to get to Delta we will subtract these two points now let's come to the fun part the update method we will need two variables called Delta 1 and Delta 2 let's implement this goal so scroll applies to the script only if we have one or more fingers touching the screen and then with a input get touch 0 this is the first finger that enters the screen and then we use a function to get the Delta this means if we have a 3 here and to be here and for example move from this tree to this tree then we will get this vector here so and if there was a move in this touch then I can say okay camera transform translate camera not as a map so we will only move the camera by this Delta and make sure to make it in world space because this playing position Delta is in world space this is the first time you can why our script out so as you can see we can move the screen okay let's continue by pinch just underscore we add the pinch the pinch applies is good only if the touch count is two fingers or more so the first finger is always set correctly due to the script and then we will receive the plane positions for our two fingers so imagine the following situation you have the first finger here and it's pointing to this three here and you have the other finger here pointing to this one and then you have a delta movement for example it moves the second finger from here to here and the three dots in a new position here then you could rotate it if you move your finger far away from your first finger then you will without in the point here and based on these values you have to either zoom in so the camera has to get closer to awesome out the camera has to go far away so that is three is here after we update our screen and otherwise if we rotate this the screens and the camera has to move so this we will be displayed here it sounds complex but let's go so we have also a position before our current screen so this is a first finger and the first finger - a position of the first finger before we wind at the last frame and the same with the second finger and then here is a zoom so the distance before / the distance after is a zoom factor and this zoom factor is not always applied for example if you have a zoom of 0 or 10 something is really wrong with our calculations we shouldn't continue but otherwise we just set the position on the vector between our first position and the current camera set to 1 / zoom okay what does it mean so for example imagine you have your first finger here the second finger here and this is a distance of 1 just for simplicity and after the frame you have your second finger here and your first finger here and this is a distance of 2 and this is our zoom factor 1/2 it's 0.5 so this factor we have to zoom so we zoom out and after this frame this whole image will be here and this image will be here and so the screen will zoom in - maybe yeah it's this size okay this is how we calculate the zoom factor but ready we set our camera so first of all we have our camera here and the first finger is touching to this position and now we have a long line here and we take one - zoom or 1 / the zoom and this is the value it sits on this vector for example this is 1 and 1 divided by 1/2 you know example it's a 2 and so maybe - is here with this complete distance then the camera will be moved from here to this point here okay we can test it the zoom is working pretty solid let's continue with siltation the last thing we will introduce a rotate variable and then we say if the rotate variable is activated and we really changed position of the second finger we will do a rotation so we will rotate around the first finger and the axis is always a plane normal and then the angle is a first position at the second position - the first position and and the second position - the first position before this frame and everything is always directed to the plane normal this means we have to go up so it's easier up here so if we point here and here and do a rotation for example move this a little bit to here then we take this point as our pivot and then rotate around and the Dyk degree x degree is equal to this angle here from here to here so basically these angles are the same so we were calculated here from the movement between those two actions and then apply it if this was too fast for you take a deeper look into the description there is a script you can download it or you just use the script and do not care about the coding so if you liked the video leave a like it would really help me bye subscribe to my channel to get more straight to-the-point tutorials [Music] [Music]

Channel: DitzelGames

Views: 55,246

Keywords: unity, ios, mobile, android, move, scroll, pinch, zoom, left, right, up, down, rotate, games, Pinch and Scroll, Pinch to Zoom, scrool to move, move plane, move camera, camera zoom, multitouch unity, Mobile Games, Mobile navigation, mobile touch, touch move, touch zoom, touch rotate

Id: KkYco_7-ULA

Length: 13min 19sec (799 seconds)

Published: Sat Jul 27 2019