Given the sprites X and Y values, and the mouses X and Y values, how can I make the sprite face the mouse cursor?

I tried doing this in my move method which I found in another SO question:

    private function move(mousePosX:Number, mousePosY:Number) {
            this.vx -= this.speed;
            this.vx *= this.friction;
            this.vx += this.speed;
            this.vx *= this.friction;
            this.vy -= this.speed;
            this.vy *= this.friction;
            this.vy += this.speed;
            this.vy *= this.friction;

        this.x += vx;
        this.y += vy;

        // Make the player face the cursor
        this.rotation = Math.atan2(this.x - mousePosX, this.y - mousePosY);

And rotation does happen, but it's of one or two pixels. this.x and this.y are the sprite X and Y values.


EDIT: Got it. here's the final calculation:

this.rotation = -(Math.atan2(this.x - mousePosX, this.y - mousePosY) * 180 / Math.PI);

Trying to speed answer your question,

I guess you are halfway there, you probably are getting the rotation in radians from Math.atan2() call, and you're graphics library deals with degrees!

degree_angle = rotation * 180 / 3.1415926 (PI);

Anyway, as a bonus, if you actually need movement in the mouse direction, the direction vector would be such as v(cos(rotation), sin(rotation)). Then multiply that for the desired movement "speed", and there it goes, following the mouse.

Please correct me if i'm wrong :)

| improve this answer | |
  • \$\begingroup\$ That formula you posted worked, thanks :) Updated my question with the answer. \$\endgroup\$ – Joe Simpson Feb 22 '12 at 2:20
  • \$\begingroup\$ great! good programming !:) \$\endgroup\$ – Grimshaw Feb 22 '12 at 2:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.