Game Development Reference
In-Depth Information
Chapter 5
Using and Managing Bitmap Images
You've made it this far without loading in a single asset for the visuals in your games, but a nicely polished game is
going to need some better graphics. Drawing to the canvas from loaded bitmap graphics is a breeze with EaselJS and
will instantly start making your games look professional. We'll be covering the use of bitmaps in this chapter.
We'll also dive into the management of bitmaps, along with other display objects. As your game elements get
more complex, it becomes extremely difficult to manage them all on the stage. Grouping these assets into containers
will make the world of difference when managing your visual assets.
Bitmaps
When drawing a single loaded bitmap onto the stage, you use the
Bitmap
class. An instance of
Bitmap
is a display
object and will be treated the same as your shapes when altering properties and animating. For instance, you could
easily update your Progressive Break-it game to use loaded bitmap graphics, instead of drawing shapes, and all of the
game code would work just fine. EaselJS includes many interesting methods for manipulating bitmaps, which allows
us to do many cool effects on the pixels. You'll learn about these and other cool effects, but first, you must get the
bitmap on to the stage.
Adding Bitmaps to the Stage
There are a few different ways of getting bitmaps on to the stage. The first, and simplest, approach is to simply pass the
path to the image as a string into the new
Bitmap
instance.
var frank = new createjs.Bitmap('img/frank.png');
With this new bitmap object, you can add it to the stage and manipulate it like any other display object.
Listing 5-1 shows the bitmap positioned on the stage, with an alpha of 50 percent.
Listing 5-1.
Bitmap Object Added and Faded on the Stage
var frank = new createjs.Bitmap('img/frank.png');
stage.addChild(frank);
frank.x = 100;
frank.y = 40;
frank.alpha = .5;
stage.update();
A new, semi-transparent bitmap is shown in Figure
5-1
.
