How to gradually rotate an object to face another

Question

I'm currently trying to rotate a sprite depending on how many degrees(or rads, I prefer degrees) it differs from facing straight towards a target, the problem is when the target reaches a certain position the sprites decides to do rotate a full 360 to other way instead of doing the 10 extra. This picture probably explains the problem better:

Blue square = target

Red square = the object

Green line = rotation it wants

Black line = current rotation

Brown arrow = how it rotates to achieve this

Red arrow = how I want it to rotate.

Note that Case 1 always work, depending what way it rotates, but Case 2 it always does that rotation, no matter if it is to the "right" or "left" of the current rotation.

This is the code I'm using to rotate the object.

    Vector2 distance = new Vector2(target.worldPos.X - this.worldPos.X, target.worldPos.Y - this.worldPos.Y);
    float wantRot = (float)Math.Atan2(distance.Y, distance.X);
    if (this.rotation < wantRot)
        this.rotation += MathHelper.ToRadians(45) * Time.deltaTime;
    if (this.rotation > wantRot)
        this.rotation -= MathHelper.ToRadians(45) * Time.deltaTime;

What i want to achieve is have it rotate (in Case 2) according to the red arrow instead of the brown one.

NOTE: I'm not an expert at programming, I've only done it from time to time for the past year(Mainly simple 2D Shooter/shoot'em up kind of games), so in depth explanation would be appreciated. I'm also a student learning programming.

PS: Suggestions for Title would also be appreciated as I had absolutely no idea what to put there.

Answer 1

Your problem is that the target could be at angle 5, and the object could be facing 355 degrees (for example). According to your test, 5 is less than 355, so go anticlockwise.

What you should do is test whether the target is within 180 degrees to your left, or within 180 degrees to your right, then move accordingly.

The tricky part is getting the check to 'wrap' around 360 <-> 0. It looks like 0 degrees is left in your case, so the hard test is for when the wantRot is on the side that has 0 degrees within it.

To visualise draw a circle as below, then place your object on the left of where we're facing. You'll see that you have to check the 2 shaded areas separately.

Method 1

Check all cases separately.

Note: Code below is in my head and untested. You'll need to change degrees to radians.

int MoveDir = 0;
var BehindMe = this.rotation - 180;
if (BehindMe < 0)
    BehindMe += 360;

if (wantRot != this.rotation)
{
    if (wantRot == BehindMe)
        MoveDir = 1; // or randomly choose
    else if ((wantRot > BehindMe && wantRot < this.rotation) ||
             (this.rotation < 180 && (wantRot > BehindMe ||
                                      wantRot < this.rotation)))
        MoveDir = -1;
    else if ((wantRot < BehindMe && wantRot > this.rotation) ||
             (this.rotation > 180 && (wantRot < BehindMe ||
                                      wantRot > this.rotation))
        MoveDir= 1;

    this.rotation += MoveDir * MathHelper.ToRadians(45) * Time.deltaTime;
}

---

Method 2

From looking at the image, you may realise that you could just check whether the object on the right, then if not, assume it's on the left (since as long as the current angle is less than 180 degrees checking its on the right is easy). If the current angle is more than 180 degrees, then reverse the concept - check whether it's on the left and if not assume right. Something like below:

int MoveDir = 0;
var BehindMe = this.rotation - 180;
if (BehindMe < 0)
    BehindMe += 360;

if (wantRot != this.rotation)
{
    if (this.rotation <= 180)
    {
        if (wantRot > this.rotation && wanrRot < BehindMe)
            MoveDir = 1;
        else
            MoveDir = -1;
    }
    else
    {
        if (wantRot < this.rotation && wanrRot > BehindMe)
            MoveDir = -1;
        else
            MoveDir = 1;
    }

    this.rotation += MoveDir * MathHelper.ToRadians(45) * Time.deltaTime;
}