Multiply Defense - HTML5 Game Development - page 119

Objective complete - mini debriefing
Game view is responsible for drawing things on a canvas. For this project, we are going to
use EaselJS for most of the canvas drawings.
It is recommended that you check their documentaion in order to have a big picture of what
classes and funcionaliies it provides. The following is the EaselJS documentaion URL:
http://createjs.com/Docs/EaselJS/modules/EaselJS.html
We used the Text class to draw a Hello message on the canvas. It takes three parameters:
text value, font style, and text color. All the three parameters are of string type. The format
of the font's style and text color is the same as how we define them in CSS. We can use color
name, Hex code, or the rgba funcion.
Why use library to draw on a canvas?
Canvas is stateless. It is like a real paining canvas. Once you have drawn something on it,
there are just colors.
We need logic to keep track of things and then redraw it every ime on a canvas.
The libraries, including EaselJS, help us manage objects and draw on a canvas for us.
Note that all the classes in the CreateJS suite have namespace
createjs . It prevents conflicts on the other variables. This is why we
used createjs.Text when referring to the EaselJS's Text class.
The addChild method
The simplest way to display anything in the EaselJS-controlled canvas is by adding it to
the stage using the addChild method. Don't confuse the addChild method with the
appendChild method from JavaScript. We are not adding new DOM elements to the
game. We are handling all the game object hierarchies inside the canvas tag. We also
manage the children hierarchy in JavaScript and draw them on the canvas.
We can think of the canvas area as a stage. Throughout the development, we will keep on
adding things to the stage.
We will learn more on adding children to a non-stage object in the next task when creaing
numbered boxes.