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

Figure 2-8. Square rotating on center axis

Using regX and regY on your shape object forces the graphics registration point to be where you specify it. In this
case, you know that your square is 100 pixels tall and 100 pixels wide, so hard-coding its new registration point is easy
to accomplish.

■ When it comes to drawing shapes, you can alternatively accomplish this by offsetting the x and y position of
where you start drawing your graphics.

Note

This gives you a much better result. You also have a more exact measurement on where you want to position your
sprites. Because your 0 x and y values are now in the center, you can easily position the sprite in the center of the stage
by factoring in the width and height of the canvas.
You've just seen how easy and convenient tweening custom shapes can be but it's not always an ideal situation
when animating game sprites around the stage. For example, imagine that you have several random power pellets
bouncing around your level. A tween is great for one-off animations but not for the continual motion needed for many
game elements.
A typical technique for animating game sprites is to utilize the game loop by setting up an update/render process.
This technique usually first calls some sort of update method that evaluates your sprites' current positions and sets
them up with new properties for rendering to the next desired locations. The render method then simply renders the
sprites by using the new temporary properties, typically assigned to each sprite during the update process.
You can use the tick method created by Ticker to call on these two functions. In this example, you have a circle
that simply moves across the stage.

function updateCircle () {
var nextX = circle.x + 5;
circle.nextX = nextX;
}

function renderCircle () {
circle.x = nextX;
}