How can we get crisp sprites on mobile browsers?

[ehu...@gmail.com]

Hi everyone, we're working on an html5 game for mobile devices and are having some trouble getting sprites to render nicely.
Basically, it seems like any sort of scaling makes our sprites extremely jaggy. Even without any scaling, the small viewport size on mobile browsers (640px wide on a nexus 5) prevents us from using the full resolution the device supports and sprites look pretty terrible.
Is there anything we can do to increase the quality of sprite rendering/smoothing on mobile browsers?
Coming from openfl (html5 backend), they seem to be doing something differently as we did not experience the same issues there.

Any insight on this will be really appreciated :)

[Bruno Garcia]

It sounds like it's using the WebGL renderer, where scaling currently
uses nearest neighbor.

That might change soon, but for now you can put in your haxe_flags: -D
flambe_webgl_enable_linear (if you're running latest git) or -D
flambe_disable_webgl (to disable the WebGL renderer entirely).

Check out this PR for more info: https://github.com/aduros/flambe/pull/269

[ehu...@gmail.com]

Thanks for the quick response Bruno :)
It doesn't seem to be WebGL related as we're testing this on an Android chrome browser, which as far as I know has no webgl support.
Comparing Flambe's and openfl's index.html files there seem to be a couple of major differences that are related:
https://gist.github.com/ehudros/e29644cfe5e58b13c04a (openfl index.html)
https://gist.github.com/ehudros/97de49ac139aa7e8683f (flambe html)

The main difference is that openfl sets the viewport inital-scale to 0.66 and has the canvas set 1280x720 (which is what we are designing for).
Flambe keeps the scale at 1 and sets the canvas to the native viewport size of 598x287 (this is a Nexus 5 device).

Our desired result would be to get crisp images on high res devices, which currently doesn't seem to work out of the box for us.
Here are two screenshots taken from the device:
http://imgur.com/a/qIOJu

I am almost entirely sure this behavior is either by design or we are missing a basic concept regarding html5 development, so any insights will be highly appreciated.

[Ehud Rosenberg]

Did some more research on this today and I was able to reproduce openfl's scaling behavior in Flambe.

The way it works is as follows (in my main.hx):

System.stage.resize.connect(onResize);

Consts.WIDTH = 1280; // our target width

Consts.HEIGHT = 720; // our target height

private static function onResize():Void 

{

var htmlStage = cast(System.stage, HtmlStage);

var scaleFactor = Math.min(System.stage.width / Consts.WIDTH, System.stage.height / Consts.HEIGHT);

htmlStage._canvas.width = Consts.WIDTH;

htmlStage._canvas.height = Consts.HEIGHT;

HtmlUtil.setVendorStyle(htmlStage._canvas, "transform-origin", "top left");

HtmlUtil.setVendorStyle(htmlStage._cavas, "transform", "scale(" + (scaleFactor) + ")");

// not 100% sure this is required...

if (scaleFactor < 1) {

htmlStage._canvas.style.marginLeft = ((originalWidth - (Consts.WIDTH * scaleFactor)) / 2) + "px"; htmlStage._canvas.style.marginTop = ((originalHeight - (Consts.HEIGHT * scaleFactor)) / 2) + "px";   

}

}

Lastly, the following javascript code is needed in index.html:

<script>

window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, false);
if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {

var meta = document.getElementById ("viewport");

meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');

}

</script>

It's not an elegant way of doing things, but the result looks much better than using the wiki's suggested method of scaling a container as described here: https://github.com/markknol/flambe-guide/wiki/Responsive-game.

As I've said before, I feel like I'm probably missing something very basic here so any insights on why this approach looks better when using high res assets would be great.

btw - I've tried using requestResize(1280,720) but that did not yield the same results, though I'm not entirely sure why.

[jsa...@gmail.com]

Hi,

I was facing the same issue, especially on mobile.
How are you accessing _canvas as it is a private variable in HtmlStage?

Thanks

[Emilio Shodi]

Check out @:access metadata

понедельник, 6 июля 2015 г., 0:24:55 UTC+3 пользователь jsa...@gmail.com написал: