Game Development Reference
In-Depth Information
You can later change or concatenate the text value by accessing its
text
property.
var txt = new createjs.Text("0", "20px Arial", "#ff7700");
txt.text = "Score: ";
txt.text += 1000;
stage.addChild(txt);
stage.update();
An important thing to remember when working with EaselJS text is that it is basically no different than drawing
any other type of graphic to the
Canvas
. Once it's drawn, there is no direct way of selecting it. Inline styles are also
impossible with EaselJS text, so if you need to format specific words or characters within your text, you'll have to
create new text objects and position them appropriately.
This type of formatting is not often needed with game elements, so for the most part you'll get by just fine with
Text
. However, if you need more control over formatting, EaselJS provides a cool way to build and position a
DOM
element within your application.
DOMElement Class
The
DOMElement
class can be added to the stage and act as if it were an actual child of the parent. Since it's actually a
DOM element, it is placed above your canvas and positioned relative to the container you added it to.
var domElement = new createjs.DOMElement(htmlElementID);
domElement.x = domElement.y = 50;
stage.addChild(domElement);
As you can see, you treat this object like any other display object when adding to the stage in EaselJS. This can be
handy when coding tooltips that need to extend past the canvas, or in an instructions screen for a game.
Let's look at this in action by building some HTML text, shown in Listing 3-13, which can be added to a game
screen within an Easel application, shown in Listing 3-14.
Listing 3-13.
HTML Elements to be Displayed Within Your Easel Application
<div id="gameHolder">
<div id="instructions" style="width: 400px;height: 300px;border: dashed 2
#008b8b;text-align: center;">
<h3 style="font-family:arial;">Game Instructions</h3>
<p><strong>Click</strong> on the <span style="color:red">RED</span>
balloons as they fall from the sky.</p>
<p>Make sure you click them <span style="text-decoration:
underline">all</span> before time runs out!</p>
<p>Rack up <i>as many points</i> as you can to reach the <span
style="color:blue">BLUE</span> level.</p>
<h2 style="font-weight: bold;margin-top:30px">GOOD LUCK!</h2>
</div>
<canvas id="canvas" width="500" height="400" style="border: black solid
1px"></canvas>
</div>
