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

Listing 5-4. Drop Shadow Effect on Bitmap Object
function drawCharacters() {
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);
villager1.shadow = new createjs.Shadow('#000', 5, 5, 8);
stage.update();
}
Figure 5-3. Drop shadow effect applied to second character
Now the first villager has a nice drop shadow applied to it, which gives it a little more depth. There are a handful
of other interesting effects that are bundled in with CreateJS as well. Unlike shadow , which is a direct property of
display objects, these other effects are applied via the filters property. This property is an array, so you can apply
more than one filter to the object. To apply a filter, you must first instantiate one of the handful of filter objects
included in EaselJS. Let's start with a blur effect on Frank (see Listing 5-5).
Listing 5-5. Blur Effect on Bitmap Object
function drawCharacters() {
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);
villager1.shadow = new createjs.Shadow('#000', 5, 5, 8);