Game Development Reference
In-Depth Information
After creating an instance of the
LoadQueue
class, you instantly install the Sound plugin. This is necessary for
handling the loading of sound files. Next, you register an event listener so you can tell your application that all files
are ready and it's safe to start. A manifest is next built, as opposed to loading each file independently, by invoking the
loadManifest
method and passing it an array of objects.
These objects should include two properties, the path to the file and an id so you can quickly access them when
needed. You can use these ids for both playing audio files and accessing image files.
Now that you've seen this in action, let's combine everything you've learned in this chapter into a quick butterfly
application that will encompass all tools in the CreateJS suite. Before you start writing code to build your games
throughout this topic, you'll first formulate descriptions and simple outlines of what it is you want to accomplish. The next
example is extremely simple but this outline will give you an idea of all functionality necessary to complete your goal.
Dancing Butterflies
Dancing butterflies is a simple application that animates three butterflies down the screen in sequential order while
playing sound effects as each float down and a final chime sound at the end.
•
Create three butterfly graphics.
•
Animate each butterfly in sequence, starting at the left.
•
Play a sound effect as each butterfly animates.
•
Remove each butterfly when it has finished animating.
•
Play a sound effect when all butterflies have finished animating.
With the exception of the stage setup, the code in Listing 1-5 should all seem familiar to you. It's a simple example
of how all of the tools in CreateJS can nicely work together.
Listing 1-5.
Complete Code Example Using All Four CreateJS Libraries
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="lib/easeljs-0.7.1.min.js"></script>
<script src="lib/tweenjs-0.5.1.min.js"></script>
<script src="lib/soundjs-0.5.2.min.js"></script>
<script src="lib/preloadjs-0.4.1.min.js"></script>
</head>
<body onload="init()">
<canvas id="canvas" width="1000" height="800" style="border: black solid 1px"></canvas>
</body>
<script>
var stage;
var queue;
function init() {
queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
