Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Graphics and Fonts Blurry
Started by gamebit.labs Dec 20 2019 10:39 PM

* * * * * 2 votes
18 replies to this topic
html5
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

gamebit.labs

[GLOBAL: userInfoPane.html]
gamebit.labs
  • Contributor

  • 224 posts
  • Corona SDK

Attached File  Screenshot 2019-12-20 at 5.19.31 PM.png   179.25KB   0 downloads

 

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",
    },      
}   

  • prographodeveloper likes this

[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,605 posts
  • Enterprise

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



[TOPIC: post.html]
#3

gamebit.labs

[GLOBAL: userInfoPane.html]
gamebit.labs
  • Contributor

  • 224 posts
  • Corona SDK

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

 

Attached File  Screenshot 2019-12-22 at 11.37.04 AM.png   781.48KB   0 downloads

 

Attached File  Screenshot 2019-12-22 at 11.35.06 AM.png   731.12KB   0 downloads

 

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.

 

 


  • prographodeveloper and pixec like this

[TOPIC: post.html]
#4

gamebit.labs

[GLOBAL: userInfoPane.html]
gamebit.labs
  • Contributor

  • 224 posts
  • Corona SDK

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.

 

Attached File  Screenshot 2019-12-22 at 12.07.35 PM.png   818.61KB   0 downloads


  • pixec likes this

[TOPIC: post.html]
#5

gamebit.labs

[GLOBAL: userInfoPane.html]
gamebit.labs
  • Contributor

  • 224 posts
  • Corona SDK

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)

 

Attached File  Annotation 2019-12-23 233734.png   90.93KB   0 downloads


  • pixec likes this

[TOPIC: post.html]
#6

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,605 posts
  • Enterprise

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



[TOPIC: post.html]
#7

gamebit.labs

[GLOBAL: userInfoPane.html]
gamebit.labs
  • Contributor

  • 224 posts
  • Corona SDK

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

 

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

 

Ben.



[TOPIC: post.html]
#8

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

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

 

Ben.

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.



[TOPIC: post.html]
#9

gamebit.labs

[GLOBAL: userInfoPane.html]
gamebit.labs
  • Contributor

  • 224 posts
  • Corona SDK

Hi Rob,

 

Any news?

 

Ben



[TOPIC: post.html]
#10

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 331 posts
  • Corona SDK

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.



[TOPIC: post.html]
#11

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 331 posts
  • Corona SDK

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/



[TOPIC: post.html]
#12

Quantumwave

[GLOBAL: userInfoPane.html]
Quantumwave
  • Contributor

  • 125 posts
  • Corona SDK

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.

 

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.



[TOPIC: post.html]
#13

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,605 posts
  • Enterprise

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.

 

Attached File  coronagraphics.png   744.38KB   0 downloads

 

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

 



[TOPIC: post.html]
#14

Quantumwave

[GLOBAL: userInfoPane.html]
Quantumwave
  • Contributor

  • 125 posts
  • Corona SDK

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



[TOPIC: post.html]
#15

prographodeveloper

[GLOBAL: userInfoPane.html]
prographodeveloper
  • Contributor

  • 331 posts
  • Corona SDK

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



[TOPIC: post.html]
#16

gamebit.labs

[GLOBAL: userInfoPane.html]
gamebit.labs
  • Contributor

  • 224 posts
  • Corona SDK

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

 

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.

 

Attached File  Screenshot 2020-01-02 at 11.36.53 PM.png   33.22KB   0 downloads

 

Attached File  Screenshot 2020-01-02 at 11.37.01 PM.png   23.82KB   0 downloads



[TOPIC: post.html]
#17

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

@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?



[TOPIC: post.html]
#18

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

(second post)

@Rob:

Actully, the problem right on your screen:

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

Attached File  weird_resize_10.png   836.56KB   0 downloads
 
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.


[TOPIC: post.html]
#19

efgames.net

[GLOBAL: userInfoPane.html]
efgames.net
  • Contributor

  • 223 posts
  • Corona SDK

Still not fixed*




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: html5