Game Development Reference
In-Depth Information
Listing 1-2.
Drawing and Moving Graphics with EaselJS
function drawButterflies() {
var imgPath = 'images/butterfly.png';
butterfly1 = new createjs.Bitmap(imgPath);
butterfly2 = new createjs.Bitmap(imgPath);
butterfly3 = new createjs.Bitmap(imgPath);
butterfly2.x = 200;
butterfly3.x = 400;
stage.addChild(butterfly1,butterfly2,butterfly3);
stage.update();
setTimeout(moveButterfly, 1000);
}
function moveButterfly(){
butterfly2.y += 200;
stage.update();
}
As you can see, the EaselJS API makes your code much more clean and manageable. You can refer to and
transform what you see on screen as if they were retainable objects, and not get bogged down with the details of what
actually connects your graphics with the logical display objects that are created to represent them. Again, the things
you see on the canvas are never the same as an object that holds its properties, but merely a graphical representation
of it. But you don't need to worry about this because EaselJS will manage that for you. If you tell the butterfly to move,
it will move. Much nicer!
You'll also notice that you are adding graphics to and updating an object named
stage
. This is a reference to
Stage
, the root display object in which all graphics are drawn to with EaselJS. I will be covering this in depth before
starting the actual exercises, which will begin in the next chapter.
Let's take one more look at the power of EaselJS before moving on with the rest of the suite. As you can imagine,
layers will be playing a large role in your graphics management when it comes to game development. With
Canvas
,
any pixel drawn in the same coordinates of another will completely erase and replace it. By now that should seem
clear so its no surprise that controlling graphics that overlay each other can quickly become difficult to manage.
Luckily, EaselJS consists of the concept referred to as the
display list
. With it you are able to easily add and
remove graphics, manipulate the order in which they are drawn, access them by their index in the list, and a whole lot
more. I will be covering the display list in more detail later in this section.
Using the previous dry erase board analogy, let's consider one more scenario. This time, each board consists of
two butterflies, each with one butterfly slightly overlapping another. Imagine swapping the depths of the butterflies
on the magnet board. Once again you're able to quickly accomplish this, this time by simply grabbing both butterflies
and replacing one's layer with the other.
Using DOM and jQuery, you might do something like this:
$('#butterfly1').css('z-index',1);
$('#butterfly2').css('z-index',2);
Simple enough; just move your butterflies. But with the dry erase board you'd have no other choice but to
erase both butterflies and redraw them. Again, this is exactly how you would do it with
Canvas
. You'd draw your two
butterflies slightly overlapping using the drawing techniques in the previous
Canvas
API example. Then, when it
comes time to swap their layers, you'd have to erase the current graphics and redraw your butterflies. Only this time
you'd change the
order
in which you drew them (see Figure
1-4
). This provides the illusion of depth swapping.
To manage those depths, and the depths of every graphic in your game, you'd need to come up with a system to factor
the order in which your graphics are drawn and execute the code accordingly when drawing.
