The title says it all. I’m on a retina ( mac ) display, running a program that simply layouts a bitmap in the page, sticking the bitmap always at the bottom-right, like a signature.
The layout reacting on Event.RESIZE works perfectly and looks really good on a swf, but i need to target html5, and there the rendering is all ugly and blurred.
I tried rounding up the coordinates of the object, setting the html5 project.xml window parameters right, setting the StageScaleMode correctly etc. Nothing!
Am I missing something?
Ok after some researches I could fix this problem adding to my project.xml thanks to this post :
Hello everyone! Earch for information about this problem and found that's why I write here.
I incorporated a text that looks perfect on all targets least in HTML5, is blurry, View Screenshot
These are the properties that give the text.
var font = Assets.getFont("fonts/OpenSans-Regular.ttf");
var textFormat:TextFormat = new TextFormat();
textFormat.font = font.fontName;
textFormat.size = 13;
textFormat.color = 0xFFFFFF;
textFormat.leading = -7;
textFormat.align = TextFormatAlign.JUSTIFY;
This kinda worked too for retina scaling considerations, but you need to hack the index.html
I'm building an HTML5 web app for mobile and noticed that when I switched to the canvas rendering mode from dom, everything looked blurry, which was not the case with dom. And this is when using 0 for both the window width and height in my project.xml, so basically fullscreen. I did some digging and concluded that it's because the element's intrinsic width and height (not the style width/height properties) values are set to 320px and 568px, which is the CSS width and height o…
I would like to support a higher resolution canvas based on the
<window allow-high-dpi="" /> setting, but I’m afraid that I don’t have a system to test this on, so it may need to wait a bit longer
I just realized I can test this on my phone, I’ll take a look
Didn’t get a chance to look today, but hope to soon
I’ll make some tests too :}
I’ve made an initial pass to support high DPI on HTML5
This commit to Lime disables allowHighDPI by default on HTML5, and should use scaled coordinates when changing the canvas width, and sets a style width/height to compensate. So far, this seems to be working properly.
This fixes the behavior of OpenFL, I
think this is what we want to do. Since we scale in CSS, we don’t need to scale in the OpenFL resize, I believe.
If you could, please give these a try, and see if it behaves as you expect. Otherwise, this should be a good starting point to help us.