Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Luken

Rotating around center with EaselJS, not always registration point is set

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a problem, and can't tell if this is EaselJS or GSAP, but I think answer can be useful for users of GSAP :) . I'm loading bunch of images, and then trying to rotate them around center, but sometimes it doesn't work, I mean - they are not rotating around center, but 0,0. I'm not sure what I'm doing wrong, could someone help me?

 

I'm loading bunch of images like that:

 

var img_all = 2;

cloud1.src = "/images/cloud1.png";
cloud1.onload = imageLoader(img_all);
cloud1 = new createjs.Bitmap(cloud1);

cloud2.src = "/images/cloud2.png";
cloud2.onload = imageLoader(img_all);
cloud2 = new createjs.Bitmap(cloud2)
 

And here is my function that tries to set reg. points after all images will be loaded:

 

var img_comp = 0;
function imageLoader(img_all) {
img_comp++;

if(img_all == img_comp) {
  cloud1.y = 350;
  cloud2.x = 400;
  cloud2.y = 300;
  cloud1.regX = cloud1.image.width/2;
  cloud1.regY = cloud1.image.height/2;
  cloud2.regX = cloud2.image.width/2;
  cloud2.regY = cloud2.image.height/2;


  TweenMax.to(cloud1, 30, { rotation: 360, repeat: -1, ease:   Linear.easeNone });
  TweenMax.to(cloud2, 40, { rotation: 360, repeat: -1, ease: Linear.easeNone });



  TweenMax.ticker.addEventListener("tick", draw);

  }
}
 

But still sometimes, they are just rotating around 0,0 instead of center, what can be done better?

 

Regards.

Link to comment
Share on other sites

I would first remove TweenMax from the equation and see if just using rotation works... and how often.

cloud1.rotation = 45;
cloud2.rotation = 45;
 

 

If it appears that is not accurate 100% of the time, I would try to verify that each image has a readable width and height prior to doing the offset.

 

console.log(cloud1.image.width) // or similar

 

If you can narrow the problem down to only happening when TweenMax is involved, please provide a zip of a reduced test case that we can view.

 

Please let us know what you find.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×