Changes to the WebGL loader and templates introduced in Unity 2020.1

Unity Engine
,
21

Hey I am trying to use Unity 2020.1(beta) and I have a .jslib in the plugins folder. I get an error saying “unityInstance is not defined”, how do I fix this?
EDIT

Ok I got it to work. It would be nice if createUnityInstance resolved the promise after the game actually starts. Right now, it resolves when the bar finishes loading, but after that there is still a splash screen that fades in a few seconds before you actually see the game.

EDIT
I’d like to report a bug on this new 2020.1 version(maybe this bug was always present? I don’t know). It seems that UI buttons don’t follow the canvas scale mode in webgl. I set the canvas UI Scale Mode to Constant Pixel Size. However, it works as if I had set Scale With Screen Size. So the buttons get super small on portrait mode. Any workaround in the meantime?

1 Like
22

I am having this same issue with “unityInstance is not defined” for my Send Message. I would really appreciate a little more insight on how you were able to fix it.

23

Ok this is the second time somebody asks me, so I’ll just leave the answer here.

The default template has the following code:

}).then((unityInstance) => {

So everything you want to do with the unityInstance, you do it inside that block of code. Alternatively, if you want to use the unityInstance elsewhere, you can do the following:

After var script = document.createElement("script");, insert a new line and add the following code var unityInstance;.
Now change the line }).then((unityInstance) => { to }).then((ui) => {, add a new line below it with the following code unityInstance = ui;

By doing this you are exposing the unityInstance variable to your .jslib file again. For some reason the devs decided to not do that anymore, or maybe it’s just cuz it’s in beta or something.

9 Likes
24

Thanks, I could not wrap my head around it at first, makes a lot of sense with your breakdown, and it solved my issue!

1 Like
25

I can’t think of a reason to get the page’s unityInstance from a .jslib file, as the code in the .jslib file is already in the scope of the Module, which is in the unityInstance. And even within the Module, there’s reference to the instance - Module.unityInstance…

26

Is there any way to just make it backward compatible with a template that worked in 2019.3?

27

Hi guys.
It seems this new version of Unity is generating files for webgl builds in a diferent way. I’ve tried looking for a new way to load the builds in the Oficial Documentation but it seems this isn’t updated. Is there a detailed page showing how can I modify my html page and call my methods inside Unity with sendMessage

6125795--667739--24-07-2020 09-51-51.png
6125795--667739--24-07-2020 09-51-51.png1906×982 135 KB

5 Likes
28

The official documentation says something about embedding the config data in the HTML page rather than treating it as an external resource to save a single HTTP GET. Generally, the theme appears to be “You’ll like this new way of doing things so much better, you’ll be happy to scrap your old templates and write new ones from scratch.” So that’s the approach I’m taking. I’m generating a vanilla build from the basic template, then I’ll instrument it with the variables, add what I need, and make that my new template.

I guess I could share it when I’m done.

29

Here’s what I landed on. Adapt as you please.

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{{{COMPANY_NAME}}} | {{{PRODUCT_NAME}}}</title>
    <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    body {
      height: 95%;
      width: 95%;
      text-align: center;
    }

    div#unityContainer {
      width: 100%;
      height: 100%;
    }
    </style>
  </head>
  <body style="text-align: center">
    <div id="unityContainer">
      <canvas id="unity-canvas" style="width: 100%; height: 100%; background: #000000"></canvas>
    </div>
    <script src="Build/{{{LOADER_FILENAME}}}"></script>
    <script>
      var gameInstance = createUnityInstance(document.querySelector("#unity-canvas"), {
        dataUrl: "Build/{{{DATA_FILENAME}}}",
        frameworkUrl: "Build/{{{FRAMEWORK_FILENAME}}}",
        codeUrl: "Build/{{{CODE_FILENAME}}}",
        symbolsUrl: "Build/{{{SYMBOLS_FILENAME}}}",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "{{{COMPANY_NAME}}}",
        productName: "{{{PRODUCT_NAME}}}",
        productVersion: "{{{PRODUCT_VERSION}}}",
      });
    </script>
  </body>
</html>
1 Like
30

Any chance you have an nginx version for this?
Been fiddling with it for a while but not sure what I need.
I enabled gzip compression and added application/octet-stream to the list of gzip types in the config, mostly to see if I could at least get past the “strict MIME type” error. But so far I haven’t been able to get rid of even that error (I’m guessing there are other issues since there were more encodings and contents types that needed to be added).

31

I later found that you need to capture gameInstance in the “then” action taken after loading is complete. That’s only necessary if you are doing something that requires you to use the game instance (like sending it messages).

32

does 2020.1 have improvements on graphics? how about anti-aliasing problem?

1 Like
33

Thanks this helped me, my testing brought out you need a Explicit name for your method, you cant use the method name multiple times to give over different values.

Do someone know, is it Possibile to make the same calls in Projekt Tiny and what i need to change for it?

34

The link to the server configuration code samples in the WebGL Compressed Builds manual is broken in the 2020.1 documentation.

edit: removed issue about file names as hashes as it has already been discussed in this thread

35

The links are not broken, just the content is only valid for 2019 and older. if you’re on apache, I got this configuration that is working for me: https://github.com/JohannesDeml/UnityWebGL-LoadingTest/blob/master/Configuration/2020/.htaccess

1 Like
36

That configuration is exactly what is stated in the documentation but under a new url.
https://docs.unity3d.com/2020.1/Documentation/Manual/webgl-server-configuration-code-samples.html

Previously that was https://docs.unity3d.com/2019.4/Documentation/Manual/Webgl-Server-configuration-for-WebAssembly-streaming.html

But yeah the link definitely is broken because if you go to https://docs.unity3d.com/2020.1/Documentation/Manual/webgl-deploying.html and click on the link it sends you to the Oops sorry that page seems to be missing.

6204003--681303--Broken Url.png
The link refers to:
https://docs.unity3d.com/2020.1/Documentation/Manual/webgl-server-config-code-samples

and it should be:
https://docs.unity3d.com/2020.1/Documentation/Manual/webgl-server-configuration-code-samples.html

2 Likes
37

Ah I see, my bad, I thought you actually meant the config was broken. Sorry for that.
The configuration I posted does have some differences. The configuration suggested does not work for LiteSpeed servers (which has a similar syntax to Apache). Mine should work for both.

38

I can’t get any of this to work on IIS at all. I don’t think IIS even supports extensions with multiple “.” characters.

Has anyone had any success getting this working on IIS? Thanks

39

I’m working with IIS, I’ve got it working. What settings are you building with though?

40

Thanks, Brotli - I used Brotli before the changes. I can’t see what the web.config needs to look like for the new way. The old one had these settings and worked fine:

<?xml version="1.0" encoding="UTF-8"?>