Website rendering on mobile

Questions
#1

I have created an app that runs natively as an apk for Android and in a web browser.

In the browser (on mobile) the rendering is not as sharp as the app and indeed in some textual areas it’s very blurry. Is there any way I can improve this?

#2

This could be related to the way the canvas is scaled vs how the native version renders. Are you testing with the same resolution? And it is mainly text that is blurred? What kind of font are you using? Distance field or bitmap? What if you run on web on desktop?

#3

I recently dealt with some confusion in regard to how to work with fonts and the .gui asset type. Originally, I had tried changing the scale on the text node but the text was blurry. So, I created a font asset with the desired size and that seemed to do the trick. Just running on Windows. I tried, changing the size of the builtin system font and that was unresponsive though. This may not have anything to do with the issue you are having, but I wonder how fonts or the builtin font is exported.

#4

The files in builtins are considered read only. You can make changes to them in the editor and test those changes by running the project using Project->Build. But you cannot include the changes in a bundled application. You need to copy the file(s) to your project, make changes, save and then bundle.

1 Like
#5

It’s not just the font:

Browser version:

ex_web

App version:

ex_app

This is on the same device. If it’s a limitation of the browser then that’s fine, but I was wondering if there was anything I can do to improve the look on the browser-based version.

#6

@Peter_Addison can you please share a zip file with a small repro case?

#7

Sorry, not sure how I do that.

#8

Simplify the project such that only the parts causing an issue remain, then put the project in a zip file (exclude .git, .internal and the build folders to save on space) and drag & drop the file into a response to this thread.

1 Like
#9

Cheers.

This is my first Defold project so please do not balk too much at my coding skillz :slight_smile:
Codex 2.zip (8.3 MB)

#10

Sorry for the delay in responding to you @Peter_Addison . I tested your project on macOS Chrome and Safari and the graphics look good:

Screenshot 2022-02-23 at 11.51.33
Screenshot 2022-02-23 at 11.51.331392×1466 208 KB

Which browser and OS are you testing on?

#11

No worries.

My bad - should have said it’s only on mobile browsers that the quality of the images deteriorates. On desktop it looks fine. The app on mobile looks fine too, but when you access the web version (www.codex-game.net) on a mobile browser the images are blurred.

#12

Oh, sorry. I should have read the entire post in more detail. You actually do mention this:

I’ll take another look!

1 Like
#13

Here’s on Chrome on Android:

Screenshot_2022-02-23-13-52-41-401_com.android.chrome
Screenshot_2022-02-23-13-52-41-401_com.android.chrome1080×2340 150 KB

The problem is most likely that the canvas is scaled to some percentage and this will inevitably impact the graphics. If you set Scale Mode in HTML5 settings in game.project to “No Scale” you see that the graphics is crisp (but it will probably not fit on your phone’s screen).

One solution is to more carefully think about the dimensions of your game and how you scale the canvas.

I’m sure developers such as @aglitchman and @AGulev can give advice since they’ve released many games on mobile platforms (Poki, Yandex etc)

1 Like
#14

:slightly_smiling_face:

I’m pretty sure that checking the hidpi option will solve the issue:

image

5 Likes
#15

Indeed it has! Many thanks :smiley:

1 Like