Forums » Impact Engine » BUG - Pre-rendered map chunks in scaled pixel art games (Chrome 49)

Levels may not load because pre-rendering chunks freezes Chrome.

If you have a pixel art game and are setting the scale factor when you call ig.main() so that your pixel art is upscaled by the engine's internal nearest neighbor algorithm, and you are also pre-rendering your map layers into chunks, then your game may no longer be loading levels in Chrome.

Chrome has developed a bug where drawing from one off screen tilemap canvas into many off screen chunk canvases becomes extremely slow.

The simplest fix is to just turn off pre-rendering on your level map chunks. However, this may not be ideal for obvious performance reasons.

I have developed another fix that works consistently for me and is still pretty simple. Add this to your main.js BEFORE you call ig.main()

// Fix Chrome 49 bug during map chunks pre-render step
// Creating pre-rendered chunks from an Image is very fast,
// but creating them from an off screen canvas is extremely slow.
// So simply convert the upscaled canvas back to an image.
ig.Image.inject({
	resize: function resize() {
		this.parent.apply(this, arguments);

		var img = new Image();
		img.src = this.data.toDataURL();
		this.data = img;
	} // resize()
});

This bug seems to have arrived in Chrome 49.0.2623.110 (or possibly the public release just before it). It occurs on Mac OSX 10.11.4. Firefox and Safari are not effected. I have not confirmed the bug occurs on Windows, but I have confirmed that the fix causes no problems on Windows.

That's a weird Chrome bug for sure, but I was able to reproduce it on OSX as well. It may have to do with hardware acceleration only allowing a certain number of offscreen-canvases!?

Anyway, I have implemented your fix and pushed the changes into the git repository. Thank you!

Thanks Dominic!

The number of off screen canvases doesn't seem to linearly be the issue. It is true that a very small level with very few pre-rendered chunks won't always trigger this bug. However, you can have a huge level with a great many pre-rendered off screen chunks and they will work just fine so long as the source tile map for the pre-render step is an off screen Image and not another single off screen canvas.

Another way to think about this...

* EXPECTED PERFORMANCE: Any NOT pre-rendered level drawing. Many drawTile calls from either one off screen image OR one off screen canvas (scaled image) to one on-screen game canvas.

* EXPECTED PERFORMANCE: Any pre-rendered level drawing. Many drawTile calls from many off screen canvases to one on-screen game canvas.

* EXPECTED PERFORMANCE: Pre-rendering level chunks from source tile map image. Many drawTile calls from one off screen image to many off screen chunk canvases.

* BAD PEFORMANCE/CRASH: Pre-rendering level chunks from source tile map scaled canvas. Many drawTile calls from one off screen canvas to many off screen chunk canvases.

Worth noting that I tried messing around with chunk size, tilemap image file size, using only powers of two for tilemap image dimensions, and even making the chunk building process async rather than blocking... none of that helped.