Blurry assets on iOS

Haxe
#1

Hello OpenFL community,

this is driving me nuts, if anyone can help, he (or she) will have my forever gratitude :slight_smile:

I’m exporting a game in html5, i’m building it with openFL / Starling.
I noticed that assets were pixelated on iOS mobile (iphone 6 and 7),
After some searching i solved the problem with this code (on the html page) :

var ratio = (function () {
	var ctx = document.createElement("canvas").getContext("2d"),
			dpr = window.devicePixelRatio || 1,
			bsr = ctx.webkitBackingStorePixelRatio ||
						ctx.mozBackingStorePixelRatio ||
						ctx.msBackingStorePixelRatio ||
						ctx.oBackingStorePixelRatio ||
						ctx.backingStorePixelRatio || 1;

	return dpr / bsr;
})();

var basewidth = window.innerWidth;
var baseheight = window.innerHeight;

//found on openfl community

lime.embed ("MYGAME", "openfl-content", 0, 0, { parameters: {}, rootPath:"bin/html5/bin" });

var w = Math.round(basewidth * ratio);
var h = Math.round(baseheight * ratio);

var canvas = document.getElementById('openfl-content');
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.style.transform = 'scale('+(1 / ratio)+','+(1 / ratio)+')';
canvas.style.transformOrigin = '0 0';

this code seems to correct the problem, the asset appear as expected.

But now, it messed up the coordinate of the mouseEvent, when i click at position 100, 100 (base on the browser coordinates), my game receive the click at position 50, 50 (if we assume a ratio of 2)

1/ Does anyone have a clue how to correct that ?
2/ If my fix is weird and there is a better way to solve the issue, please let me know

#2

Try removing your modifications, and use <window allow-high-dpi="true" /> in your project file. We have this disabled by default on HTML5 for better performance, but it should allow for retina scale in the browser :slight_smile:

#3

Cool, i was hoping there would be a nice and clean solution for it that would not require me to polute the integration code with custom hacks. I’ll try and confirm that when i have an iOS device to test on.

Thanks for your assistance !

1 Like
#4

It works. It solves the problem of blurriness and the mouseinput coordinates.

Thanks Joshua, you saved me a lot of time for the second time !

1 Like