PSA: HTML5 resize works perfect when on zoomEven mode

Beta Testing HTML5
#1

I can’t believe I never noticed this, but having your build.setting like this for web/HTML5 builds makes everything work perfect in HTML5.

application =
{
	content =
	{
		width = 480,
		height = 320,
		scale = "zoomEven",
		fps = 60
	},
}

It has to be zoomEven! And then in your game, you can use…

-- Called when the app's view has been resized
local function onResize( event )
     -- do resize logic here with things like  display.actualContentWidth
end

Runtime:addEventListener( "resize", onResize )

And I swear everything works perfect! Every other mode breaks the canvas somehow. But this mode literally does a perfect fit in the browser. Works on Chrome and Safari at least :sweat_smile:

4 Likes
#2

Thanks @joecoronasdk - that is so amazingly simple!

#3

Like I already told you in Discord, this is a great discovery. I’ll be trying this out today with some of my projects.

#4

Well, I tried the fix, and the issues concerning with downscaling still remain. I am already using CSS to constrain my HTML5 apps, so the only issues that I am having have to do with texts becoming excessively blurry when downscaled.

I am probably going to wrap up my bitmap font plugin and use it to create the texts to my HTML5 apps and then I won’t need to worry about the blurry fonts either anymore.

#5

Weird. But does the Solar canvas scale and fit the browser window? Even in resize?

Maybe since it’s working for me I should create a template

#6

You can do that, but I’m guessing we are having and solving different issues.

#7

You’re mainly concerned about the fonts right? It would be cool if you got the bitmap plugin to convert fonts into bitmaps at runtime. Then nobody would need to setup bitmap just to get it looking good on HTML.

I think I had experimented with taking snapshots of font to fixe the issue, but I don’t remember how that all turned out