Rotation mouse follower with easing

[Guest]

I am terrible at math and am having an issue accomplishing my goal.

http://www.newgrounds.com/dump/item/6e5cde6c6b94de74119aac82c43312d2 - Example

It works just fine, but what im looking to do is have each object follow the rotation at different speeds. I want each MC to have "Easing"

I cant figure out how to make it rotate a little slower than the mouse itself. It follows just dead on, same speed that the mouse moves, it moves.

MovieClip linked to mcMouseFollower.as Class,

On my main Class I have the following:

package {

  import flash.display.*;

  import flash.events.Event;

  public class MAIN extends MovieClip {

  public var follower:mcMouseFollower;

  public function MAIN () {

  // constructor code

  follower = new mcMouseFollower();

  follower.x = stage.stageWidth / 2;

  follower.y = stage.stageHeight / 2;

  stage.addChild (follower);

  stage.addEventListener (Event.ENTER_FRAME, frameLoop);

  }

  public function frameLoop (event:Event):void {

  // find out mouse coordinates to find out the angle

  var cy:Number = stage.mouseY - follower.y;

  var cx:Number = stage.mouseX - follower.x;

  var Radians:Number = Math.atan2(cy,cx);// find out the angle

  var Degrees:Number = Radians * 180 / Math.PI;// convert to degrees to rotate

  // rotate

  follower.rotation = Degrees;

  }

  }

}

[Elliot_Mebane · Accepted solution]

To do this manually you will need to find the change in rotation between follower.rotation and the calculated Degrees. Then you apply some portion of that difference. So if you wanted to have the follower's rotation move 1/10 of the way towards the desired destination each frame, calculate the change in rotation needed to point at the mouse, then multiply that by 0.1 and apply that modified rotation to follower.rotation. This won't work exactly like the tweens that you configure in Flash because it won't have an exact end time. Instead, each frame the rotation cuts the new rotation difference by half. It'll look like an ease-out. You can check when it is close-enough (e.g., the difference is less than 1 degree) and just snap to your final rotation instead of continuing to move halfway there.

You'll want to be aware of how the rotation degrees work. Pointing right is 0 degrees, rotation clockwise from there is positive, going to 180 which is pointing left. Starting at 0 degrees and rotating counter clockwise causes the rotation value to decrease, moving into negative numbers, from 0 to -180 (pointing left). So when you try to tween a value through the left direction you encounter a problem since the numbers jump from -180 to +180 at that point.

To solve that *West* problem, you detect if the rotation needs to change by more than 180 and you adjust accordingly so the rotation direction moves the shorter distance to the target rotation rather than the long way around. The calculation in the SmartRotationPlugin from the GTween package is a good way to handle this:

https://code.google.com/p/pipoca/source/browse/trunk/classes/com/gskinner/motion/plugins/SmartRotati...

Here's the adjusted code (starting after your Degrees calculation):

  var deltaDegrees:Number = Degrees - follower.rotation;

  deltaDegrees %= 360;

  if (deltaDegrees > 180)

  {

  deltaDegrees -=  360;

  }

  else if (deltaDegrees < -180)

  {

  deltaDegrees +=  360;

  }

  // rotate

  // follower.rotation = Degrees;

  follower.rotation +=  deltaDegrees * 0.1;

You may also want to consider using a tween engine like GTween for your tweening: http://www.gskinner.com/libraries/gtween/

[Guest]

AMAZING ANSWER!

Thank you so much, I really appreciate that you took the time to explain everything instead of just dropping in some code for me to copy and paste! This is awesome, TY for the links aswell.

[dmennenoh]

GTween is not a very good tweening engine. Use Greensock's libraries - TweenLite, TweenMax. And they work in JavaScript...