Getting to Know CreateJS - Beginning HTML5 Games with CreateJS - page 2

Here you can gain access to the latest builds of the suite, as well as view official tutorials and a showcase of recent
projects using the suite. Be sure to view this showcase to get an idea of the cool things you can do with CreateJS. You'll
also notice the highly-detailed documentation that is available for each library in the suite. Along with being one of the
largest JavaScript libraries out there today, CreateJS has amazing documentation to go with it. As you progress in your
learning of the suite, these documents will prove to be priceless in extending your skills and optimizing your code.
To acquire the necessary libraries, click the download button on the home page of the site. You'll be taken to
https://github.com/CreateJS/ where you can download all of the latest builds. For this topic you'll need all four
libraries in the toolset.
At the time of writing this topic, the following versions were used:

• TweenJS version 0.5

• PreloadJS version 0.4

• EaselJS version 0.7

• SoundJS version 0.5

These four libraries are everything you need to draw and animate graphics, play sound effects and music, and
preload your game assets. You'll be using one or more of these libraries throughout the code examples that you'll
build in this topic. Place them in an area where you can easily include them in your documents while following along
with the exercises. I suggest creating a project directory and placing these libraries in a folder named lib so that you
can easily set up your files for each exercise to match the code listings.
Let's start by taking a look at the most important tool in the suite when building HTML5 games.

EaselJS
EaselJS is by far the most frequently used tool in the suite when building games. It's where all graphics and
interactivity are managed and drawn to an HTML5 Canvas element. The API is based on a hierarchal display list that
should be very familiar to anyone that has worked with Flash and ActionScript 3.0. Along with a core interaction
model and various helper classes, EaselJS makes working with canvas a lot more manageable than going it alone.
Since EaselJS relies entirely on HTML5 Canvas , it's important to understand what it is and how it works. If you are
already familiar with techniques such as blitting and/or working with Flash Stage3D, you already have a pretty good
idea of how it works. If not, then you might find the concept a bit complicated at first, but rest assured that EaselJS will
smooth out those learning curves almost instantly. In any case, let's start this section by diving into the basics of what
Canvas is and how to work with it natively.

HTML5 Canvas
Canvas is an HTML5 element that creates a rectangle in your document used for drawing graphics on the fly with
JavaScript. It contains very few attributes or applicable styles. It's quite literally an empty canvas.
Although this programmatically driven graphics environment makes it a powerful tool with many opportunities for
rich interactive creation, it's a low-level system that requires a lot of manual drawing management. You are responsible
for both drawing and erasing all pixels, and no graphics on the canvas are directly tied to any properties or objects.
The best analogy I've come up with to describe this concept is as follows. Imagine you have a magnet board
hanging on the wall, and to the right of it is a dry erase board. The magnet board consists of three butterfly magnets
laid out horizontally. The dry erase board has the same three butterflies but are drawn on the board with a marker.
If I were to tell you to change the position of the second butterfly on the magnet board by moving it down two
inches, you wouldn't need much thought on how to accomplish this. You would simply grab the butterfly with your
finger and pull it down two inches. You simply changed its position.
In a typical scripting language it may look something like this:

butterfly.y += 200;