-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (81 loc) · 5.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="main.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.core.min.js"></script>
<script src="ResourceLoader.js"></script>
<script src="main.js"></script>
<title>ResourceLoader Module</title>
</head>
<body>
<main class="wrapper">
<pre class="sampleCode">
<code>
var loaderOptions = {
assets : {
imgs : {
bg : "assets/sprites/background.png",
enemy_ships : "assets/sprites/enemyShips.png",
meteorSprite : "assets/sprites/meteorSprite.png",
mothershipSprite : "assets/sprites/motherships.png"
},
sounds : {
shoot: ["assets/sounds/shoot.wav", "assets/sounds/shoot.mp3"],
soundTrack : ["assets/sounds/soundtrack.wav", "assets/sounds/soundtrack.mp3"],
perk : ["assets/sounds/perk.mp3", "assets/sounds/perk.wav"],
victory : ["assets/sounds/victory.wav", "assets/sounds/victory.mp3"]
}
},
onload : updateStatus,
final : finalCall
}
ResourceLoader.init(loaderOptions);
</code>
</pre>
<div class="statusBox">
<div class="statusBar" id="statusBar">
</div>
<button class="button" id="loadAssets">Load</button>
</div>
<article>
<header><h2>Set Up Options Object</h2></header>
<p>In order to start using this module to load all your audio and graphic assets for your projects, you will first need to create an object literal containing all the necessary information such as callback function, asset names and sources and final callback function. Check the code above for an example of this options object. <span class="important">IMPORTANT!: </span>for audio files, you will need to declare your source files in an array given the fact that not all audio file format are supported by all browsers, the module will pick the first supported file format from this array, so make sure to organize them in order of preference.</p>
<pre class="sampleCode">
<code>
.../
assets : {
../
sounds : {
shoot: ["assets/sounds/shoot.mp3", "assets/sounds/shoot.wav"],
soundTrack : ["assets/sounds/soundtrack.mp3", "assets/sounds/soundtrack.wav"],
}
</code>
</pre>
<p>For graphic files, you can specify the source directly onto the property name of the asset. Make sure to declare your image assets under the <span class="codeText">imgs : {}</span> object and for the audio under <span class="codeText">sounds : {}</span> object.</p>
<p>If you want a function to be called everytime an asset is loaded, set the <span class="codeText">onload : callbackFunction</span> property to your callback function, an argument will be passed with the element that was loaded.</p>
<p>For the final call, once all your assets have loaded, you can set the final callback function to the <span class="codeText">final : finalCallback</span> property in your options object. Once your options folder is ready is time to initialize the module.</p>
</article>
<article>
<header>
<h2>How To Initialize Module</h2>
</header>
<p>Initializing the module is very simple, all you do is call the <span class="codeText">ResourceLoader.init(options)</span> method in your module and pass in your options object literal. <span class="important">IMPORTANT!:</span> You should only initialize your module once!</p>
</article>
<article>
<header><h2>Initialize Download/Load of Assets</h2></header>
<p>Once you have initialized your module with the desired options, it is time to tell your module to initialize downloading and loading all the assets, call the <span class="codeText">ResourceLoader.downloadAll()</span> method to perform this operation. This will start calling your callbacks everytime an asset is loaded and call your final callback function once it is done loading all the files.</p>
</article>
<article>
<header><h2>How To Access Assets:</h2></header>
<p>You can access assets by using the name of the module as the namespace followed by the dot operator <span class="codeText">(.assets)</span> and then the name of your asset. Of course, if your asset is an audio file, you can use the built in method of <span class="codeText">.play()</span> to playback the audio file.</p>
<p>For example, you can access the background image named "bg" in the module like so:<br>
<span class="codeText">ResourceLoader.assets.bg</span> you can also assets and play an audio file like so <span class="codeText">ResourceLoader.assets.shoot.play();</span> try this in your console, the ResourceLoader is a property of the window object and you should be able to play that audio file.
</p>
<p>As you can see by the loading bar above, you can have a callback function be called everytime an element is loaded. Once all assets have loaded, your final callback function will be called. You can access the percentage of loaded assets by reading the <span class="codeText">ResourceLoader.loaded</span> property which returns a decil representing the ammount of assets loaded (0.5 half of all assets). This property is useful for creating loading bars like the one above, this property is a getter so it is always updated.</p>
</article>
</main>
</body>
</html>