ganache/js/SpriteAtlas.js

class SpriteAtlas {
	constructor(assetsPath, xmlFilename) {
		this.assetsPath = assetsPath;
		this.xmlFilename = xmlFilename;
		this.xmlPath = `./${assetsPath}/${xmlFilename}`;
		this.atlas = {};
		this.xmlData = {};
		this.spritesheetImage = new Image();
		this.cacheBusting = true;
	}

	load() {
		return new Promise((resolve, reject) => {
			var request = new XMLHttpRequest();
			request.addEventListener("load", (event) => this.xmlLoadComplete(event, resolve, reject));

			let url = this.xmlPath;
			if (this.cacheBusting) {
				url += "?v=" + new Date().getTime();
			}
			request.open("GET", url);
			request.setRequestHeader("Content-Type", "text/xml");
			request.send();
		});

	}

	xmlLoadComplete(event, resolve, reject) {
		var source = (new DOMParser()).parseFromString(event.target.responseText, "application/xml");
		this.xmlData = source;
		var textureAtlas = source.getElementsByTagName("TextureAtlas")[0];
		this.populateAtlas(source);
		var sheetsrc = `./${this.assetsPath}/${textureAtlas.getAttribute("imagePath")}`;
		if (this.cacheBusting) {
			sheetsrc += "?v=" + new Date().getTime();
		}
		this.spritesheetImage.src = sheetsrc;
		this.spritesheetImage.addEventListener('load', resolve);
	};

	populateAtlas(source) {
		var subtextures = source.getElementsByTagName("SubTexture");
		for (var i = 0, subtexture = subtextures[0]; subtexture = subtextures[i]; i++) {
			this.atlas[subtexture.getAttribute("name")] = {
				name: subtexture.getAttribute("name"),
				x: parseInt(subtexture.getAttribute("x")),
				y: parseInt(subtexture.getAttribute("y")),
				width: parseInt(subtexture.getAttribute("width")),
				height: parseInt(subtexture.getAttribute("height"))
			};
		}
	};

	getSprite(name) {
		let imageLookup = this.atlas[name];
		if (!!imageLookup) {
			return imageLookup;
		}
		throw new Error(`Sprite ${name} not found in atlas ${this.xmlPath}`);
	}

	draw(context, name, position) {
		let imageLookup = this.getSprite(name);

		context.drawImage(this.spritesheetImage,
			imageLookup.x,
			imageLookup.y,
			imageLookup.width,
			imageLookup.height,
			position.x,
			position.y,
			imageLookup.width,
			imageLookup.height);
	};

	drawCentered(context, name, position) {
		let imageLookup = this.getSprite(name);

		context.drawImage(this.spritesheetImage,
			imageLookup.x,
			imageLookup.y,
			imageLookup.width,
			imageLookup.height,
			position.x - imageLookup.width / 2,
			position.y - imageLookup.height / 2,
			imageLookup.width,
			imageLookup.height);
	};


	drawBottomCentered(context, name, position) {
		let imageLookup = this.getSprite(name);

		context.drawImage(this.spritesheetImage,
			imageLookup.x,
			imageLookup.y,
			imageLookup.width,
			imageLookup.height,
			position.x - imageLookup.width / 2,
			position.y + imageLookup.height / 2,
			imageLookup.width,
			imageLookup.height);
	};

	getWidth(name) {
		return this.getSprite(name).width;
	};

	getHeight(name) {
		return this.getSprite(name).height;
	};
}