As: Rotate and follow mouse

[UnknownFury]

As: Main

Hey,

This is my first tutorial. In this tutorial you will learn:

1. Rotation towards the mouse.
2. Making a MC follow the mouse

Here is a smaple.

You will need to know:

1. For this tutorial you will simply need a basic understanding of AS.

Rotation Towards Mouse

Okay so here is the script we will use:

Code:

angle_in_radians = Math.atan2(_root._ymouse - this._y , _root._xmouse - this._x); angle_in_degrees = Math.round((angle_in_radians * 180/ Math.PI)); this._rotation = angle_in_degrees;

Lets break this down a little now then.

angle_in_radians is just our variable name.

Math.atan2 is just an atan which we need to use but it is in the form of y, x which is what we need to do.

_root._ymouse – this._y, This calculates what the mouses y position – the objects y position is equal 2.

_root._xmouse- this._x does the same but with the x position.

angle_in_degrees, this is just our variable name again but this time it is degrees.

Math.round((angle_in_radians * 180/ Math.PI)); . You don’t really have to understand this it is just a conversion. We are rounding up what the angle_in_radians time 180 divided by PI is.

this._rotation = angle_in_degrees; finally we are saying rotate this as much as angle in degrees.

Your object may be pointing not at the mouse but 90 degrees in a different direction. If so double click the object and rotate it 90degrees in that direction.

Making an MC follow the mouse, with smoothing (covered by ApatheticMark)

Code:

this._x += (_xmouse-this._x)/40; this._y += (_ymouse-this._y)/40;

This works by finding the distance between the MC and the mouse, which is (_xmouse-this._x), then moving a fraction (1/40 in this example) towards it (this._x +=). This is smoothed as the nearer the MC is to the object, the smaller the fraction, and therefore the less it moves. If you use this code, please change 40 to whatever number you want, but remember that the lower the number, the faster the MC moves.

------------

You could alternately use this script by me.

Code:

yDifference = Math.round( _root._ymouse - this._y);
y_Amount_to_Move_tank = Math.round( yDifference / 5 );
this._y = y_Amount_to_Move_tank + this._y;

It essentially does the same thing. I am not going to explain it as Mark already did that but you can see what it does. And then do it again for the x:

Code:

xDifference = Math.round( _root._xmouse - this._x);
x_Amount_to_Move_tank = Math.round( xDifference / 5 );
this._x = x_Amount_to_Move_tank + this._x;

Thanks,

Unknownfury

[ApatheticMark]

At 1/14/07 04:42 AM, UnknownFury wrote: You could alternately use this script by me.

Code:

yDifference = Math.round( _root._ymouse - this._y);
y_Amount_to_Move_tank = Math.round( yDifference / 5 );
this._y = y_Amount_to_Move_tank + this._y;

It essentially does the same thing. I am not going to explain it as Mark already did that but you can see what it does.

This does the same as mine, to an extent. Yours is rounded, which is inaccurate; and yours is much longer; also, you have added _y to itself instead of using +=. I win.

[phyconinja]

At 1/14/07 04:42 AM, UnknownFury wrote:

Math.atan2 is just an atan which we need to use but it is in the form of y, x which is what we need to do.

would you mind explain me how the Math.atan2 works?

[Paranoia]

At 1/29/07 02:57 PM, phyconinja wrote:

At 1/14/07 04:42 AM, UnknownFury wrote:

Math.atan2 is just an atan which we need to use but it is in the form of y, x which is what we need to do.

would you mind explain me how the Math.atan2 works?

Basically, imagine a piece of graph paper. Imagine that the parameters (x, y) are the co-ordinates of a point on it. Math.atan2 will return the angle in radians from the origin to that point.

The documentation says some stuff about circles, which may make more sense for the radians, but I like my analogy better :P

Anyway; this is my five minute code for this:

var rads:Number = Math.PI / 180; // Conversion factor for radians / degrees
var angle:Number;
var ob:MovieClip = _root.whatever's following; // For readability :S
onEnterFrame = function():Void{
angle = Math.atan2(_xmouse - ob._x, _ymouse - ob._y);
ob._rotation = angle / rads;
ob._x += (_xmouse - ob._x) * 0.2;
ob._y += (_ymouse - ob._y) * 0.2;
}

[Chaz]

Nice tutorial, a good concept for certain games.

[Yhtomit]

Hey, for some reason my flash doesn't like the codes, it says they need an onClipEvent handler. What is that?

Kinda an AS noob, except for buttons, I can do buttons.

[Sinvader]

At 9/30/07 07:43 AM, Yhtomit wrote: Hey, for some reason my flash doesn't like the codes, it says they need an onClipEvent handler. What is that?

Kinda an AS noob, except for buttons, I can do buttons.

Do this:
onClipEvent (enterFrame) {
CODE CODE CODE
}

It's needed so that it can execute the code every frame.

[DarrkOne]

That's excellent, thank you very much for posting this, but my character is a circle with and eye. So how can I make it not look like he is upside down when he faces in the opposite direction?