Game Development Reference
In-Depth Information
Listing 2-6.
HTML Elements for the Preloader
<!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>
</head>
<body onload="init()" style="margin: 20px">
<canvas id="canvas" width="1024" height="768" style="border: black solid 1px"></canvas>
</body>
</html>
Next, open a script block by adding a
script
element. You will write all of your code here. A few variables are first
declared, as shown in Listing 2-7.
Listing 2-7.
Variables Declared for the Preloader
<script>
const LOADER_WIDTH = 400;
var stage, loaderBar, loadInterval;
var percentLoaded = 0;
A constant is created to hold the size of the preloader. Then the stage reference is declared, along with a few other
variables. A final value of 0 is set to
percentLoaded
so that the bar graphic starts out at a width of 0. The first function
that is called is
init
, which is triggered when the body is finished loading (see Listing 2-8).
Listing 2-8.
The init Function, Called when Body is Loaded
function init() {
setupStage();
buildLoaderBar();
startLoad();
}
The
init
function initializes the application by calling a series of functions. The first few are used for preparing
the stage and drawing your preloader graphics to it (see Listing 2-9).
Listing 2-9.
Setting Up the Stage and Drawing an Empty Loader
function setupStage() {
stage = new createjs.Stage(document.getElementById('canvas'));
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function(e){
stage.update();
});
}
function buildLoaderBar() {
loaderBar = new createjs.Shape();
loaderBar.x = loaderBar.y = 100;
loaderBar.graphics.setStrokeStyle(2);
loaderBar.graphics.beginStroke("#000");
