public
Last active

Microsoft HTML5 Platform game: ContentManager rewritten using PreloadJS

  • Download Gist
ContentManager.js
JavaScript
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
"use strict";
(function(window) {
// Callback, all files are loaded
var ondownloadcompleted;
var downloadProgress;
var preload;
var numElementsLoaded = 0;
var soundCount = 0;
var self;
var manifest = [
// Sounds
// SoundJS will handle which file to download
{src: "sounds/Music.mp3|sounds/Music.ogg", id: "globalMusic"},
{src: "sounds/PlayerKilled.mp3|sounds/PlayerKilled.ogg", id: "playerKilled"},
{src: "sounds/PlayerJump.mp3|sounds/PlayerJump.ogg", id: "playerJump"},
{src: "sounds/PlayerFall.mp3|sounds/PlayerFall.ogg", id: "playerFall"},
{src: "sounds/ExitReached.mp3|sounds/ExitReached.ogg", id: "exitReached"},
// Backgrounds: added in Constructor
// Sprites
{src: "img/Player.png", id: "imgPlayer"},
{src: "img/MonsterA.png", id: "imgMonsterA"},
{src: "img/MonsterB.png", id: "imgMonsterB"},
{src: "img/MonsterC.png", id: "imgMonsterC"},
{src: "img/MonsterD.png", id: "imgMonsterD"},
// Overlays
{src: "overlays/you_win.png", id: "winOverlay"},
{src: "overlays/you_lose.png", id: "loseOverlay"},
{src: "overlays/you_died.png", id: "diedOverlay"},
// Blocks
{src: "img/Tiles/BlockA0.png", id: "imgBlockA0"},
{src: "img/Tiles/BlockA1.png", id: "imgBlockA1"},
{src: "img/Tiles/BlockA2.png", id: "imgBlockA2"},
{src: "img/Tiles/BlockA3.png", id: "imgBlockA3"},
{src: "img/Tiles/BlockA4.png", id: "imgBlockA4"},
{src: "img/Tiles/BlockA5.png", id: "imgBlockA5"},
{src: "img/Tiles/BlockA6.png", id: "imgBlockA6"},
{src: "img/Tiles/BlockB0.png", id: "imgBlockB0"},
{src: "img/Tiles/BlockB1.png", id: "imgBlockB1"},
{src: "img/Tiles/Gem.png", id: "imgGem"},
{src: "img/Tiles/Exit.png", id: "imgExit"},
{src: "img/Tiles/Platform.png", id: "imgPlatform"}
];
 
function ContentManager(stage, width, height) {
preload = new createjs.PreloadJS();
//Install SoundJS as a plugin, then PreloadJS will initialize it automatically.
preload.installPlugin(createjs.SoundJS);
preload.onError = handleElementError;
preload.onFileLoad = handleElementLoad;
downloadProgress = new Text("-- %", "bold 14px Arial", "#FFF");
downloadProgress.x = (width / 2) - 50;
downloadProgress.y = height / 2;
 
this.gemCollected = new Array(8);
this.imgBackgroundLayers = new Array(3);
for (var i=0; i < 3; i++) {
this.imgBackgroundLayers[i] = new Array(3);
}
self = this;
var i, j, bg;
// copied into this.gemCollected[] when downloaded
for(i=0; i < 8; i++) {
manifest.push({
src: "sounds/GemCollected.mp3|sounds/GemCollected.ogg",
id: "GemCollected" + i
});
}
// put in this.imgBackgroundLayers[i][j] array when downloaded
for(i=0; i < 3; i++) {
for(j=0; j < 3; j++) {
bg = "Layer" + i + "_" + j;
manifest.push({src: "img/Backgrounds/" + bg + ".png", id: bg});
}
}
// setting the callback method
// Triggered once everything is ready to be drawned on the canvas
this.SetDownloadCompleted = function (callbackMethod) {
ondownloadcompleted = callbackMethod;
};
this.StartDownload = function() {
preload.loadManifest(manifest);
stage.addChild(downloadProgress);
Ticker.addListener(this);
Ticker.setInterval(50);
};
// called after every download
function handleElementLoad(event) {
if (event.id.indexOf("GemCollected") == 0) {
self.gemCollected[soundCount++] = event.result;
} else if (event.id.indexOf("Layer") == 0) {
var values = event.id.replace("Layer", "").split("_");
self.imgBackgroundLayers[parseInt(values[0], 10)][parseInt(values[1], 10)] = event.result;
} else {
// make the item available
self[event.id] = event.result;
}
numElementsLoaded++;
// If all elements have been downloaded
if (numElementsLoaded === manifest.length) {
stage.removeChild(downloadProgress);
Ticker.removeAllListeners();
numElementsLoaded = 0;
// we're calling back the method set by SetDownloadCompleted
ondownloadcompleted();
}
}
//called if there is an error loading the image (usually due to a 404)
function handleElementError(e) {
console.log("Error Loading Asset : " + e.src);
}
// Update methid which simply shows the current % of download
this.tick = function() {
downloadProgress.text = "Downloading " + Math.round((numElementsLoaded / manifest.length) * 100) + " %";
// update the stage:
stage.update();
};
}
window.ContentManager = ContentManager;
} (window));
index.html
HTML
1 2 3
<!-- Added PreloadJS & SoundJS -->
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.3.0.min.js"></script>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.