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

Ticker
The Ticker class provides a main interval that is crucial to games development. Its primary purpose is to be that
centralized area that calls your code to update the stage, which will reflect upon all added, deleted, and updated
sprites that exist in the game. The frequency in which this occurs is referred to as the game's frame rate.
A typical desirable frame rate is around 60 frames per second, or 60fps. This means that the stage would need to
be updated 60 times every second. This rate can be adjusted accordingly depending on the complexity and speed of
your game. You typically want to get away with the smallest fps as you can without visually hampering the look and
feel of the gameplay. Just remember that the higher your frame rate is, the more taxing it will be on the memory of
your computer or device, which can be detrimental to the performance of your game.
Let's take a look at Listing 2-1 to see this in action.

Listing 2-1. Setting Up the Stage and Ticker

var stage;

// called when the body is loaded
function setupStage() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
}

function tick(e) {
stage.update();
}

This is the bare-bones setup that you'll be using for most of the upcoming examples and games you'll be building in
this topic. This Ticker function can also be used to manage what is known as a game loop and can be used for other things
such as managing game states. You'll be getting into those game techniques later in the topic, but for now you'll use this simple
approach to assure that your graphics will render appropriately when updating your children in the stage's display list.

■ Note When using tweenJs, it is essential that the stage is constantly updated by using this or a similar approach.

Before you finally move on to creating graphics and adding them to the stage, let's consider one more
performance technique. As convenient as it may be for you to update the stage at a constant rate, it might not always
be necessary. If nothing is changing on the screen, such as a static Game Over screen, why clear and redraw it on
every tick? The fact is you really don't need to. There is no internal management within the Easel framework to
prevent redrawing unchanged properties on any existing display objects so you need to manage this yourself. This can
easily be achieved by setting the Ticker to paused .
Take a look at the following example, which sets the Ticker to paused , and how it's handled in the Ticker 's
handler function:

createjs.Ticker.setPaused(false);

function runGame(e){
if(!e.paused){
stage.update();
}
}