Making and Animating Graphics - Beginning HTML5 Games with CreateJS - page 23

Listing 2-3. Rotating a Square 360 Degrees Using Tween
var g = new createjs.Graphics();
g.beginStroke('#000').beginFill('#FF0000').drawRect(0, 0, 100, 100);
var square = new createjs.Shape(g);
square.x = 150;
square.y = 100;
stage.addChild(square);
createjs.Tween.get(square).to({rotation:360},3000);
Figure 2-7. Square rotating on upper left axis
You first draw your square and center it on the stage. You are able to quickly rotate it just fine but there is a clear
problem. Your goal is to have your square spin dead center in the middle of the stage. The issue is that the registration
point defaults to the upper left corner of the square, which acts as its axis point for the rotation. This can be an
undesirable effect on many of your game sprites so it's best in most situations to have your registration points in the
center (see Listing 2-4). This results in a centered rotating shape like the one in Figure 2-8 .
Listing 2-4. Rotating a Square with a Centered Registration Point
var g = new createjs.Graphics();
g.beginStroke('#000').beginFill('#FF0000').drawRect(0, 0, 100, 100);
var square = new createjs.Shape(g);
square.regX = square.regY = 50;
square.x = stage.canvas.width / 2;
square.y = stage.canvas.height / 2;
stage.addChild(square);
createjs.Tween.get(square).to({rotation:360},3000);