trash-slots/assetloader.js

function AssetLoader() {
	var assetCache = {};
	var spriteCache = {};
	var loaded = {};
	var self = this;
	this.load = function(files, callback) {
		//TODO: display loading bar/spinner
		for(var key in files) {
			var filename = files[key];
			this.loadImage(key, files[key], callback);
		}
	}

	this.loadImage = function(key, filename, callback) {
		var image = new Image();
		loaded[key] = false;
		image.onload = function() {
			self.loadComplete(key, callback);
		};
		image.src = filename;
		assetCache[key] = image;
	};

	this.loadComplete = function(key, callback) {
		loaded[key] = true;
		if(self.areLoaded()) {
			//TODO: remove loading bar/spinner
			callback();
		}
	};

	this.areLoaded = function() {
		for(var key in loaded) {
			if(!loaded[key]) {
				return false;
			}
		}
		return true;
	};

	this.getSpriteByCoords = function(spriteName, sheetName, position, size) {
		if(!spriteCache.hasOwnProperty(spriteName)) {
			var canvas = document.createElement("canvas");
			canvas.width = size.width;
			canvas.height = size.height;
			var context = canvas.getContext('2d');
	 		context.drawImage(assetCache[sheetName], position.x, position.y, size.width, size.height, 0, 0, size.width, size.height);
	 		spriteCache[spriteName] = canvas;
	 	}
	 	return spriteCache[spriteName];
	};

	this.buildSprite = function(spriteName, sheetName, position, size) {
		var canvas = document.createElement("canvas");
		canvas.width = size.width;
		canvas.height = size.height;
		var context = canvas.getContext('2d');
	 	context.drawImage(assetCache[sheetName], position.x, position.y, size.width, size.height, 0, 0, size.width, size.height);
	 	spriteCache[spriteName] = canvas;
	};

	this.getSprite = function(spriteName) {
		if(!spriteCache.hasOwnProperty(spriteName)) {
			console.warn("Sprite '" + spriteName +"' not defined. Please call buildSprite() before using this function.");
			return new Image();
		}
		return spriteCache[spriteName];
	}

	this.calculatePosition = function(tilex, tiley) {
		return {x: tilex * 16, y: tiley * 16};
	}
};