Rotate to mouse? [Solved]

#1

I am very inexperienced with AS3, and I am even newer to Flashpunk. I am trying to make my character rotate to face the mouse. All tutorials I have found have said to find the difference between the x and y positions of the mouse and character and then do some math to find the number of radians the character needs to rotate. Well, I understand that flashpunk uses degrees instead of radians, so I set the angle of the character to the cotangent of the slope of the line between the character and the mouse. I also set the origin of my character graphic to be at the center, yet, when I test my game, the character moves (as opposed to just rotating) and doesn’t face the mouse. I am at my wit’s end, and I would greatly appreciate some help. Here is my code:

package

{

import net.flashpunk.Entity;

import net.flashpunk.graphics.Spritemap;

import net.flashpunk.utils.Input;

import net.flashpunk.utils.Key;

import net.flashpunk.tweens.misc.AngleTween;

import Math

public class Player extends Entity

{

    public var sprPlyr:Spritemap = new Spritemap(Assets.Plyr, 64, 64);

    public var xd:Number = 0;

    public var yd:Number = 0;

    public var degangle: Number = 0;

    

    public function Player()

    {

        graphic = sprPlyr;

    }

    override public function update(): void 

    {

        if (Input.check(Key.A)) { x -= 1 };

        if (Input.check(Key.D)) { x += 1 };

        if (Input.check(Key.W)) { y -= 1 };

        if (Input.check(Key.S)) { y += 1 };

        sprPlyr.originX = 32;

        sprPlyr.originY = 32;

        xd = Input.mouseX - sprPlyr.x;

        yd = Input.mouseY - sprPlyr.y;

        degangle = 1 / Math.tan(yd / xd);

        sprPlyr.angle = degangle;

    }

}

}

(Zachary Lewis) #2

FlashPunk has a handy function to do what you’re trying to do. Check out FP.angle(). It takes in a pair of points and determines the angle (in degrees) from one point to the other.

Additionally, I don’t think your code is doing exactly what you think it’s doing. You’re trying to calculate the angle using sprPlyr.x, but that is the location of the Graphic relative to the Entity containing it (which is probably 0). Try using something like FP.angle(Input.mouseX, Input.mouseY, x, y) to calculate your angle. That should get you much better results.

#3

Okay, that’s better than what I was getting before, certainly, but there are still a few problems.

It will rotate with the mouse, but it won’t face the mouse. I’m trying to find out by what degree it’s off, so, all else fails, I can fix it with math, not that the results of my previous delving into the realm of basic trigonometry were very reassuring. But, I know I’m doing something wrong, and I would rather find out what I am doing and fix it than needlessly complicate things. I also can’t get the graphic to rotate around the center of the image. I don’t have even the slightest clue of how I’m going to fix that one. Revised code:

package

{

import net.flashpunk.Entity;
import net.flashpunk.graphics.Spritemap;
import net.flashpunk.utils.Input;
import net.flashpunk.utils.Key;
import Math
import net.flashpunk.FP

public class Player extends Entity
{
	public var sprPlyr:Spritemap = new Spritemap(Assets.Plyr, 64, 64);
	
	public function Player()
	{
		graphic = sprPlyr;
	}
	override public function update(): void 
	{
		if (Input.check(Key.A)) { x -= 1 };
		if (Input.check(Key.D)) { x += 1 };
		if (Input.check(Key.W)) { y -= 1 };
		if (Input.check(Key.S)) { y += 1 };
		sprPlyr.originX = sprPlyr.width / 2;
		sprPlyr.originY = sprPlyr.height / 2;
		sprPlyr.angle = FP.angle(Input.mouseX, Input.mouseY, x, y);
	}
}

}

Edit: I subtracted 270 from the angle, and my sprite is now facing my mouse. I am still trying to figure out WHY it was off by so much.

Edit 2: Got it all working. Thank you, Zachary. I would still like to find out why my angle was so far off…and why I subtracted 270 instead of adding 90. -_(\

(Mike Evmm) #4

If your original, unrotated sprite is originally facing upwards and the angles are counted relative to the x axis, then you’d have to add 90°

#5

My sprite was facing upward, but I don’t know what you mean by “counted relative to the x-axis”.

(Mike Evmm) #6

Typically, in math, angles are measured counterclockwise from 0x. This means

+0°=right +90°=up +180°=left +270°=down

Probably no news there. However, in flash the y axis is pointing down, not upward, so you’ll have

+0°=right +90°=down +180°=left +270°=up

Also maybe no news there.

When you’re measuring the angle between two points, it’ll sorta create an imaginary axis centered on the first point, and then tell you at which angle the second one is relative to this new axis.

So imagine the entity you want to rotate and the mouse are side to side, mouse right to the entity. This’ll return 0°, and the entity won’t be rotated at all. However, the entity’s graphic is still facing upward, so you’ll have to offset it 90° to the right to compensate that.

Hope I wasn’t too confusing, an image would probably serve me better.