Game Development Reference
In-Depth Information
Figure 1-4.
Image depth swapping on Canvas
It's no surprise that this can be handled in a much simpler way using the EaselJS API. Since all of your drawing is
taken care of, including the depths of those drawings, this is accomplished with one simple line of code.
stage.swapChildren(butterfly1,butterfly2);
This is a fine example of the power we have in graphic management and it's all due to the concept of a display list,
which EaselJS is built upon. Anything in a display list is referred to as a
child,
and the collective items in that stack are
referred to as
children.
In the examples so far, your butterflies are
children
of the
stage
object.
There are several handy methods that let you quickly access, manipulate, and remove these “stacked” children on
your stage. The following are a few of these key methods and they will be used in depth throughout the examples and
games in this topic:
addChild
•
removeChild
•
removeAllChildren
•
getChildAt
•
setChildIndex
•
These are just to name a few but are probably the most used when it comes to game development. A full list of methods
used to control the display list can be found at
www.createjs.com/Docs/EaselJS/classes/Container.html
. Because of
this display list and the API to control it, you can completely ignore the tedious tasks of drawing management and
concentrate on what, when, and why your graphics should appear or go away. It's the one key concept that makes
EaselJS such a powerful and easy-to-use library for drawing to the canvas.
You'll see much more EaselJS magic as you progress in the topic and start making your games, but let's look at the
rest of the suite. We'll move on to animation.
TweenJS
TweenJS is a powerful, lightweight tweening engine that helps you easily animate your display objects in Easel.JS.
In fact, you can use TweenJS to tween just about anything, including DOM elements and even sounds. Since you are
only concerned about EaselJS and how to use it for games, I will only be covering its use with your easel graphics.
