14 replies to this topic

[floorman]

Hello all,

I'm trying to make a top-down shooter game in java and I need some help with one bit of code before I can get started.

I can load a player and bullets and mobs and all that sort of thing. But I can't make the player rotate to look at the Mouse's position on the screen. I understand its just a lot of maths involving the use of Sine, Cosine etc?

I'm not too sure how to write, whenever I try to figure it out it just gets the better of me. Would anyone be able to help me out with some kind of method for making the player look at the mouse? I don't want him to follow it, just make the player rotate to look where the mouse is.


Thanks.

[wim DC]

Player pos: X1, Y1
Mouse pos: X2, Y2

tan(degrees) = (X2-X1) / (Y2-Y1)
amount of degrees the image must rotate clockwise = atan( (X2-X1) / (Y2-Y1) )

... I think :P

[floorman]

wim DC said:

amount of degrees the image must rotate clockwise = atan( (X2-X1) / (Y2-Y1) )

... I think :P

That's mainly the part I'm struggling with.

I need the equation of finding the amount the mouse has to rotate. That's the part that I really really can't figure out, the variables I can understand and manipulate but its just math that I need in order to find how much the Mouse has to rotate.

[lethalwire]

It helps knowing that:


Knowing the old mouse coordinates and new mouse coordinates will aid you in computing the change in the angle.
If you have 2 points P1 and P2 where P1 is the old mouse coordinates and P2 is the new mouse coordinates then

dot product = p1.x * p2.x + p1.y * p2.y
magnitude of p1 = sqrt(p1.x*p1.x + p1.y*p1.y)
magntidue of p2 = sqrt(p2.x*p2.x + p2.y*p2.y)
d = dotProduct / (magnitude of p1 * magnitude of p2)
angle = arccos(d); // in radians

To convert angle to degrees:
Math.toDegrees(angle);


Edited dot product.

Edited by lethalwire, 18 December 2011 - 08:11 AM.

[floorman]

lethalwire said:

It helps knowing that:


Knowing the old mouse coordinates and new mouse coordinates will aid you in computing the change in the angle.
If you have 2 points P1 and P2 where P1 is the old mouse coordinates and P2 is the new mouse coordinates then

dot product = p1.x * p2.x + p1.y + p2.y
magnitude of p1 = sqrt(p1.x*p1.x + p1.y*p1.y)
magntidue of p2 = sqrt(p2.x*p2.x + p2.y*p2.y)
d = dotProduct / (magnitude of p1 * magnitude of p2)
angle = arccos(d); // in radians

To convert angle to degrees:
Math.toDegrees(angle);

First of all, thank you all for all of your help.

However, I'm still not understanding this. I am very sorry for asking for help and then saying that its not helping. I am grateful for the help but I am still unsure as to how to do this.

Would it be OK if I sent over code or something and then I got help that way? I know that's a noobish way of doing things, but I'm really stuck and everything I try fails.

Sorry for sucking. :/

[RhetoricalRuvim]

lethalwire said:

dot product = p1.x * p2.x + p1.y + p2.y

It's supposed to be this:
dot product = p1.x * p2.x + p1.y * p2.y

[lethalwire]

 vectors copy.jpg   122.22K   49 downloads
Does this help?

[RhetoricalRuvim]

@lethalwire: You put together that picture just so you can post it here?

[lethalwire]

RhetoricalRuvim said:

@lethalwire: You put together that picture just so you can post it here?

Yes, why?

[RhetoricalRuvim]

Oh. Nothing much, it's just users don't usually do all the work of putting a JPG image together just so they can explain what they mean.


By the way, if you don't mind me asking, why do you need the dot product and the magnitudes if it's just angles we're talking about? Can't you just take the arc tangent 2 of both points and subtract the angles? Like this?:

var angle1= Math.atan2 (y1, x1); 

var angle2= Math.atan2 (y2, x2); 

var rotate_by= angle2 - angle1; 

And also what's cool about atan2 is (x=0)-friendly, so if the second parameter is 0 then the return would be pi/2.

* * *

Oh, and wouldn't you want the angle in radians, so you can rotate the image more accurately, that both the trigonometric functions and the FPU like radians and not degrees?

[lethalwire]

I'm thinking your way would work also

var angle1= Math.atan2 (y1, x1); 

var angle2= Math.atan2 (y2, x2); 

var rotate_by= angle2 - angle1;

In 1 of my original replies, I told the user they'd have to convert back to degrees.

[RhetoricalRuvim]

I would have to say, though, mouse coordinates are usually in screen coordinates, and not graph coordinates, and therefore mouse coordinates are not "arctangent-friendly."

I have to deal with these types of things in the project(/s) I'm currently working on.

In screen coordinates, the origin (0, 0) is the top-left corner pixel of the screen, while in graph coordinates the origin (0, 0) is the center of the screen. One would have to convert to graph coordinates before doing the trigonometric operations.

The conversion is typically something like this:
new x = old x - screen width / 2
new y = 0 - old y + screen height / 2

Though I think in this case we also need to consider the position of the image that we want to rotate:
new x = old x - image position x
new y = 0 - old y + image position y