[Unanswered] "Pixel Perfect" Mobile 'CoC Style' Touch Camera Movement - Complete Script Included.

Edit: I’ve added an [Unanswered] tag, just to make everything clear. This is mainly due to the question having well over a hundred views, but only one reply and that from when it was first created; almost two weeks ago now. I’ll continue to update my progress as it comes in, but I need some help here.


Hey Unity Answers!

Firstly I’d like to apologize for the title, I hate when people essentially ask ‘how do i make this popular product’; this is not that. However, I don’t know quite how else how to phrase it.

I’m searching for an asset, preferably something to purchase from the Store or remake from a set of tutorials… To gain a camera movement system similar to Clash of Clans, on the mobile plateform. (iOS to be specific.) Please don’t get me wrong, I’ve done a lot of searching. Hours upon hours of searching, just to begin prototyping this small project. I’ve purchased one of multiple assets, only to find it’s been either broken or not quite scored what it promised. Here’s a basic list of definitions for what it should do.

  • Over-head/Topdown View (Similar to Clash of Clans/Related products.)
  • Pan with finger movement.
  • Pinch to Zoom In/Out
  • Modifiable limits on how far it can zoom in/out, and how far it can go in each direction.
  • “Pixel Perfect” in that what you put your fingers down on, never leaves from under your fingers as you move. While most movement scripts just travel in the swiped direction, losing any feedback from where your fingers were actually placed from the game world. Bolded as this was just edited in.

As always, any help is more than greatly appreciated.


Update 12/02/14
Here’s an edit I’ve decided to implement, after purchasing so many assets to no avail. Hopefully it’ll help someone else save that money.

Here’s a list of assets that do NOT preform the above task, and anyone seeking for a simple camera asset such as above should look elsewhere.

  • FingerGestures (Very buggy, couldn’t implement both pan and pinch features at run time, and often misinterpreted simple directional finger movements/spazzed out.)
  • ISRTS Camera (Too unstable.)
  • ControlFreak (Can only modify a specific materials transform values such as scale.)

Seventy bucks wasted so far, to no avail. Still searching for input and suggestions, here.



Update 12/08/14

I’ve included an incomplete, yet functional script in the Answers section below. This utilizes multiple basic features we sought after, such as pan, and pinch-to-zoom for mobile. However, it still lacks the “Pixel Perfect” aspect which is vital in accuracy and fluid gameplay.

My current concept to pin-point the movement system, involves modifying the speed to finger movement. Currently everything is dynamic to finger movement, apart from speed. Perhaps (velocity * direction = location)?

Could use more input from others, will post any updates or progress I find.

Hey there,

I just released on the asset store a camera script (with integrated item picking) that had your listed points in mind when developing. In particular I wanted to reach the quality of the mentioned CoC camera, where there’s so many small yet important details, like pixel-perfect scrolling just to mention the most basic one - there’s so many more fine things going on in the background to make it feel really natural. Feel free to read more about the asset in the official thread:

Forum Thread

Asset Store Link: Mobile Touch Camera | Camera | Unity Asset Store

Use this asset!
just perfect!

AND ITS FREE!!!
https://www.assetstore.unity3d.com/en/#!/content/14489

Hi Gamershaze!

You should check this:

and if you are a lazy boy (like me :D)

Going to answer my own question here, with an incorrect answer that should help the community.

Below is the code for a simple top-down mobile camera movement system, which includes both pan and pinch-to-zoom features.

What it lacks is the “pixel perfect” accuracy of camera systems for games such as CoC. Meaning what you place your finger on, will not stay beneath your finger and results in a very inaccurate feeling. Nonetheless, this will work for prototyping for most people. (From the other Answers I’ve viewed, everyone had issues achieving the following and or did not post it afterwards.)

Written in C#.

using UnityEngine;
using System.Collections;

public class AdvancedCamera : MonoBehaviour {
	
	public float PanSpeed = 0.025F;
	public float PinchSpeed = 0.05F;

	// Use this for initialization, or not. That works too.
	void Start () {
	
	}

	// Update is called once per frame, of course.
	void Update () {
		// Check if we have one finger down, and if it's moved.
		// You may modify this first portion to '== 1', to only allow pinching or panning at one time.
		if (Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Moved) {
			Vector2 touchDeltaPosition = Input.GetTouch(0).deltaPosition;
			// Translate along world cordinates. (Done this way so we can angle the camera freely.)
			transform.position -= new Vector3(touchDeltaPosition.x * PanSpeed, 0, touchDeltaPosition.y * PanSpeed);
		}

		// Check if we have two fingers down.
		if ( Input.touchCount == 2 )
		{
			Touch touch1 = Input.GetTouch( 0 );
			Touch touch2 = Input.GetTouch( 1 );
			
			// Find out how the touches have moved relative to eachother.
			Vector2 curDist = touch1.position - touch2.position;
			Vector2 prevDist = (touch1.position - touch1.deltaPosition) - (touch2.position - touch2.deltaPosition);
			
			float touchDelta = curDist.magnitude - prevDist.magnitude;

			// Translate along local coordinate space.
			Camera.main.transform.Translate(0, 0, touchDelta * PinchSpeed);   
		}
	}
}

If anyone could help edit this and achieve this sought after pixel-perfect result, please post with any ideas or suggestions! Optimization of the above script is also welcome, but it’s fairly simple to where I don’t believe that will be necessary.

I’m not the unity dev-er, but i implement it in coco2dx with 3d feature.

pan:
The key is found the previous and current touch point in 3d word,
then translate camera with delta position(3d).

code looks like:
currentPosIn3d = ray picking from ccurrent touch point.
previousPosIn3d = ray picking from previous touch point.

delta3d = currentPosIn3d - previousPosIn3d;
camera->setPosition3D(camera->getPosition3D() + delta3d);

pinch zoom:

I just had to implement this for my project as well. Since you already have panning working you know how to get the current & previous Vector2 screen space positions so I’ll pick up from there.

The gist of it is, from each of those screen space positions you ray cast to the world taking the camera perspective into account. This gives you 2 world space positions. Then you determine the delta of those positions to apply movement to your camera.

public void ScreenPan( Vector2 curPosition, Vector2 lastPosition )
{
    // create a ray from the current touch point into the world
    Ray curPosRay  = Camera.main.ScreenPointToRay( curPosition );

    // fire that ray out and see if it hits anything 
    RaycastHit curHitInfo;
    if( Physics.Raycast( curPosRay, out curHitInfo ) )
    {
        // we have a hit, do the same for the last position
        Ray lastPosRay = Camera.main.ScreenPointToRay( lastPosition );
        RaycastHit lastHitInfo;
        if( Physics.Raycast( lastPosRay, out lastHitInfo ) )
        {
            // get the delta from those positions
            Vector3 deltaPos = curHitInfo.point - lastHitInfo.point;

            // zap y changes, we're only concerned about the x/z plane
            deltaPos.y = 0;

            // reverse the direction to negate the movement such that the touch point
            // stays over the same spot once the camera moves.
            deltaPos *= -1;

            // apply the pan
            transform.position += deltaPos;
        }
    }
}

Notes: In my code I have other stuff which I’ve removed here to try and keep this answer directly pertinent to your question (camera bounds checking, only ray casting against certain layers, etc). My apologies if this code contains some minor errors/isn’t ready to compile as I have not tested it with that stuff removed. Hopefully it will get you where you want to be with pixel accurate panning.

Hi! I developed such a solution for a game I was working on. You can check it here: GitHub - sergane13/Camera-Movement-By-Touch: Camera movement in Unity script, specific built for mobile devices
It is open source.