HTML and CSS Reference
In-Depth Information
loader.addEventListener("complete", game.start);
loader.loadManifest(lib.properties.manifest);
}
2. We originally have the
game.start()
funcion calling in the
game.js
file.
We replace it with the following loading code:
game.Load();
Objective complete - mini debriefing
The artwork outlined in this game is drawn in Flash in the vector format. These vector
graphics can be transformed into an EaselJS-drawing API without issues. Besides vector
outlines, coloring is done in the bitmap format too. Bitmaps cannot be converted into
graphics-drawing instrucions. Instead, Flash outputs the bitmaps into JPEGs and loads
them into the sprite using EaselJS's
bitmap
class.
We added a loader to load these bitmap graphics into the game. For each loaded graphic,
we added the bitmap content to a global
images
object. This
images
object is used within
the
assets.js
file to reference the bitmap data.
Let's take a look at the
assets.js
file that is generated by the Flash CreateJS toolkit.
For this, we need to find a manifest array. Most likely, it is at the top of the file and within
a
lib.properties
object:
// library properties:
lib.properties = {
width: 640,
height: 1000,
fps: 24,
color: "#FFFFFF",
manifest: [
{src:"images/bosspsd.png", id:"bosspsd"},
{src:"images/castlepsd.png", id:"castlepsd"},
{src:"images/castle2psd.png", id:"castle2psd"},
{src:"images/enemy1psd.png", id:"enemy1psd"},
{src:"images/enemy2psd.png", id:"enemy2psd"},
{src:"images/enemy3psd.png", id:"enemy3psd"},
{src:"images/junkpsd.png", id:"junkpsd"},
{src:"images/satellitepsd.png", id:"satellitepsd"},
{src:"images/satellite2psd.png", id:"satellite2psd"}
]
};
The
LoadQueue
method from the PreloadJS library iniializes a loader. The
loadManifest
method from this loader then takes the files inside the manifest and loads the file source
one by one. The IDs are used internally within the
assets.js
file.
