Graphics and Fonts Blurry

Beta Testing HTML5
#1

A side by side comparison shows how blurry the graphics and custom fonts are on the HTML5 build, viewed in Chrome version 79.0.3945.88 (Official Build) (64-bit). What’s the cause?

Below is the build.settings and config.lua. It’s just a basic setup.

settings = { -- -- Splash screen -- splashScreen = { enable = false, }, -- -- Device orientation -- orientation = { default = "landscapeRight", supported = { "landscapeRight" }, }, }

application = { launchPad = false, content = { width = 768, height = 1024, fps = 60, scale = "letterbox", xAlign = "center", yAlign = "center", }, }
1 Like
#2

Can you provide a simple project that generates the above images (exactly the code that generates it) and put it in a .zip file and share it with us please?

Rob

#3

Hi Rob. I’m seeing this issue by building any Corona sample projects. Here’s HelloWorld and Liquidfun from the sample folder.

You’ll notice:

  1. The text is blurry and slightly cropped in the top part. Look at the capital letters.

  2. The planet image is blurry.

My system is running:

CoronaSDK 2019.3563

MacOS Mojave 10.14.5

Firefox 71.0 & Chrome Version 79.0.3945.88 (Official Build)

 

Ben.

#4

Another issue: if you look closely at the top border of the app inside the browser window (liquidfun example), you’ll notice the top border is slightly cropped.

i’m seeing this inside my own app too. To see the app’s edge clearly, i added 20 px to position the app lower inside the browser window.

#5

I’m seeing the same result building sample projects in Windows too…

Running on: 

CoronaSDK 2019.3563

Windows 10 Home (version 1909)

Google Chrome Version 79.0.3945.88 (Official Build) (64-bit)

#6

Make sure you are setting your window size in build.settings. See: http://docs.coronalabs.com/guide/distribution/win32Build/index.html#windowsettings

#7

While waiting for replies, I was testing those settings myself. No improvements whatsoever.

Ben.

#8

https://forums.coronalabs.com/topic/76818-weird-window-size-bug/

I already tested everythings. And proveded test projects and stuff.

Waiting for this bug to be resolved.

#9

Hi Rob,

Any news?

Ben

#10

I also find there is very slight blurring when I run on a browser. The same font rendered directly to the browser (outside Corona) does not blur…

I cannot guess as to the cause, it may not be anything the Corona team have developed, it might be in whatever tool is used to convert to make it run on a browser.

In any case, I just wanted to say that I see the same thing. It’s not a super big deal for me, but obviously it would be nice for text to be sharp.

#11

More generally, I was thinking something about bugs and things Corona users want fixed, we all want our issues fixed as soon as possible - but how to prioritise these fixes? And how to fund them (nor sure if Corona is open source team or commercial), but anyway how about this: https://forums.coronalabs.com/topic/76915-bug-bounties-for-fixes-and-enhancements/

#12

Actually it’s happening with desktop apps too. Even system fonts in Corona are blurred when the same fonts in the app’s window title and elsewhere are not.

#13

I was going to spend some time today working out how to get good graphics for these other platforms. I see your screenshots and clearly something is amiss. Before I started making changes to build.settings, config.lua, etc. I decided to run my own test, using the latest daily build and HelloWorld. First, on my MacBook Pro, building for macOS showed no appreciable difference between the simulator window and the actual running app. Since most of you are on Windows, that didn’t seem like a valid test, so I hopped on a Windows 10 desktop.

I loaded the unmodified HelloWorld in the simulator. Built for Windows, built for HTML5 all without changing a single thing other than bringing up the build screen and taking the defaults. HTML5 is on the left, running in a fairly recent version of Chrome. The center is the Simulator and the right is the Windows executable. I see no appreciable difference.

I’m at a loss as to where to begin, other than 1. You’re setting width and height in config.lua to a reasonable size that matches your 1x graphics sizes (avoiding upscaling) and 2. make sure you’re setting the defaultWidth and defaultHeight in build.setting’s “windows” table.

The sample app doesn’t have the defaultWidth and defaultHeight so that theory was shot.

Rob

#14

After some investigations, I think this has something to do with HiDPI (High DPI) screen settings.
 
Testing on a MacBook Pro 16" with an external 4K monitor, I’m using QuickRes to set screen resolutions. In the QuickRes menubar, there are two sets of screen resolutions: HiDPI and Standard. For example, the 4K monitor native resolution is 3840x2160, there are two such resolutions in the menu.
 
In HiDPI mode at the monitor’s native resolution, native.systemFont text are blurred. The same text is sharp in the Standard mode. However, once the resolution is set to non-native, all text are blurred even though the app’s title text (OS rendered text) is still sharp. So it looks like Corona doesn’t support HiDPI (or Retina) screen modes properly.
 
You can download test files and build it for Mac or Windows desktop and try it.
 
Dave

#15

This isHelloWorld on Mac with Retina screen 560x graphics. Simulator on left, then safari, then chrome.

https://pasteboard.co/IO5jyFk.png

Do actually look pretty similar

This is the sample, Corona on left, Safari on right.

https://pasteboard.co/IO5mJjQ.png

Both look kind of blurry tbh

The same but config.lua 320/480

https://pasteboard.co/IO5sjLu.png

#16

Hi Dave,

I think you’re right. Here’s two images from the “same” browser window from my Macbook Pro. It does seem to be a HiDPI (Retina) issue.

Top (external): 23.8" 1920x1080 (93 ppi) “FHD” display

Bottom (laptop): 13.3" 2560x1600 (227 ppi) “Retina” display

Ben.

#17

@Rob

Hey, thx for taking time to address this.

But, we also tested it a lot. On many different configurations. Sometimes it does work, but mostly - it upscaled(blurred).

You did a test - can you post a link to it? So we can sent you screenshots if that working correctly.

Like I did here: http://theelitegames.net/html5/upscale/

If you will run it - can you post a screnshot of this webpage?

#18

(second post)

@Rob:

Actully, the problem right on your screen:

If you will take a closer look - your scales are screwed!

Your image is looking “ok” - couse it is not good one(it is already blurred)(edit: it is blurred! just not good image to demonstrate 25% blurr effect)

It is good when you have one image, but that is just another source of lags.(upscale does decrease performance of app).

My point - stuff that you see in your simulator dosent look same as on web page. That extra 20%-25% upscale thing is NOT ok.

#19

Still not fixed*

#20

Looks like this is still happening on macOS. But a workaround is to check the OS programmatically with system.getInfo( “platformName” ) and then to scale everything down.

Text does not look blurry this way on Retina displays.