Multiply Defense - HTML5 Game Development - page 120

The CreateJS namespace
If you find it too long to call createjs every ime, it can be aliased to a shortened form.
For example, the following code aliases it to a c variable:

var c = createjs;

We can even remove the namespace by assigning it to window :

createjs = window;

Having the JavaScript logic separated into placeholders helps you define the role clearer
before we add too much code to it. We have the game view to render things on the canvas,
input for taking buton-clicking events, and calculaion for the muliply mathemaics.

Classified intel
The canvas only redraws whenever the stage.update() method is called. It is because
rendering is a CPU ime-consuming task. In EaselJS, we can freely change what we want
to display by adding or removing display objects. However, the screen only redraws and
updates when we explicitly call the stage.update() method. This helps us to improve
the performance because we can have a batch update to the game structures and redraw
the whole stage in only one call. Otherwise, the CPU will be overloaded with too many
drawing requests if we redraw every ime we add a new child.

The following table demonstrates the diferent concepts between drawing every ime and
drawing only in the stage.update() method:

Rendering Rendering

Data Data

addchild () draw addchild ()

addchild () draw addchild ()

for (.....) { for (.....) {

addchild () keep drawing addchild ()

} }

stage.update() draw

It's worth noing that we can clear and redraw only part of the canvas
if we use the naive canvas API. This gives us more control and further
helps to improve the performance. We can set stage.autoClear to
false if we need to manually clear the canvas.