Pinch and Scroll to Move and Zoom in Unity for Mobile Games
HTML-код
- Опубликовано: 28 сен 2024
- This time I will go back to my roots and give you guys a deeper look in mobile development with unity. Besides first or third person there are possibilities to use top down cameras.
I will show how pinch, scrool and zoom can be translated into movement, rotation and zoom in Unity. This all works like in google maps or any photos app. The position you are touching the content will stick to your finger. You can than move them together to in the opposite direction.
The script is ready to go.
Script: gist.github.co...
Unity Remote: docs.unity3d.c...
#ditzelgames #unity #gamedev
This is by far the best tutorial I have ever seen. Really love how you take your time to explain with diagrams and markers.
You even explain what each code does with the diagrams. Helps a lot to understand the concept behind it.
Definitely cannot be compared to tutorials where they just chuck the code at your face and never explains it. This is just pure gold content.
This is without a doubt the best tutorial. The only thing missing is how to orbit the camera around an object. Which I can probably figure out.
Anyone have been able to limit the scroll in certain boundaries? I was able to limit the zoom alredy, then I tryed to set boundaries without without rotation and worjks fine, but i'm not able while rotating, any solution?
I watched 6 youtube tutorials hoping to achieve this. And your video is the only one that proved useful! :D
I've been searching for a tutorial on mobile touch navigation. I found your tutorial is the best one with the practical explanations that you drew on the screen. Could you create a new mobile touch tutorial with the new Unity Input System?
Thanks for the wonderful tutorial. I liked and subscribed to your channel.
Excellent code ...Tested and works smoothly. I added a UI button to call the public bool variable Rotate. So i can tested on my device and the rotation is very smooth. Thanks a lot for this tutorial.
This is excellent. Thank you so much, I'm going through the code now and will test it out shortly.
I noticed that the pinch and scroll take away the camera to out of bounds. This glitch makes the map out sight by totally zooming in or zooming out by the user, hence creating a situation to restart the app. If there is an add-on to prevent moving the camera out of specific area then it would have been a great script. The scroll and pinch features works well, though.
Also, angle shifting should also be there.
Honestly Manil, yes this is an issue - However.. i think most of those coming to this tutorial, myself included are less inclined to just rip the whole script. I myself have never used pinch/drag(other than UI Elements) features in games as ive always tended to stay away from mobile. So this work is Extremly useful for this purpose.
That being said 99% of the "hard work" and thinking has been done for you.... Honestly writing a tiny little script to work with whatever your limitations are intended to be is so beyond simple its difficult to understand your concirn.
for zoom.
//Move cam amount the mid ray
Camera.transform.position = Vector3.LerpUnclamped(pos1, Camera.transform.position, 1 / zoom);
This line appears to be responsible for the zooming at a glance.
So all you would need to do is create a new public variable called "zoomLimit" and create an if statement around the above line. Ignoring that line if the camera height is greater than the zoom level allowed.
then an else to that if to set the camera height back under the allowed zoom level, re-enabling the pinch code.
Do the same for a "lower limit" and there you go. One more variable, and a couple of if/else statements = fixed.
For the camera out of bounds issue, that entirely depends on how your game works, simplist thing that comes to mind is a "Scroll back" feature based on an empty/other object in the scene. If your distance is greater than a certain ammount to that object. Force the camera to move toward that object until your within the "bounds" again.
Happy coding! And for your own sake try writing more independant code than skimming whatever scripts you can off the internet. Nothing will ever work "exactly how you need it to" and will only cause you more headaches in the long run, just be creative with your solutions.
Thank you so much. Very good tutorial! You've got a new subscriber!
If anyone wants just the Screen panning in its most simple form:
public float panSmoothing;
void Update()
{
HandleInput();
}
public void HandleInput()
{
if(Input.touchCount > 0)
{
Touch touch = Input.GetTouch(0);
if(touch.phase == TouchPhase.Moved)
{
Vector2 pos = touch.deltaPosition;
Vector3 position = new Vector3(pos.x / panSmoothing, 0, pos.y / panSmoothing);
this.transform.position -= position;
}
}
}
Nice, thank you.
Can you PLEASE 🙏
also but for Orthographic camera ?
Where would youintegrate max and min Range on the zoom?
well truth is because of the IF IOS ANDROID thingy, I don't even have the inspector fields to attach the camera, so it doesn't work at all
great tutorial, thank you! :)
Hey man very good script. I took the script modified and made it to work the way I want. I just need one thing to fix . How can I change zoom speed ? Its obviously in this line : Camera.transform.position = Vector3.LerpUnclamped((pos1 + pos2) / 2f, Camera.transform.position, (1 / zoom)); I tried to change parameters but nothing worked : /
(pos1+pos2) / 2f is modified so when i zoom the camera goes between the 2 touch inputs
Great job Sir!
You saved my weekend
It works perfectly, but I cannot use any canvas UI. is there any way to make finger tap works like "Click" on Cavas?
Would've been real nice to note this only works in projection, not ortho... :/
Thank this was a massive help
Hello
How can I Rotate only the camera?
Thanks
you are a life saver
thank you kind sir!
Love!
how to pan in opposite direction.
how to i slow down speed of rotation and cameramovement?
I used vector3.MoveTowards to control the camere movement where I consider the 3rd parameter of the function a speed modifier. The rotation is not working for me yet though
Thanks!
Has anyone been able to limit the panning so that the camera view does not go off the edges of the plane?
Just set limits for the camera.
@@DRagnMastrN7 how????
@@priyanshneel2284 It depends to you needs, haha. Via code use something like (camera.position.x > limit) camera.position.x = limit;
@@DRagnMastrN7 ye but this wont work if u rotate the camera :S
Maksihh gan
work gan?... di ane ko dizoom trus blackscreen ya
does not work and what is PLANE not good
Wotate
it is indeed a very good tutorial. Thank you, you helped me a lot !
How to make it smooth ? After i leave the touch the camera to continue moving some extra distance and slowly stop. Please someone help
I searched man Tutorials on Pinch and Zoom . But this Tutorial was the Only one , which helped me :)
for me rotation doesnt work for some reason. i have no clue what stuff in those codes are, most of them are completely new to me but one thing is important: i copied your code and it works. thank you so much what else to say
To those who wants to :
- Restrict zoom in and out
- Adjust camera pan speed
Check out the fork that I made in the github repository. I added a few simple lines of code to do the above functionality.
@Arthur Alves Check in this yt description. There's a link to his github repository. Then under the fork tab check the one i forked out.
Thank you
hey man, I want to limit the camera movement in the code you wrote, but I couldn't integrate it into the code, can you help?
Camera.transform.position = new Vector3(
Mathf.Clamp(Camera.transform.position.x, -100f, 100f),
Mathf.Clamp(Camera.transform.position.y, 100f, 100f),
Mathf.Clamp(Camera.transform.position.z, -100f, 100f));
@@hakanozek708 did you ever figure this out? If so please help me
OMG
Any updates for new input system?
you saved me a lot of time, thank you, the script works very well
ah! finally, i found it.... thanks to you 💓💓💓
can I use Clamp here?? to limit my Camera Movement ?
Did you use clamp then?
Use clamp with a Lerp to smooth. It works
hey dude, can you write how did you do it?
Can i ask , why do we need Plane.Raycast , is it because ur terrain doesnt have a collider for Screentoworlpointray to hit?
This is still working fine for Unity 2021.3.11f1. Thank you very much!
On Google Maps, if you drag across the screen with two fingers and maintain the same distance, the camera doesn't zoom in or out. Do you know how to replicate this with this code?
Hello. What would you do to limit the zoom and translation within the map? (example: max aproach is the tree level and max zoom out is four times that)
I have tried everything and I could not get it to work. Is limiting the y axis a good approach?
Would really appreciate a response. Thanks!!
I responded to someone earlier with something simalar, so im just going to copy and paste this here
Honestly Manil, yes this is an issue - However.. i think most of those coming to this tutorial, myself included are less inclined to just rip the whole script. I myself have never used pinch/drag(other than UI Elements) features in games as ive always tended to stay away from mobile. So this work is Extremly useful for this purpose.
That being said 99% of the "hard work" and thinking has been done for you.... Honestly writing a tiny little script to work with whatever your limitations are intended to be is so beyond simple its difficult to understand your concirn.
for zoom.
//Move cam amount the mid ray
Camera.transform.position = Vector3.LerpUnclamped(pos1, Camera.transform.position, 1 / zoom);
This line appears to be responsible for the zooming at a glance.
So all you would need to do is create a new public variable called "zoomLimit" and create an if statement around the above line. Ignoring that line if the camera height is greater than the zoom level allowed.
then an else to that if to set the camera height back under the allowed zoom level, re-enabling the pinch code.
Do the same for a "lower limit" and there you go. One more variable, and a couple of if/else statements = fixed.
For the camera out of bounds issue, that entirely depends on how your game works, simplist thing that comes to mind is a "Scroll back" feature based on an empty/other object in the scene. If your distance is greater than a certain ammount to that object. Force the camera to move toward that object until your within the "bounds" again.
Happy coding! And for your own sake try writing more independant code than skimming whatever scripts you can off the internet. Nothing will ever work "exactly how you need it to" and will only cause you more headaches in the long run, just be creative with your solutions.
Feel free to drop me a message privately if still struggling.
@@christopherlilja7423 Thanks for your reply and your elaborate answer.
I have already tried exactly what you proposed in your response. By doing that, the screen goes crazy, trying to fix the screen by every frame (because it is in the update method). I haven't figured out a way to do that limitation smoothly, so I'm studying and trying to find a way to work around it.
Still interested in suggestions! Thanks!
@@nicolaskamien1825 hey Nicolas!
If your looking for a smooth transition, back to the "play area" you need to treat the camera movement more like... player movement.
So when you move a player to xyz, you don't just set its position... i think a working method would be something like this. Your camera is composed of two objects. One that "follows" the cameras position exactly and the other being the camera.
Once you have that working. You write a condition in the follow camera script to not allow for the following object to exit your set bounds. This will result in that object basically being "stuck" right at the edge of where the camera is not supposed to be allowed to exit. Giving you a good reference point.
Then in your camera dragging code, your going to add the function in/use the same function as you did earlier to detect that the camera has gone out of bounds also.
Then you have the ability to force the camera to move based on a speed value, simalar to:
gameObject.transform.position = new Vector2 (transform.position.x + (h * speed), transform.position.y + (v * speed));
Although obviously you will need to use a vector3 as this is a 3d game.
Speed can be derived from a default set speed all the time, then if i were you. I would probably increase that speed variable based on distance, not allowing it to ever be lower than default. But 1x when 1 meter out. 2x when 2 meters out. And so on.
This will result in a quick "snap" back to position when you stop manually controlling the camera, that will slow down the futher you reach your out of bounds edge/the following object!
If your still struggling let me know! Im going to have to write this same exact process anyway and i can just throw some code together earlier than planned and share it. In fact, i will see about doing that right now. Ive got some time to kill.
Happy coding!
Chris
@@nicolaskamien1825 Hi Nicolas!
So I managed to find a secondary script that i adapted to fit what i needed for myself.
pastebin.com/9u2LXdcN - Link here.
it uses Mathf.Clamp to bind to a set of coordinates EX X[-10,10] Y[-20,40], as well as zoom.
If you need the rotate function included (I didn't) it shouldn't be too difficult to adapt what you can see in this script to fit the one provided, and roll it into the 2 finger switch case. It actually is a far easier implimentation than the suggestion i listed above. But doesn't have a "Smooth panning" effect to return to the bounds of the camera, Instead the camera is physically unable to pan outside of the zone you dictate in the public arrays, and as its "Clamped" that float is incapable of going higher than a certain #. Fixing the stuttering/Crazy camera issue :')
Either way, adapt the clamping into this script, or pull the rotation from this one.
Hope this helps!
Thank you, the tutorial has helped me a lot. But, can you explain how to move the camera to a certain point when you click to one tree, keeping the zoom? I mean, pointing the tree on the middle of the screen. I've tried to translate and lerp but it doesn't work. What I managed is to detect the tree using ScreenPointToRay and RaycastHit. Thank you.
9:27 Thank you! A very useful video :)
how did you get that rotate and camera option on script?
Wow! Watched the tutorial, plugged the code in, hit play. Perfect out of the box!
Thank you!
can we make the zoom use size with ortho cameras?
Hello how are you doing? if I want to move the object (not the camera as in this case) how can I do that?
How to make it workable for both PC and Android?
thank you for sharing !!
Nice code :)!
Best regards,
Christopher
Can you make a tutorial on how to create a script that allows you to grab and throw object in unity for android/ios?
Ok
When I create a new script there is no camera slot. I'm using Unity 2020.3.14. Any ideas ?
change build project to android/ios
Best one !!
Thanks a lot bro 👍🏼
Thank you very much man 😊
Awesome algorithms! Thanks!!
When I touch the top of my phone's screen to translate the camera, it starts to freak out. It suddenly move faster and I can't control when it comes to touch the top of screen. Is there any way to fix this?
I found out something. When I touch the bottom of the screen, movement is slow. When I touch the centerof the screen, movement is properly fast. When I touch the top of the screen, movement is way much faster.
@@salihbalkis72 Same.
Did you find a solution?
What if its a Terrain and not a Plane?
can you provide the code in text?
It's in the description
Thanks, i support you for mobile game developer
It is helping me a lot for developing a game name FPL by fantasy developers
@@umairmalik6480 Why? What Happened?
When you use this script in your game it works perfectly for you?
Do you have tutorial drag and drop object like COC? i need that now
Dragging and dropping an object is easy.
Detect mouse click + Hold
Get mouse world position when Clicked and held.
Move object to position stated above.
Think of it less like dragging an object, more like.. an object following the mouse position and its far easier to wrap your head around.
Great job man!
Hi. Where do you create the plane? It's not in the posted gist nor shown in the video.