WebGL Publishing Issues

Unity Courses Ask
,
#1

So I have finished my game & the windows/mac version is perfect. The WebGL versions are plagued with the following problems:

  1. None of the stages are properly sized.
  2. None of the movie clips play.
  3. The movie clips (that don’t play causing a black screen) block objects in the UI on some stages.
  4. Game does not load (solved by using Solution #6)
    Sofar I have tried (in terms of solutions):
  5. Making sure all my canvas are the right size.
  6. Making sure I have canvas in every scene.
  7. Putting the video clips in the canvas & not just in the hierarchy.
  8. Making sure I “Scale with screen size”.
  9. Read this page about 4x & tried to figure something out
    https://forum.unity.com/threads/webgl-build-doesnt-load-in-browser.948400/?fbclid=IwAR1-xmKpZPb9fU2Wk5kHr-MM5Mi3CuVZH4yHZeUi3kEjT9mMYzERiEvFonY
  10. Use every configuration available in Publishing Settings.
#2

Hi David,

Congratulations on completing your game. Given you didn’t do anything fancy that is not supported by WebGL, I’m relatively sure that at least some of the problems are solveable.

Could you please share a screenshot of the problem?

Also check the console in your browser while running your build. You could try to enable “Developer build” in the build settings and build your game again. That could help you get more information on potential problems. If the movie clips do not work, there could be a NullReferenceExceptionError or a security restriction of your browser. Or something else. That’s impossible to tell without additional information, so try to gather as much information as possible and don’t assume that something is working just because it looks as if it was working.

#3

image
image1920×1080 354 KB

image
image1920×1080 103 KB

Those are WebGL pix
image
image1920×1080 416 KB

image
image1920×1080 405 KB

Those are Windows/Mac pix

#4

Thank you for the screenshots. I assume you want a 9:16 aspect ratio?

If so, set a reasonable resolution in File > Build Settings > Player Settings. 800x600 or something like that is not 9:16. Furthermore, select a different template, one which does not allow full screen. That should fix the problem.

#5

Hmmm I was thinking something you said earlier was key. Here’s what I mean. I have my windows set to 1920x1080, which I assume is why it looks exactly the way I want it to on windows. But according to google 9:16 is 1080 so. Are you telling me to resize all of my stages so they’ll fit Web GL sizing ratios? I assume that’s why you’re suggesting 800x600.

#6

In this course, we usually opt for a relatively low resolution to allow most people on the internet to play our game. Since most screens are able to display a resolution of 800 x 600 in the browser, that resolution is a relatively safe bet.

However, 9:16 means that the height has got a higher value than the width. If you set the height to, let’s say, 1080 px, a part of your game screen will get cropped because of the Windows task bar and the browser’s top bar.

To be on the safe side, you would rather set your height to like 600 px. The width in an 6:19 aspect ratio would be (600 * (9/16) = 337). The resolution which you set in the Player Settings would be 337 x 600. That’s just an example, though. If you know the minimum screen size of your future players, do the maths yourself and use that resolution.

#7

Ohhh so I think I get you’re saying WebGL games are lower resolutions because ppl play in browsers. This is why you told me to save the original copy (Which is the windows) & then edit my screen sizes to work with WebGL.

#8

Exactly. :slight_smile:

#9

When I changed my resolution to 800x600 I get this.

image
image1920×1080 202 KB

When I change my resolution to 960x540 (1080 /2) I get this:
image
image1920×1080 202 KB

When I try 800x600 canvas & player settings I get this:
image
image1920×1080 364 KB

image
image1920×1080 353 KB

This is in unity which always seems to play the video clips.
image
image1920×1080 371 KB

This is the webGL render.
image
image1920×1080 352 KB

In terms of resizing the game, I’m not sure what else to do to get things to appear on screen & the resolution to be correct.
My credits scene does not have a canvas. That scene is a 74 second movie that in windows works perfectly & then goes back to the main menu automatically. In WebGL that scene is totally black.
It’s not just the pages with videos it’s every scene giving me the results listed above.

#10

It’s something that I continue to struggle with too. It’s all about UI settings/positions/anchoring/reference resolution etc.

#11

It might be that the player prefs are causing this issue. Go to Edit > Clear all PlayerPrefs. Do not change anything in Unity. In your Player Settings, set the resolution to 960x540.

Select the “Minimal” template. See here.

Then build your game again.

#12

image
image1920×1080 104 KB

Great call Nina you’re amazing. Well one issue I’m having is the movies still are not showing.
There’s a 2nd issue but before I ask you for more help I’m going to try to solve it myself. Based on your help I should be able to resolve the 2nd issue but the movies will still not play.

#13

I’m sorry but also, in Target Platform I don’t have the option for mac. Maybe you can help with that too? I know you help me a lot & I truly appreciate it.

#14

Regarding the missing target platform, add the “Mac” module in Unity Hub.

Regarding the missing movies, open the console in the browser. Maybe there is a helpful message. It might be that the issue is caused by the fact that you are trying to run the game on “localhost”. Perhaps the videos would work “on the internet”.

#15

Thanks. I had to upgrade my unity version the option of add modules was not available in 2020.3 but in 2020.3.25 I can. I added the modules & upgraded but I’m getting the same results. Oh I was able to fix the 2nd problem. It would take a few hours to get right but the movies still would not work in WebGL.
I’ll have my boy test out the mac render.
Thank you again.

#16

You could test ARTOFCODE’s solution.

And this might also be interesting:

And this:

Don’t forget to read the comments under the respective answers. They might contain relevant information too.

#17

From the links you sent me I did what I understood. I’m still trying to figure out some things with this WebGL having movies. The settings you suggested would be ideal if I had no movies in the game. I looked around & I don’t think I found one WebGL game that had movies in it.
I’m not sure how to solve this problem or what to do with future games that I want to have movie clips in. For the sake of showing you 2 a finished product I will provide links below.

#18

@MichaelP
Well here is my google drive with the windows game.
https://drive.google.com/drive/folders/1qLmkAaeQKuzlCX3j03gBugKK7u6FSLg0?usp=sharing
& this is a gameplay video (Mike P has already seen this).

One thing that’s cool about this game is it’s actually fun. Thank you 2, Rick & others (who are all mentioned in the credits for your help.

2 Likes
#20

Awesome audio

#21

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Privacy & Terms