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

Figure 5-7. X-ray bear, using two bitmaps and a moveable mask
Clipping is another technique that can be used with bitmaps. When you create a new bitmap and add it to the
stage, the entire bounds of that bitmap are used. However, you don't need to use the entire image if you wish to only
display a portion of it. This can be accomplished by using the sourceRect property, which takes a Rectangle object.
The following is a sample of this technique being used:
var piece = new createjs.Bitmap('img/mam.png');
var rect = new createjs.Rectangle(100, 100, 100, 100);
piece.sourceRect = rect;
The Rectangle object is part of the EaselJS API, and takes four parameters: x , y , width , and height . These values
will be used as the area of the bitmap image that you want to display in the bitmap object. This is accomplished
simply by assigning the bitmap objects sourceRect to the rectangle.
Let's take this a bit further and create two bitmaps from the same image, and add them to the stage, shown in
Listing 5-9. Figure 5-8 demonstrates the final result.
Listing 5-9. Using sourceRect to Clip Bitmap Graphics
var bmp1 = new createjs.Bitmap('img/mam.png');
var bmp2 = new createjs.Bitmap('img/mam.png');
var rect = new createjs.Rectangle(0, 0, 200, 200);
bmp1.sourceRect = rect;
rect = new createjs.Rectangle(200, 400, 200, 200);
bmp2.sourceRect = rect;
bmp1.x = 20;
bmp2.x = 240;
bmp1.y = bmp2.y = 20;
stage.addChild(bmp1, bmp2);
stage.update();