spacerpg/wwwroot/js/SpriteAtlas.js

class SpriteAtlas {
	constructor(xmlFilename) {
		this.xmlFilename = xmlFilename;
		this.atlas = {};
		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.xmlFilename;
			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");
		var textureAtlas = source.getElementsByTagName("TextureAtlas")[0];
		this.populateAtlas(source);
		var sheetsrc = `./assets/${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")] = {
				x: parseInt(subtexture.getAttribute("x")),
				y: parseInt(subtexture.getAttribute("y")),
				width: parseInt(subtexture.getAttribute("width")),
				height: parseInt(subtexture.getAttribute("height"))
			};
		}
	};

	drawCentered(context, name, position) {
		var imageLookup = this.atlas[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) {
		var imageLookup = this.atlas[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.atlas[name].width;
	};

	getHeight(name) {
		return this.atlas[name].height;
	};
}