Question about building WebGL

[Mulligamez]

Hi!

I’m having some issues with building my project to WebGL and I can’t seem to figure it out so I must be missing something.

When I have built the project as a WebGL and uploaded it onto a hosting site, the quality is really poor. My sprites and TextMeshPro look really blurry. What am I missing when building the project?

When I build the project as a PC standalone it looks fine, just like it looks in the unity game view.

Am I getting by WebGL build settings wrong? and if so, what do I need to edit to solve the drop in quality?

I hope someone may be able to help me, I look forward to a reply

[hopetolive]

I didn’t build for WebGL before, but I will try to make you sure that you checked everything

As far as I know, there are two main categories defining quality: Graphics and Quality (if I am wrong, please correct me )

Graphics:

Quality:

Have you checked both sections? Maybe you can play with those settings and see the possible effects.

[Mulligamez]

Hi there Hopetolive,

Many thanks for your reply and for taking the time to investigate this for me!

Unfortunately I had already tried these settings to no avail, but I will keep trying to tweak the settings until I get it closer to what it should look like

[Nina]

Hi,

What resolution did you set in File > Build Settings > Player Settings in the WebGL tab?

[Mulligamez]

Hi Nina,

Thank for you responding

I set the resolution to 360 x 640 so that it fits better on itch/simmer, could this be my problem?

[Nina]

That should be fine. Could you share a link to your game on itch.io or simmer.io, please? I’d like to take a look at it because, at the moment, I’m not quite sure if I understood your problem correctly.

If the sprites are blurry in your game view in Unity, make sure that the scale slider value is not higher than 1.

[Mulligamez]

Sure thing, the link is https://mulligamez.itch.io/sub-shooter.

Below is a screenshot of my start menu, and as you can see the WebGl quality is really low (on the left) compared to the quality I have in unity/standalone build (on the right).

[Nina]

Wow, that looks really good, except for the blurred text.

What exactly did you do in your game? Could you share a screenshot of the Inspector of the Start button and the Inspector of its Image and Text/TMP game objects? Maybe the button is scaled? And what Canvas mode did you select? Do you use a Canvas Scaler?

The sprites look fine in the game, don’t they? What about the score display in the top right corner? Does it look blurry, too?

[Mulligamez]

Thank you! I’ve loved this part of the course so I’ve put a lot of effort into the sprites, particle effects and other bits, so its frustrated me to get to this point and have issues

Here are screenshots of the Start Button and the Start Text:

and the canvas scaler is set to scale with screen size:

The sprites, lives and score also look a little blurry in the game too. Here is a screenshot of the game to compare:

[Nina]

As I suspected, the values are not integers/rounded.

There are no half pixels on your physical screen. WebGL and standalone versions render things in your scene in different ways, which means that the half pixel could look blurred in one version, and like a perfect line in the other version.

For your text, I would recommend not to use the stretch mode but the normal mode. Set a pixel size and make sure that the values do not have any decimals. You’ll probably have to adjust the font size. 90 is very large.

Did this help?

[Mulligamez]

Ahh okay, I see, that does make sense and I cant believe I didn’t notice the decimals!

So I edited everything that was not a round integer and changed everything from stretch to normal and re-oploaded the game but it still looks blurry.

[Mulligamez]

Could it be the rect transform of the canvas? I’ve just noticed that its greyed-out and the height and scale aren’t integers?

[Nina]

@Mulligamez

Could it be the rect transform of the canvas?

That should not be causing the problem. What you could try is to set your target resolution in the Canvas Scaler script. Maybe that’ll help.

If not, could you upload your project onto GitHub (without the Library and the Temp folder!) and share a link here? Then I could take a look into your project. If I find the problem, I’ll send you a pull request on GitHub.

[Mulligamez]

Sure, that would be amazing if you could have a look for me, although I’m not actually sure how to upload my project to GitHub. I’ve created an account, how do I then upload my project folder? Do I just create a Zip of the different folders (excluding the library) and post the url of the page?

[Nina]

Does this video help? Or this one?

[Mulligamez]

Ah ha, thank you, those videos helped!

Gosh I found that so hard to do that and I’m not even sure if I’ve done it right, I’m sorry it took me a while!

Anyway, here is the link: https://github.com/Mullibeanz/Sub-Shooter-Test

I hope that worked?

[Nina]

It worked after I downloaded and imported it a couple of times into Unity 2019.3.6f1. Since I got a few internal errors in Unity, I won’t send a pull request. Maybe something went wrong when you uploaded your repository.

Fortunately, I can see the blurry text in the Unity Editor, so I don’t have to build to WebGL.

---

The first thing I did was changing the UI Scale Mode in the Canvas Scaler to “Constant Pixel Size”.

---

Subshooter title:

---

Your name:

---

Start button (as an example for the other buttons):

You’ll have to adjust the position values as well as the width and height, and maybe also the font size to get the desired look. I didn’t spend any time to make the GUI look exactly like yours.

---

And the regenerated font atlas:

If the text still looks blurry, increase the font size in the Font Assets Creator.

---

With these settings, the UI looks fine in my Unity. I won’t share a screenshot because the program compresses the image and makes it look blurry. I also didn’t test this in a build because of the errors in the Unity console which refer to some “deep electronic house” file which cannot be read.

Did the settings fix the issue for you?

[Mulligamez]

Ahh excellent, I’m glad you were able to access it! Not sure what could have gone wrong as I didn’t get an error message, never mind.

Thank you so much for spending the time to help me with this, it is much appreciated!

Regarding the canvas scaler, is this necessary? When I change it to constant pixel size all my UI jumps all over the place, do I just have to suck it up and resize and reposition everything?

I went through my scenes and checked all the settings in the inspector and made them the same as you showed here. I also re-generated my font multiple times with different sizes/render modes and I managed to improve the final WebGl quality a bit from yesterday so there is definitely progress!

How it looked yesterday:

How it looks today:

How it looks in unity:

It still doesn’t look quite right, especially on the smaller text:

This is how it looks on the WebGL build:

This is how it looks in unity:

The sprites also don’t look quite right, is there something I am possible missing in regards to the settings of those?

Also Im not sure what the error for the deep electronic house file could be as I haven’t used it in the project

It definitely feels like its getting closer to what it should be though

[Nina]

@Mulligamez

Regarding the canvas scaler, is this necessary? When I change it to constant pixel size all my UI jumps all over the place, do I just have to suck it up and resize and reposition everything?

The problem is the following: When Unity scales the textures, it could render “half pixels”. Then you’ll get a blurry look. What you could try is to test the “Pixel Perfect” option in the Canvas component with the “Scale with Screen Size” option. However, I read a while ago that is is not that performant (or was it something else?) but it shouldn’t matter in your game.

Use the target resolution for the reference resolution in the Canvas Scaler when you use “Scale With Screen Size”.

Are you happy with the menu? If so, how much smaller is the small text?

---

I forgot to mention that I set the filter mode of the font atlas to “Point”.

You could also try to tweak the sharpness value:

---

If you have very different font sizes, it could make sense to generate another font asset for small fonts sizes.

Try to use font sizes which are divisible by 2. Since you have a pixel font and want to achieve sharp edges, it might happen that the font atlas, which is a picture, gets scaled down to an odd pixel dimension, and you’ll get “half pixels” again.

[Mulligamez]

Ah I see, I think I understand what you mean now. I tried the pixel perfect option on the canvas scaler and from what I can tell there isn’y much change, but I’ve been looking at it for so many hours it could just be me!

That’s a good suggestion about the font sizes too, I generated a separate one for the smaller text and made sure all my font sizes are divisible by 2 and built to WebGL again. It still looks blurry, but the text looks better than it did before so I’m happy to have made some progress