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

var w = frank.image.width;
var h = frank.image.height;
var blur = new createjs.BoxBlurFilter(5, 5, 1);
frank.filters = [blur];
frank.cache(0, 0, w, h);
stage.update();
}

Not ■ the filter classes are not included in the single easelJs file. they are all contained in a separate folder called
filters and must be individually included in your document. this folder was included in your downloading of easelJs.

An important thing to note when it comes to filtering is that the display object must be cached for the effect to
take place. To use caching, you need to provide the bounds of the cache, which is supplied here by the frank bitmap
image. By caching the bitmap, it is drawn into a new canvas, which will be used for its future drawing to the stage.
Because of this, the caching must come after you assign the filter. If at any time you wish to update your display object,
the update method must be called on cache so your updates will be seen in subsequent draws. This blur effect on
Frank is shown in Figure 5-4 .

Figure 5-4. Blur effect applied to first character

Not ■ it is recommended that you never cache a simple bitmap; however, it is essential when applying filters.

As previously mentioned, the filters property is actually an array. Even if you only apply one filter, it must be
assigned as an array. When you applied the blur filter to Frank, it was built as an array that contained one filter.

frank.filters = [blur];

The final effects example will demonstrate how you can apply multiple filters to a bitmap. The same blur filter
will be used to go along with a new effect using the ColorFilter class. Listing 5-6 adds some filters to the final
characters.