Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3.3-rc8] Visual quality greatly degraded on mobile HTML5 from 3.2.3 to 3.3 #47893

Closed
eh-jogos opened this issue Apr 14, 2021 · 5 comments
Closed

Comments

@eh-jogos
Copy link

eh-jogos commented Apr 14, 2021

Godot version: 3.3-rc8 (tried it with rc7 as well, upgraded to rc8 but problem persisted)

OS/device including version: Android 7.0, phone is a Asus Zenfone m1 or something similar, it's from 2018.

Issue description:
Our game is an educational game that must run on the web, on pcs or mobile. We begun testing out project with 3.3-rc7 to see if we could gain some performance, and while we did get a bit of an improve, the visual quality dropped a lot when accessing through mobiles.

I'm attaching an MRP with one logo, a group of images from one of the characters, and a button using styleboxflat and a dynamic font. They are exaclty the same as used in game, with the same import options (or lack of any customized import options), and I think the same configurations on the project settings, at least in the Display department.

As you can see from the images, or if you run the same MRP project in the browser and then set up ngrok or something similar to open it on your phone:

  • First run the project in 3.2.3 and access it from your phone and you'll see the images and the buttons are nice and crisp
  • Now run teh same project in 3.3 and access it from your phone and you'll se the images are very pixelated and even the font and button with the styleboxflat look bad

The only way I could kind of reproduce it on the PC browser was changing the export presset "Canvas Size Policy" to "None". Then running the project on the web in the PC makes it really small and looks almost the same as the mobile one. But you can see the "Adaptative" mode is kind of working in the mobile version because when you change the project to "keep_width" it centers the canvas on screen. But it might be related to this somehow?

When I change "Canvas Size Policy" to "Project" it stays crisp both on pc and mobile, but in mobile it doesn't matter what I choose in the "Aspect" property in the project settings, it doesn't adapt the content to mobile size in anyway, it always shows the full resolution so I can only see the beggining of the "Aliquest" logo. On the PC, if I resize the window, it doesn't adapt to it in any way, just like in the mobile browser. Is that how it is supposed to behave?

Steps to reproduce:

  • Open the MRP in Godot 3.2.3 and click to run in browser, set up ngrock or something to be able to open this page in your mobile phone. Open it there and see that the images are all nice and crispy
  • Open the MRP in Godot 3.3-rc8 and click to run in browser, set up ngrock or something to be able to open this page in your mobile phone. Open it there and see that the visual quality in general has greatly degraded.

Minimal reproduction project:
mrp_image_quality.zip

The set of images below shows the MRP as exported through godot 3.2.3 first and then by Godot 3.3-rc8

horizontal_3 2 3
horizontal_3 3
vertical_3 2 3
vertical_3 3

@eh-jogos
Copy link
Author

eh-jogos commented Apr 14, 2021

An easier way to reproduce it on PC that I didn't though about is just to export with "Canvas Size Policy" set to "Adaptative" and resize your browser window T_T

Feels stupid that I didn't though about it before and wrote loads of paragraphs more than needed.

@jpdurigan
Copy link

I'm working with @eh-jogos in this project and the same occurs in iOs (tested in iPhone 8).
Sending a screenshot of this issue reproduced in computer browser (running on Chrome browser, Mac OS):
image

@Calinou
Copy link
Member

Calinou commented Apr 14, 2021

You need to check Allow Hidpi in the Project Settings and export the project again for hiDPI to work. Otherwise, a lowDPI fallback is used (which also improves performance). Previously, this setting didn't affact HTML5, but now it does.

@eh-jogos
Copy link
Author

@Calinou

You need to check Allow Hidpi in the Project Settings and export the project again for hiDPI to work. Otherwise, a lowDPI fallback is used (which also improves performance). Previously, this setting didn't affact HTML5, but now it does.

Thanks a lot! This fixed it on mobile! Not really when just resizing the browser window size on PC, but I guess this is just forcing the issue and beside the point!

Again, thanks for the solution!

@Calinou
Copy link
Member

Calinou commented Apr 14, 2021

I amended the 3.3 changelog to mention this hiDPI setting change being required to restore hiDPI support (previously, it was always enabled, unlike other platforms).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

5 participants