【问题汇总】Unity发布WebGL项目时需要注意的问题

头一次使用Unity开发项目，发布网站的时候碰到了各种各样的问题，在此做个阶段性汇总。

使用Unity的版本为2020.3.24f1c1

• 自定义模板

        在Asset文件夹下建立WebGLTemplates文件夹。将模板放在这里，PlayerSetting中就可以选择自定义模板了

        *模板可以从Unity自带的模板修改。Unity自带模板路径如下

        你的Unity安装路径（X:\Unity 版本号) 下

        \Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates

        模板是文件夹不是里面的Html文件和图片，copy的时候要注意

• 全屏适应性

        发布WebGL的时候会有默认的输出尺寸，一般是无法满足需求的，大多需要做全屏适应性的修改，要实现全屏，需要对html进行修改，内容如下

        1. Head中增加一个meta标签内容如下

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

        2. 修改CSS样式

       Body标签的Style增加一个margin:0px

        删除生成的Html中Canvas标签的Height和Width属下，style中的也要删除

        3. Head中增加一个Script节点，在节点中写一个变更Canvas高宽的方法

function reset(){
    var c=document.getElementById("unity-canvas");
    c.style.width="100vw";
    c.style.height="100vh";       
}

        在Body中用onload与onresize调用这个方法

        *也可直接将以上内容直接写入模板，这样就不需要每次Build项目都要重新写一遍

• 一些加快WebGL加载的办法

        参照这篇文章进行设置：Unity开发优化方案：WebGL篇 | U3DC.COM

        其中的Strip Engine Code属性，有很多种说法，有说选上的有说别选的。大体上就是这个代码剥离可能会剥离程序需要用到的部分，看个人情况了。

• 关于Web.Config

        Unity生成后默认是没有这个文件的，你会发现使用BuildAndRun后打开的网页中程序可以正常运行，但是如果发布在服务器上（如本地IIS）就无法运行了。

        问题主要在 Decompression Fallback 这个属性上，默认是不勾选的。生成的程序的Build文件夹中的文件后缀为*.gz，网页中打开程序会在页面上显示一个红框，内容大概是*.gz的包有错误，需要修改。网上找了各种办法，各种修改web.config都没有用，最后采用了查到的最多的办法，把它勾选上。

        勾选上Decompression Fallback后，生成的程序的Build文件中的文件后缀就变了，这个后缀是根据你的压缩方式（Compression Format）决定的。压缩方式为Gzip时，文件的后缀时unityweb，如果选择不压缩“disable”，就没有特殊的后缀

        生成的程序的Build文件内有data文件(gzip下时data.webunity，其他类似)，js文件（framework.js.unityweb和loader.js，loader.js不会有其他后缀），wasm文件。

        此时用浏览器访问项目发现依旧不能正常浏览。这时需要在webconfig中注册这几个文件类型，webconfig内如如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
            </files>
        </defaultDocument>
    <staticContent>        
        <remove fileExtension=".data.unityweb" />
        <mimeMap fileExtension=".data.unityweb" mimeType="application/octet-stream" />
        <remove fileExtension=".wasm.unityweb" />
        <mimeMap fileExtension=".wasm.unityweb" mimeType="application/wasm" />
        <remove fileExtension=".js.unityweb" />
        <mimeMap fileExtension=".js.unityweb" mimeType="application/octet-stream" />
    </staticContent>
    </system.webServer>
</configuration>

        之后就可以正常访问了。

• Unity WebGL 调用JS

        有时会出现需要调用html页面上的内容或者JavaScript内容的情况。

        首先需要在index.html上写对应的js方法

        然后在Asset下建立Plugins文件夹。在文件中建立一个后缀为jslib的文件，找到的文章中大多使用的是"__Internal.jslib"（暂不清楚是不是固定的文件名）。

        __Internal.jslib内容如下：

mergeInto(LibraryManager.library, {
    //这里的Init是C#中调用的名称
    Init: function () {
        var res = Init(); //这里的Init是Js方法名
        //有返回值的，要先分配空间用于存储返回值
        var bufferSize = lengthBytesUTF8(res)+1;
        var buffer = _malloc(bufferSize);
        stringToUTF8(res, buffer, bufferSize);
        return buffer;
    },
    //通过UserAgents判断是否是移动端
    IsMobile: function(){
        var userAgentInfo = navigator.userAgent;      
        var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        for (var v = 0; v < Agents.length; v++)
        {        
            if (userAgentInfo.indexOf(Agents[v]) > 0)
            {   
                return true; //如果是手机端就返回1
                break;       
            }     
        }       
        return false; //如果是pc就返回2
    },
});

        两个方法分别是获取HTML页面中的Init方法的返回值和直接使用navaigatorr.userAgent判断当前是否是移动端的。

        上面的内容完成后就是在C#脚本中调用了

//中括号调用DLL，DLL名称是jslib文件名称
[DllImport("__Internal")]
//方法名为jslib中的方法名
private static extern string Init();


//应用
void Start(){
    string info = Init();
    Debug.Log("Info:"+info);
}

        通过DllImport引入__Internal文件，之后就可以调用sjlib中的方法了。

        这里的JS方法只能在发布后获得实际的返回值。在Unity中，是无法获得返回值的

• 最后

        项目的画面虽然已经可以做到全屏适应（PC端与移动端），但是UI的双端适应还是没有搞定。往往是做好了PC端适应，移动端就变形，或者反过来。找了一些办法，但是都不好用，目前是采取两套UI，通过判断当前是否是移动端决定显示那一套。

        最近在研究AssetBundle，希望别在出那么多难缠的问题了