[RELEASED] Mobile Touch Camera

Mobile Touch Camera is a camera and input script package that allows to create a smooth and natural Scroll & Pinch camera with integrated Item Picking, for Mobile devices. A lot of time went into providing a perfect user-experience. For example a user may start dragging around the camera with 1 finger, then seamlessly start pinching to zoom by adding a second finger, and after that continue dragging the camera by releasing again a finger. These and a lot more of fine nuances have been paid attention to when developing this camera package.

Videos:

• Hands on Video
• Editor Mode & Quick Tutorial

Usage:


The package supports both orthographic and perspective cameras. It supports top-down cameras as well as 2d sidescrolling and isometric-style ones. In addition it contains helper scripts that allow for simple integration of item-picking (i.e. the ability to select scene items and drag them around while the camera remains static).

Features:

* Pixel Perfect Scroll & Pinch.
* Camera Movement and Item Picking integrated for best usability.
* Swipe and release quickly for smooth auto-scrolling.
* Custom inspectors to help you tune the asset more efficiently.
* Seamless transition between pinching and scrolling. E.g. Start dragging with 1 finger, add second finger to pinch/zoom, release finger to go back to scrolling.
* Demo scenes for top-down, 2d sidescroll, and isometric scenarios.
* Supports perspective and orthographic cameras.
* Mouse Emulation for convenient development on PC.
* Camera rotation & tilt gestures.
* Full C# source code.
* Tested with Unity 5.0.1, 5.1.1 and 5.3.4

DEMO: Top-down style demo with orthographic camera: Android APK File Version 1.8.1

FAQ: https://bitbendergames.wordpress.com/unity-asset-store-support/

Asset Store Link: http://u3d.as/iQA

 

Do you have a demo so that we can see it in action and try it?

 

Hey there. I'll get a demo up an running within the next 48 hours (aka. the weekend). Will an Android APK-file be sufficient for you?
Cheers

 

Alright, Android APK Demo added to the thread. The download link can be found in the top posting.
The demo has a basic top-down orthographic camera setup with a slight camera rotation (e.g. 70 degrees instead of pure top-down 90 degrees). The scene contains both 3d objects as well as 2d sprites that can be picked and dragged.

 

Version 1.1 with updated zoom code is now finally on the asset store. This version makes the zoomFactor inspector variable obsolete. Instead the algorithm will keep the scene points under the "zoom-fingers" during zooming which feels a lot more natural and is basically the way CoC also handles it.

 

Hey there,

I felt like it's time to write a quick note about the current state of development. Another update of the Mobile Touch Camera asset is released (v1.3). It's got some important changes I'd like to discuss briefly.

Camera Boundary Computation:
In previous versions the boundary settings would only affect the center position of the camera. This meant that a fully zoomed-out camera would reveal more of the world than a zoomed-in camera. With the latest version (1.3), the boundary setting now affects the edges of the camera. With this in place you can ensure that the camera will stop as soon as the edges of the camera hit your defined world boundary. This is basically the way Clash of Clan handles it and I believe it's also the more natural solution. Everybody who already purchased the asset may need to increase the boundary settings when using version 1.3+ of the asset.

Pickable Item Snapping:
When using the item picking feature, items are now snapped to a grid when they are dragged. There are various parameters that allow you to customize the unit-size of the grid as well as the angle among other things.

DEMO: Feel free to test version 1.3 in this Demo: Android APK File
(By now a newer demo version can be found in the topic starter comment)

 

Any chance that you can add optional camera rotation using touch to your library.

I was about to buy your package and realized it does not have camera rotation which is a must for my current project. Am I allowed to modify your code to integrate camera rotation (just a simple RotateAround using global axis), and since i'm working on a 3d top-view project, I also need the camera to look a bit forward when low and almost straight down when high. The biggest issue here I think is the mix of Camera Rotation around a point using 2 fingers and pinch zoom.

If you could add this kind of optional functionality to your project, that would be marvelous because i'm sure you would do it better than me. if not, i'll have to integrate if I can update the code.

 

Hey there,

@Camera Rotation: Actually I’ve more or less secretly integrated this feature already in the latest version (1.5) that’s available on the asset store. It’s disabled by default but you can easily enable the feature using the Unity Inspector. I was trying to wait a little and see if there’s any critical feedback on the implementation of this feature, and then try to polish it some more if necessary before making it a properly advertised feature.

@Camera-Tilt when zooming in/out: That does sound like a great feature that I haven’t thought of at all yet. I’ll put it on the feature request list immediately. I will start doing investigation on this soon, but I cannot give you any time-frame if or when this is implemented. I’ll have to see first if this would break the pixel-perfectness and what to do in that case.

@Updating the Code: Well, it’s the source code you’re purchasing. You are free to completely modify it any way you want. The only negative thing to happen is that you may have to manually merge your changes in case I release an updated version and you download this update.

Cheers

 

That sounds wonderful,

The tilting of the camera will probably be a pain but then again, if I was very good at this I would not ask you

Expect my purchase in a short.

 

So, I got the package, almost everything is up to my expectations. Very good job you have done there. I haven't tested everything but this is a very good start for me.

I have not found a way to tilt the camera at all, I think having an option for it would nice. Not sure which gesture would apply thought. As for the tilt while zooming, I been thinking more about it, and not so sure its something that makes sense unless you have a really rigid camera movement, like following a path or external factors.

Overall i'm very happy with your product. Its a good quality camera handling library and you were prompt to reply to my post which is a big plus.

 

Hey,

I’m afraid I haven’t had tilting on my agenda at all yet and so there’s no gesture for tilting either at this point. I’m also adding this to my list and will start working on it. I’m thinking something along the lines of iOS maps, where you use 2 fingers placed parallel doing a synced consecutive up or down motion. This should be doable without interfering with the rest of the gestures.

Any feedback on these thoughts is appreciated. Cheers

 

Sounds good to me, don't forget to put optional limits too like you did for zooming.

Other possibility would be to have a way to register to an event or similar where I could write my custom limiting code. I actually see this for rotation too. You could pass the camera as a parameter or such.

Like, make your change and call the custom code using an event, and let us change camera stuff.

For example, with this event (or whatever method should be used), I could pick a custom pitch for the camera based on its height.

Same could work for rotation, although I guess a single callback should be enough.

Actually, i'll try to make this one myself, shouldn't be that hard.

 

So, I just wanted to write a quick update note. Version 1.6 has been released in the store a few days ago. Some of the notable features that have been added since my last update note (that concerned version 1.3):

Camera Rotation Gesture: This feature has been requested a lot. It has made it into the asset with version 1.5. I’ve been trying to use feedback given by the users to polish this some more in version 1.6. Note that this feature needs to be enabled by checking the according checkbox in the inspector of the mobile touch camera component.

Camera Tilt Gesture: Starting with version 1.6 the camera can now be tilted similar to how popular games or map apps allow it. You basically place 2 fingers on the screen of your device and do a consecutive synced up or down motion with both fingers to tilt the camera. Note that this feature needs to be enabled by checking the according checkbox in the inspector of the component.

Custom Inspector: The asset now ships with a custom inspector that gives hints when detecting potential problems with the camera setup. It also hides complexity when a feature isn’t actually used (like custom scroll damp parameters, or camera tilting parameters) and displays some features in a way that’s easier to understand I believe.

Unity Event Callbacks: I added new Unity Event Callbacks for reacting to the „double tap“ on items as well as various new events for dragging items. You can now easily react to the start or the end of the movement of an item. Using this you can for example change the color of an item while it is being dragged. Or you can enable a marker below the item that shows the extents of the item on the grid. Furthermore you can react to position updates of dragged items. This is particularly valuable when using the snap to grid functionality. Whenever an item is snapped to a new position you can react to that and, for example, evaluate if the position is valid for the item. You could turn its color to red if it has been moved to an invalid position.

That’s it for now. Shout outs to all the people that have supported me by purchasing the asset. The feedback I’ve received helped keeping me motivated as well as polish the asset further and further. A big thanks to you guys. Cheers.

 

Hello,

I've bought your asset. It's great, saved me a lot of time. Really, thanks for this one.

Are you going to add LongPress functionality to your asset? I would like to pick my objects not with a single tap but rather a long one (and control its progress - tap duration - to be able to show some animations based on it). It's pretty important to me, because single tap will fire another action on my element. Maybe scripts can be adjusted just a little bit to make it work?

 

Just following up on this publicly. Long press or long tap is something I have been working on lately. It should be part of the next official release I'll try to get out within the next couple of weeks. Cheers.

 

Please add webplayer support...

#if UNITY_EDITOR || UNITY_STANDALONE_WIN || UNITY_WEBPLAYER

 

Roger that

 

Hello. Is there a wat to allow certain margin to allow overpan and have the camera bounce back to boundary (similar on how overzoom margin works)?

 

Hey there. Right now this isn't integrated. I added this to my TODO list and will work on it the next days. My idea is to get out a new version of the asset within the next 1-2 weeks (excluding the submission-time). I hope this works for you. Otherwise we'll find another solution. Cheers

 

Awesome. BTW, this may also apply to Tilt. I also have a request. We are using the MobileTouchPickable Script to drag an object in the map. The issue is that we want to make an RTS type of map and need the pickable object to snap vertically to a terrain:

I plan to edit your script to do so, but any pointers are welcome.

 

Roger. Putting those things on the TODO list. As for the vertical offset when the item moves into the hill: This has been on my TODO list for a long time. I will look into this and report back on it. Cheers

 

Hi, Love the asset. I'm running into some trouble though with Unity UI events. I have a 2D Canvas on the screen and when clicking a button or scrolling a UI Panel the events are still picked up by the mobile touch camera. How would I prevent such events from propagating to mobile touch camera?

 

From the FAQ:
https://bitbendergames.wordpress.com/unity-asset-store-support/

Q: How to prevent the camera from moving when pressing on a Unity UI button?
A: Attach the EventTrigger component to the button, set the Event Type to PointerDown and select the OnEventTriggerPointerDown method from the TouchInputController script, attached to the camera, as event receiver.

 

Quick Questions regarding Pickable Game Objects:
- Is there a way to programatically pick a Mobile Touch Pickable Game Object?
- Is there a way to disable the click outside to deselect a selected Mobile Touch Pickable Game Object, and just deselected when picking another one?

 

I already managed the second one by commenting a couple of lines in the MobilePickingController's InputControllerOnInputClick function:

//if(previouslySelectedCollider!=null&&previouslySelectedCollider!=SelectedCollider){
//OnSelectedColliderChanged(SelectionAction.Deselect,previouslySelectedCollider);
//}

Any pointers on the first question would be appreciated!

 

@Programmatic Picking of a Mobile Touch Pickable:

Update:

With the latest version currently in store (1.7) you can now invoke the method

public void SelectCollider( Component collider )

in the MobilePickingController. The given collider component should be on a gameobject that also has the MobileTouchPickable component on it.

Original answer:

The current store version of the asset (1.6) doesn't yet support the programmatic picking by a public interface. My current working version has this fixed however. Ill try to push it to the store this weekend. I use this code in the MobilePickingController:

///<summary>
/// Method that allows to set the currently selected collider for the picking controller by code.
/// Useful for example for auto-selecting newly spawned items.
///</summary>
public void SelectCollider( Component collider ) {
SelectColliderInternal(collider);
}

private void SelectColliderInternal( Component collider ) {
Component previouslySelectedCollider = SelectedCollider;
SelectedCollider = collider;

if (previouslySelectedCollider != null && previouslySelectedCollider != SelectedCollider) {
OnSelectedColliderChanged(SelectionAction.Deselect, previouslySelectedCollider);
}

if (SelectedCollider != null) {
OnSelectedColliderChanged(SelectionAction.Select, SelectedCollider);
}
}

 

Since this has been requested in one of the reviews of the asset store, I'm posting here a little tool script that allows to set the camera boundary by help of a box collider that defines the outer border. This way you don't have to enter the boundary manually as numbers. The boundary is fetched when the game starts or when play mode is entered in the editor.

Simply attach this script to the camera and assign a collider to it. Note that the collider must be enabled when the game starts. To prevent your gameobjects from colliding with this collider you may either:

• Set the IsTrigger flag of the collider to true.
  
• Assign a custom layer to this collider GO and disable collisions in the Layer Collision Matrix section of the Physics Settings.
• Or simply move the collider up above, or down below the game-world.

 

Hi Guys i got this error

"Failed to compute intersection between camera ray and reference plane. Make sure the camera Axes are set up correctly." on the console each frame. I checked camera axis and was set to XZ_TOP_DOWN which is what i need... and guest what i missing here?
thanks in advance...

 

Hello there,
Would you mind pasting your current camera rotation from the transform component of the camera? One thing to note: The asset doesn't set your initial camera position. Using the XZ axis setting also means that you have to set the camera to point down by rotating it this way in the unity editor. Looking forward to hearing back from you. Cheers.

 

Thanks for your reply my camera data
postion x= 4.09 y= 17.49 z=5.21
rotation x = 10 y = 0 z= 0

 

Hey there. Please check your inbox. I'm taking this topic to a conversation as it sounds like a pretty specific problem. Will post eventual solutions that may be interesting to all others back into this thread in time.

 

Hello. I just submitted the current release candidate for the next update (v1.8) to the store. Time for a quick update note on some of the features that will be added. With this release there aren't any ground-breaking additions, but small improvements.

Boundary Visualization in Editor
A yellow rectangular gizmo will display the defined boundary in the Scene View of the Unity Editor when the camera with Mobile Touch Camera (MTC) component is selected in the Hierarchy. You still have to enter the 4 boundary values as numbers, but I believe with the added visualization it's really fast and convenient to set up a proper boundary.

Automatic Parameter Setup
When adding the MTC component to an existing camera, some default parameter values are now guessed and set automatically from the current camera orientation. In particular the CameraAxes parameter may now be set correctly to XZ when a camera is pointing down. It will remain at XY when a camera is oriented side-ways for 2d games for example. Depending on the camera type (perspective vs. orthographic) default zoom values are now set to different, more suitable values so new users may have a better experience with setting up the camera.

Updated Tilt Detection
I've been trying to reduce the cases where the camera would go into tilt-mode when a zoom or rotation was intended. This has been bugging me for a while and I believe the current version behaves better in that regard.

Greets and thanks again to everybody who's supporting this asset.

 

@BitBenderGames Hi. How can I customize the pinch and rotation behavior. because my camera under a Gameobject. I need pinch to move camera position and rotation. rotate camera parent GameObject by axis Y. Thanks

 

Hi. Just sent you a PM. Cheers

 

Hi Guys i implemented the package in my game, but when i want to put a message when a tap on the object but it is not working, it is just working on the edito and in the desktop, but it is not working on a mobile device (android). I made the following steps

1) I add to the camera
- mobile touch camera script
- mobile picking controller script
- touch input controller script

2) I add mobile touch Pickable script to the object that i want to tap and show the message

3) i add the callback function in the event callbacks in the On Pick Item (RaycastHit) - under mobileTouchCamera script
4) i add the callback function in the event callbacks in the On Pick Item (RaycastHit) - under MobilePickingController script

but it is not working anyone have a clue on this?

Regards

 

Just for clarity: I took the last message to a board-conversation as well. Cheers.

 

Hello,

At this point in time I cannot garantuee that it will work as I simply haven't tried it yet. All I can do at this point is add this issue to my TODO list. Chances are that it won't work to be honest.

P.S.: Anybody else who's reading this has tried to combine the 2 assets?

 

Hello,

thank you very much for your helpful package! I'm currently using it successfully on a top-down game, but I need to integrate a rotation of the camera around the center of the canvas, when dragging - instead of changing the position as by default.

Is there already a solution integrated in your package, for changing the behaviour when dragging? If not, I assume to modify your script for my purposes. Which methods do you recommend me to customize? I thought about adapting InputControllerOnDragStart(...), InputControllerOnDragUpdate(...) and InputControllerOnDragStop(...).

Many thanks in advance.

 

Hello,

You'll have to edit the source-code for such a behaviour. I'll try a few ideas for myself and then report back about the best possible place for such a modifications. Quick question beforehand: Will your camera position remain static the whole time? Or is there any other way for the camera to be moved?

Thanks and regards

 

I took this latest issue to a private conversation now. Regards.

 

Hello,
@BitBenderGames I've bought your script and it's awesome. Is there any way to decrease the minimum tilt angle and avoid unstable behavior? I have to view my scene from almost horizontal position, and the 40 degree limit is far unacceptable. Can you help me with this topic?
Thanks and regards

 

Hello,

I'll have another look into this issue. The whole "pixel-perfect" aspect of my implementation relies on a few mathematical assertions that lead to this restriction at the moment. I'll try to give a simple example to illustrate the problem. As soon as the horizon becomes visible, you are looking at potentially infinite distance. You could start panning or rotating the camera with your finger clicking on a point that's infinitely far away, and that's where the current mathematics start to fail.
Either way I'll look into this issue a little further.

A question about your specific requirements: When the camera is at horizontal position, do you still need to pan the camera? E.g. move it along the floor plane? Do you still need rotation (one could potentially rotate the camera around a point at infinite distance)? What's the purpose of the low tilt angle? Is it just for visual purpose, or does the camera need to remain fully interactive to user panning/rotation/tilting?

Regards

 

@BitBenderGames , Hi! Awesome asset! I have quick question
Is this possible to zoom/rotate through code?

 

Hello. Both is perfectly possible. Let me paste you a quick example. You can copy this code into a new script-file (c#) and attach it as component to the camera gameObject that also has the mobile touch camera on it:

using BitBenderGames;
using UnityEngine;

[RequireComponent(typeof(MobileTouchCamera))]
public class DebugZoomRotateFromCode : MonoBehaviour {

[SerializeField]
private MobileTouchCamera mobileTouchCamera;

public void Reset() {
mobileTouchCamera = GetComponent<MobileTouchCamera>();
}

public void Update() {

#region rotation
const float rotationFactor = 10;
if (Input.GetKeyDown(KeyCode.A)) {
Vector3 rotationAxis = mobileTouchCamera.RefPlane.normal;
Vector3 intersectionScreenCenter = mobileTouchCamera.GetIntersectionPoint(mobileTouchCamera.Cam.ScreenPointToRay(Input.mousePosition));
mobileTouchCamera.Transform.RotateAround(intersectionScreenCenter, rotationAxis, rotationFactor);
mobileTouchCamera.ResetCameraBoundaries();
}
#endregion

#region zoom
if (Input.GetKeyDown(KeyCode.S)) {
mobileTouchCamera.CamZoom += 1;
}
if (Input.GetKeyDown(KeyCode.W)) {
mobileTouchCamera.CamZoom -= 1;
}
#endregion
}
}

I hope the main pieces (inside the #rotation and #zoom regions) are self explicatory. In case something's not clear, feel free to tell me and I'll try to explain it in more detail. Basically this script will zoom the camera when pressing s/w and rotate in one direction when pressing a on the keyboard.
Note that the rotation code is basically just the same as you would rotate any other transform in unity. There's just a little code before to find the rotation axis as well as the pivot point of the rotation. After the rotation is done the camera boundary needs a re-computation. That's about it. Zoom doesn't need an explanation I think

 

@BitBenderGames, Thanks. It helped a lot
And is this possible, to rotate Boundary area to 17.5 by Y axis?

 

Unfortunately right now there's no easy way to rotate the boundary. What if you instead rotate your game-world? The easiest way would be to put all your game objects as children into an empty game object and rotate that single game object.

 

HI all i have a UI panel 2 event types Move Starter and Move end. It works perfect on desktop but on android it is not, it just ignore the MOve Start and move end event.... any clue on what is going on ?

 

It should be working just fine on Android if it does on Desktop. I'll look into this and report back as soon as I find something suspicious.

 

Thanks @BitBenderGames, the buttons works fine, the problem is with the Panel.

 

Hi im using use asset now, can I disable the 1 touch move in screen? then change it to orbit to target?