Rotation mouse follower with easing

Question

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 Answer

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/SmartRotationPlugin.as?r=9

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/

dmennenoh · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded