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

[Luken]

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.

[Carl]

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.