Using and Managing Bitmap Images - Beginning HTML5 Games with CreateJS - page 76

queue.loadManifest([
{id:"frank", src:"img/frank.png"},
{id:"v1", src:"img/villager1.png"},
{id:"v2", src:"img/villager2.png"}
]);
}
function drawCharacters(){
stage = new createjs.Stage('canvas');
var frank = new createjs.Bitmap(queue.getResult('frank'));
var villager1 = new createjs.Bitmap(queue.getResult('v1'));
var villager2 = new createjs.Bitmap(queue.getResult('v2'));
frank.y = villager1.y = villager2.y = 40;
frank.x = 20;
villager1.x = 190;
villager2.x = 360;
stage.addChild(frank,villager1,villager2);
stage.update();
}
As you can see in the previous example, the ids that were assigned to the assets when loading them via PreloadJS
are accessible when creating new bitmap objects. Figure 5-2 shows this result, which lines the bitmap characters up
across the stage.
Figure 5-2. Three bitmap objects added to the stage
Adding Effects
You can add some interesting effects to bitmaps using EaselJS. Although these effects are not exclusive to bitmaps,
we'll discuss how you can use them by applying them to the previously used characters. A pretty common effect is a
drop shadow, which can easily be applied to bitmaps. Listing 5-4 shows the updates in bold. The result is shown in
Figure 5-3 .