Can't rotate properly due to vector3s

Hey there,
I'm working on a 2D, top-down view space game in which a player aims a cannon by moving his cursor (The cannon is supposed to rotate in the direction of the mouse, using the RotateTowards function).
However, this has not been working properly, and I think I narrowed down the problem - something's wrong with the rotations I'm placing into the RotateTowards function.

This is my code:

Code (CSharp):

1.         //Get the mouse's position relative to the cannon, and make a Vector3 out of it.
2.         MousePosition = MyCamera.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, Input.mousePosition.z - MyCamera.transform.position.z));
3.         Vector3 TargetDir = MousePosition - new Vector3 (transform.position.x,transform.position.y,0);
4.  
5.         //I compare the values of the cannon's rotation to the vector3's rotation
6.         Debug.Log("Cannon to mouse rotation (LookRotation) - " + Quaternion.LookRotation(TargetDir) + ", Cannon rotation - " + transform.rotation);

However, when I check the two rotations in runtime, it seems that they are a bit skewed. This is what I got when the mouse was aligned with the direction the cannon was facing:


Can anyone help me understand why the rotation seems to be off all over by 0.5? and what I could do to fix this?

Thanks in advance

 

Try using this:

Code (CSharp):

1. void Update ()
2. {
3.     Vector3 mousePosition = Input.mousePosition;
4.     mousePosition = Camera.main.ScreenToWorldPoint(mousePosition);
5.     Quaternion rot = Quaternion.LookRotation(transform.position - mousePosition, Vector3.forward);
6.     transform.rotation = rot;
7. }

This code will have the sprite look at the cursor with a fixed rotation.

 

Code (CSharp):

1. if (Input.GetMouseButton(0))
2.         {
3.             // convert mouse position into world coordinates
4.             Vector2 mouseScreenPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
5.  
6.             // get direction you want to point at
7.             Vector2 direction = (mouseScreenPosition - (Vector2)transform.position).normalized;
8.             // set vector of transform directly
9.             transform.up = direction;
10.          }

Try this snippet in Update method

 

This indeed makes the cannon rotate and look at the direction of the mouse. Unfortunately, this rotation is instantaneous. I am trying to rotate towards the mouse over time. That is, say the cannon is looking towards the right, and the mouse is clicked/held directly on the left of the cannon, a couple of moments will pass, in which the user can see the cannon rotate from his starting position to his end position.

Any idea how I can achieve an effect like that?

UPDATE

I figured it out myself, based on OfficeThrashing's reply. Here's the modified code:

Code (CSharp):

1.  
2.             // convert mouse position into world coordinates
3.             Vector2 mouseScreenPosition = MyCamera.ScreenToWorldPoint(Input.mousePosition);
4.  
5.             // get direction you want to point at
6.             Vector2 direction = (mouseScreenPosition - (Vector2)transform.position).normalized;
7.  
8.             // Find the compromised rotation, using RotateTowards
9.             Vector2 NewRotation = Vector3.RotateTowards(this.transform.up, direction, RotationSpeed / 100f * Time.deltaTime, 0.0f);
10.  
11.             // Set the image's transform.up as the compromise vector
12.             transform.up = NewRotation;
13.  

 

rotate if angle between the canon direction and the mouse is greater as something.

Code (CSharp):

1. public float speed;
2.  
3.     void Update()
4.     {
5.         Vector2 mouseScreenPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
6.         Vector2 direction = (mouseScreenPosition - (Vector2)transform.position);
7.  
8.         if (Vector2.Angle(transform.up, direction) > 1f)
9.         {
10.             float angle = Mathf.Sign(Vector2.SignedAngle(transform.up, direction));
11.             transform.Rotate(Vector3.forward * speed * angle * Time.deltaTime);
12.         }
13.     }