Game Development Reference
In-Depth Information
Figure 5-1.
Bitmap object added to stage and faded
With this approach, EaselJS will load in the image from the path you pass into it. This approach might work in
some situations, but if the image was not yet loaded, it won't appear until the next stage update. In games, the slightest
delay in graphic rendering can make your game look pretty bad. It's better if you already know that your asset is
loaded before attempting to create and add a bitmap to your game.
Let's try another approach, where you will pass an
Image
JavaScript object into the constructor, as opposed to a
string. Listing 5-2 shows this alternative approach.
Listing 5-2.
Image Object Used to Create Bitmap Object
var img = new Image();
img.addEventListener('load', drawFrank);
img.src = 'img/frank.png';
function drawFrank(e){
var frank = new createjs.Bitmap(e.target);
stage.addChild(frank);
stage.update();
}
With the bitmap loaded, you can be assured that it will show the moment you add it to the stage. However, you
can do even better by using PreloadJS to load in the assets, and using their
ids
to pass into the new bitmap objects.
Listing 5-3 loads in three bitmap assets and aligns them along the stage.
Listing 5-3.
Three Bitmap Objects Created Using PreloadJS
var stage, queue;
// onload
function preload() {
queue = new createjs.LoadQueue();
queue.addEventListener("complete", drawCharacters);
