html5 enhance graphics need explanation please

Beta Testing HTML5
#1

Hi,

@XeduR

I have asked this question before, I wanted to ask it again, but I have just found out about something weird, so I hope someone can help me in here.

Whenever I develop something and build it to HTML5, the graphics (specially text) is blurry and not really acceptable (compared to phone builds) this can be seen when displayed on a browser like chrome … It seems to lose resolution.

But what just happened here and by chance is good but strange, I ran the sample project in the browser(which is really dummy displaying text, images, and changing background color)
Then I changed the Zoom level from the browser and made it minimal value possible (25% on chrome) … and here is the big surprise!!

everything became Chrystal clear, and size remained the same.

So what is going on, and is there a way to do this on the code size? or should I increase the resolution of images, and size of text

Please test attached code and help me out in here

In the simulator it is Chrystal clear, try to build to HTML5 and run it in the browser, it will look bad … then from the browser just minimize zoom level to 25% on chrome and see how better it will look without changing the size of objects

I tried using document.body.style.zoom=“25%” it minimizes the body to 25% … but this minimizes my app to 25% … which I don’t want … I want the action as if it is done from the browser by hand

just made 2 different tests by changing config.lua it seems to affect behavior of zoom button as well

local normalW, normalH = 720, 1280

if not display then return end -- This is needed for dekstop app

application = {
    content = {
        -- width = normalW,
        -- height = normalH,
        scale = "zoomStretch",
        -- scale = "adaptive",
        fps = 60,
    }
}

And

local normalW, normalH = 720, 1280

if not display then return end -- This is needed for dekstop app

application = {
    content = {
        width = normalW,
        height = normalH,
        fps = 60,
    }
}

JAC Exam.zip (99.1 KB)

#2

I wasn’t able to see the issue (well). Seems that you’ve updated the post a few times, how would I go about reproducing the issue?

The main problem with text in HTML5 builds is about when they are created, and if and when the “app window” increases in size, because Solar2D doesn’t automagically re-render text. One workaround is to create a larger than needed text and then scale them down to what you actually need.

Also, restricting the app window by using an iframe helps a lot as the app can’t be scaled any further than you want.

#3

Apologies I was too excited :slight_smile:

I will explain what is happening in simpler words.

If you make HTML5 builds with the below settings in config.lua and run the project in chrome browser the text and images blur out, then if you zoom to 25% from the browser menu you get crystal clear images and text without affecting the size of anything, as if the zoom button did nothing but enhance graphics

local normalW, normalH = 720, 1280

if not display then return end -- This is needed for dekstop app

application = {
    content = {
        width = normalW,
        height = normalH,
        fps = 60,
    }
}

And if you use those settings:

application = {
    content = {
        scale = "zoomStretch",
        fps = 60,
    }
}

Then you get something totally different; as the zoom button decreases size of displayed objects and also enhances graphics

So what can I do to make my graphics look Crystal clear without having to use the zoom button, because it already looks great when zoomed out

Should I use scale in config.lua or should I not when make HTML5 builds

Thanks,
Tariq

#4

Well, this is entirely new behaviour to me and I don’t quite know what’s going on. It looks interesting and understanding the specifics likely requires digging into Solar2D’s source code.

Given that there is “an option to enhance the graphics” via browser zoom, it would make sense that this enhancement could be triggered directly from Solar2D (i.e. without the browser zoom).

Just a guess, but maybe what’s going on is that when you set browser zoom to 50%, for instance, then some of Solar2D’s scaling modes account for it by making the display objects 4 times larger and then scaling them down to fit the canvas? Just thinking out loud here, but f the canvas size is 600x400 pixels and it contains a text object that is 200x100, then at 50% zoom the text object would become 100x50, but since the app’s canvas takes up as much space as it can, i.e. it remains at 600x400, then maybe Solar2D renders the text object as 400x200, so that at 50% zoom it would still occupy the same 200x100 proportions in the canvas as it did before the zoom?

Anyway, just wild guesses, and I don’t know how I’d go about approaching this issue.

Oh, and on an unrelated note, as I discovered some time ago, the width and height properties from config.lua don’t actually work for HTML5 builds at the moment. Solar2D is using hardcoded width and height of 320 and 480, see:

Having looked a bit at the emscripten implementation, I feel like there’s plenty of room for minor improvements and adjustments. The Rtt_EmscriptenContext.cpp file linked above also contains the infamous “hack” comment for handling zoomStretch and zoomEven scaling modes.

#5

Thanks man.

I wish next Solar2D update will include a fix that makes HTML5 builds as good as android builds

#6

Will the 320x480 mindset ever go?

#7

480x320 should be ancient history by now, but its 3:2 aspect ratio is still a great default to work around.

I’m using 960x640 content area and ensuring that the ”sensitive/critical” UI fits inside the content area means it’ll work on tablets, many of which are 4:3 and 3:2, as well as all widescreen devices.

The hardcoded 480x320 in the linked file from above has likely been there since the first days of HTML5 builds, i.e. 5+ years.

#8

And the HTML5 builds aren’t being actively worked currently, so that won’t regrettably be the case in the coming new Solar2D builds.

#9

@XeduR

I believe HTML5 is a very powerful feature in Solar2D, the only disadvantage is the blurry graphics, please Xedure help in fixing it in the next update, it is just very difficult to ask people to zoom out to 25% or 30% … i tried everything to manipulate zooming through HTML or CSS it is just not available, and it is a manually handled feature in browsers

Also the Arabic text trimming which happens in all browsers except Firefox

Can you please do anything about them?

#10

I have the last week of July reserved for all sorts of Solar2D HTML5 stuff and I can take a look at this then as well.

I am working on something that may address the zoom/scaling indirectly, but the text trimming is something I really don’t know how to approach. I’d take a bitmap font approach with them personally.

2 Likes
#11

That’s really great…

I solved the text issue by using this code i found somewhere … which splits multiple lines into single line easily … when you show the text directly as one line without using a table of setting it works perfectly

paragraph, tmpString = string.match( tmpString, "([^\n]*)\n(.*)" )

	    if paragraph~=nil then
	    	parCtr=parCtr+1
	    	
	    	paragraph=cleanString(paragraph)
	    	paragraph=trimString(paragraph)

		    paragraphs[parCtr] = display.newText(paragraph, 0,0,"Calibri",38 )
		    paragraphs[parCtr].anchorX = 1
		    paragraphs[parCtr].anchorY = 0
		    paragraphs[parCtr].x = rect2X + frame1.width*0.5-50 -- to the end of my app :-)