transformAroundCenter, sprite drifts over rotations?

[andytwoods 3 Likes (Newbie)]

Hi there,

 

It could be that my own code is interferring, but I'm seeing a slow drift of Sprites (containing png) when I use transformAroundCenter (where duration = 0 and angle is governed by mouse position):

TweenMax.to(us,duration,{transformAroundCenter:{rotation:angle}});

Here's a video of the behaviour:

http://www.youtube.com/watch?v=ENfDcnk6xq4&feature=youtu.be

 

Any tips on forcing a static xy position?

 

thanks,
Andy.

 

 

[andytwoods 3 Likes (Newbie)]

Any tips too on antialiasing when I'm rotating?  thanks!

[GreenSock 16,307 Likes (Superhero)]

What version of TransformAroundPointPlugin are you using? Please make sure you've got the latest one, and then if you're still having trouble, shoot us a simple FLA that we can publish on our end to see the issue clearly reproduced. We'd love to help (it's just tough to do when we can't see the problem in context)

[andytwoods 3 Likes (Newbie)]

Hi,

 

I just upgraded everything to the latest version. Still getting the prob.

 

Here's a swf and here's a fla with a minimal demo of the problem.

 

Thanks,
Andy.

import com.greensock.TweenMax;
import com.greensock.plugins.TransformAroundCenterPlugin;
import com.greensock.plugins.TweenPlugin;

TweenPlugin.activate([TransformAroundCenterPlugin]);

var sha1:Shape = new Shape();
sha1.graphics.beginFill(0x000222,.5);
sha1.graphics.drawRect(0,0,100,200);

var sha2:Shape = new Shape();
sha2.graphics.lineStyle(1);
sha2.graphics.drawRect(0,0,100,200);

addChild(sha1);
addChild(sha2);

sha1.x=sha2.x=100;
sha1.y=sha2.y=100;


stage.addEventListener(MouseEvent.MOUSE_MOVE,rotateL);

var angle:Number = 10;


function rotateL(e:MouseEvent):void{
	angle+= 1;
	TweenMax.to(sha1,0,{transformAroundCenter:{rotation:angle}});	
}

[GreenSock 16,307 Likes (Superhero)]

The problem you're running into simply has to do with the way Flash rounds things internally when it applies transforms, and I'm not aware of any pure "fix", although I do have a suggestion for your code that would largely resolve things. 

 

Just to be clear about what's happening, let's say the plugin tells Flash that after applying your rotation, x should be 10.438752 and y should be 2.1547823. Flash simply rounds those to the nearest 10th or sometimes 100th. GSAP can't really do anything about that - Flash simply imposes that behavior. You'd never notice that visually on a single iteration, but those little rounding tweaks add up over time. So the next time the plugin has to calculate the center, Flash has shifted it just a tiny bit. 

 

You can replicate this yourself by using getBounds(), doing a rotation, and then reposition the x/y where they're supposed to be, and then do it again. 

 

The solution is for you to just use a consistent point instead of having the plugin re-calculate the center each and every time. You can initially calculate the center and feed that into the TransformAroundPointPlugin, like this:

TweenPlugin.activate([TransformAroundPointPlugin]);

var sha1:Shape = new Shape();
sha1.graphics.beginFill(0x000222,.5);
sha1.graphics.drawRect(0,0,100,200);

var sha2:Shape = new Shape();
sha2.graphics.lineStyle(1);
sha2.graphics.drawRect(0,0,100,200);

addChild(sha1);
addChild(sha2);

sha1.x=sha2.x=100;
sha1.y=sha2.y=100;

var bounds:Rectangle = sha1.getBounds(sha1.parent);
var point:Point = new Point(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);

stage.addEventListener(MouseEvent.MOUSE_MOVE,rotateL);

var angle:Number = 10;

function rotateL(e:MouseEvent):void{
	angle+= 1;
	TweenMax.to(sha1,0,{transformAroundPoint:{point:point, rotation:angle}});	
}

I hope that clears things up. 

[andytwoods 3 Likes (Newbie)]

Awesome! Thanks for the solution

Had an inkling it may be something to do with rounding issues but thought better ask the experts.

cheers,
Andy.

[andytwoods 3 Likes (Newbie)]

Hi again,

just trying out this code.  I'm getting no movement.

Thanks,

Andy.

[GreenSock 16,307 Likes (Superhero)]

I just double-checked. Works fine for me - you're moving your mouse, right? And you've got the plugin file and it's activated? No error messages?

[andytwoods 3 Likes (Newbie)]

Hi, no errors.

This is bizarre.  Just uploaded the swf.

Pasting my code below as I must have mucked something up!

import com.greensock.TweenMax;
import com.greensock.plugins.TransformAroundPointPlugin;
import com.greensock.plugins.TweenPlugin;

TweenPlugin.activate([TransformAroundPointPlugin]);

var sha1:Shape = new Shape();
sha1.graphics.beginFill(0x000222,.5);
sha1.graphics.drawRect(0,0,100,200);

var sha2:Shape = new Shape();
sha2.graphics.lineStyle(1);
sha2.graphics.drawRect(0,0,100,200);

addChild(sha1);
addChild(sha2);

sha1.x=sha2.x=100;
sha1.y=sha2.y=100;

var bounds:Rectangle = sha1.getBounds(sha1.parent);
var point:Point = new Point(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);

stage.addEventListener(MouseEvent.MOUSE_MOVE,rotateL);

var angle:Number = 10;


function rotateL(e:MouseEvent):void{
	angle+= 1;
	TweenMax.to(sha1,0,{transformAroundPoint:{point:point, rotation:angle}});	
}

[andytwoods 3 Likes (Newbie)]

my previous code (transformAroundCenter) also does not work now.  This must be related to me upgrading my greensock classes recently.  Let me check to make sure everything is good.

[GreenSock 16,307 Likes (Superhero)]

Yeah, it sounds like a problem on your end (I think). I copied/pasted my code from above and it worked just fine. Did you download the bonus files from your Club GreenSock membership? Remember, those plugins are members-only benefits. Log into your account at https://www.greensock.com/account/. I wonder if maybe you downloaded the public zip instead of the members-only one from your account. 

[andytwoods 3 Likes (Newbie)]

Sorry, I know the problem.

I edited my Greensock to avoid Flashbuilder complaining about this sort of code:

if((a=2))trace(123).

to

if(true==(a=2))trace(123).

 

Let me see if reverting fixes this.

[andytwoods 3 Likes (Newbie)]

OK, yes, it was me mucking stuff up with that 'make Eclipse happy' hack.

 

Sorry!