Mutant Zombie Monsters Upscaled Using hqx Pixel Scaling

I finally decided that Mutant Zombie Monsters at 320 x 240 pixels is just too small, so instead of redoing the artwork and sprites which would take a very long time, I implemented hqx upscaling to the game. This upscaling method has been used on some other ImpactJS games instead of neighest neighbor upscaling because things tend to come out smoother and not as "boxy". hqx was originally developed for the ZNES emulator in C but is now ported to JS. The algorithm couldn't have been easier to implement. I simply had to get ahold of hqx.js at Github, copy it into my directory and reference it from my HTML:

<script type="text/javascript" src="hqx.js"></script>

Now inside the impact library, the resize() function in image.js needs to be changed from the previous nearest neighbor method to:

	resize: function (scale) {
		if (scale == 2 || scale == 3 || scale == 4) {
		    this.data = hqx(this.data, scale);
		}
		return;
		var widthScaled = this.width * scale;
		var heightScaled = this.height * scale;
		var orig = ig.$new('canvas');
		orig.width = this.width;
		orig.height = this.height;
		var origCtx = orig.getContext('2d');
		origCtx.drawImage(this.data, 0, 0, this.width, this.height, 0, 0, this.width, this.height);
		var origPixels = origCtx.getImageData(0, 0, this.width, this.height);
		var scaled = ig.$new('canvas');
		scaled.width = widthScaled;
		scaled.height = heightScaled;
		var scaledCtx = scaled.getContext('2d');
		var scaledPixels = scaledCtx.getImageData(0, 0, widthScaled, heightScaled);
		for (var y = 0; y < heightScaled; y++) {
		    for (var x = 0; x < widthScaled; x++) {
			var index = ((y / scale).floor() * this.width + (x / scale).floor()) * 4;
			var indexScaled = (y * widthScaled + x) * 4;
			scaledPixels.data[indexScaled] = origPixels.data[index];
			scaledPixels.data[indexScaled + 1] = origPixels.data[index + 1];
			scaledPixels.data[indexScaled + 2] = origPixels.data[index + 2];
			scaledPixels.data[indexScaled + 3] = origPixels.data[index + 3];
		    }
		}
		scaledCtx.putImageData(scaledPixels, 0, 0);
		this.data = scaled;
        },

For the most part, things look ok so I think I'll stick with it!


hqx on Github


Mutant Zombie Monsters