Game Development Reference
In-Depth Information
Listing 3-14.
DOMElement Class Used to Add HTML Text to Your Game Screen
var el = new createjs.DOMElement(instructions);
el.alpha = 0;
el.regX = 200;
el.x = stage.canvas.width / 2;
stage.addChild(el);
createjs.Tween.get(el).wait(1000).to({y:40, alpha:1},2000,
createjs.Ease.quadOut);
The
id
of the
div
is what gets passed into the
DOMElement
constructor. Notice that the
visibility
style for this
div
is set to
hidden
. This is done so it is initially hidden and you don't get any unwanted flickers before it's “added” to
the stage and positioned. Once you update the
DOMElement
's
alpha
property, the
DOM
element will adhere and become
visible. In the example here, the alpha is tweened up while it animates slightly down the screen.
Figure
3-7
shows how much more control you have over text formatting by using
HTML
elements and the
DOMElement
class.
Figure 3-7.
HTML elements using HTMLElement
■
it is recommended that you wrap any elements you wish to include using
DOMElement
within the same
div
as
your easelJs
Canvas
element. this will ensure best results for positioning in your application.
Note
Let's wrap up the chapter with another simple game example. Using interaction and text objects, a Hangman-like
game will make a perfect demonstration of utilizing the skills you've learn in this chapter.
