Game Development Reference
In-Depth Information
At first glance, the initial drawing of the graphics doesn't seem too complicated. You draw your graphic by
passing in a reference to the loaded image plus some coordinates and dimensions that dictate what you grab from the
loaded bitmap and where to draw it on the canvas.
Now take a look at the function that moves your second butterfly. You are responsible for not only redrawing
your graphics again with newly calculated positions, but clearing all of your previous graphics as well. If you didn't
first clear the canvas before redrawing your butterfly in its new position, you'd end up with four butterflies
(see Figure
1-3
).
Figure 1-3.
Results when not first clearing your canvas before drawing new positions
In this example, you are simply hardcoding the new position of the second butterfly, but as you add more and
more sprites to your games, the management of what gets drawn, when you draw, and where you draw it becomes
increasingly difficult to maintain.
EaselJS with HTML5 Canvas
Elegant canvas management is where EaselJS comes in. It handles the heavy lifting of managing and drawing graphics
so you can concentrate on your game logic, thus making your games as fun and enjoyable as possible. You can rest
assured that your sprite objects will be properly drawn and moved appropriately so you can focus on the shelf life and
behavior of these game assets while remaining completely decoupled from the rendering process.
Let's take a quick look at what this code might look like if you were doing the exact same thing using EaselJS
(see Listing 1-2).
