【unity webgl制作手机h5小游戏】——加载页面修改（完结）

大家都知道在unity中用webgl发布后它有一个加载界面是unity的，这个很简单的页面，那我想修改成一个自己的页面怎么办呢？

我查了很多的方法不过好像是专业版能修改好像，我也不太清楚，然后对js代码不太懂的我就打算去研究一下规律呗。

一、先看看加载时的前端代码

看看这一块整块内容就是在这个ID是unityContainer的div标签里的。
大概看一下这个内容的含义吧~

【unityContainer】是包含整个加载和游戏界面的容器
【canvas】是游戏加载出来的画面（想知道为什么？因为我在游戏加载出来之后，删掉这个div元素游戏就没了。）
【logoDark】是这个加载界面的logo
【progress Dark】是进度条

对了，这里说明一下，因为我做的主要是手机端能玩，所以这个前端代码些许修改。

二、修改背景

下面这个是我游戏的主界面（因为是公司还没发布的东西还是模糊吧），所以等unity那个加载背景我想改成我自己的，那就试试改变吧。
如果不想听我讲废话研究过程，就直接跳到我研究成功的地方去吧！

第一个尝试：修改html，失败！

我以为很简单就能做的修改，那就是直接修改html里面改一下样式呗，直接把图片改成这个。

改变unityContainer的背景：style=“background: url(Build/index.jpg);”

<div class="webgl-content" style="width:100%;height: 100%;">
      <div id="unityContainer" style="width:100%;height:100%;background: url(Build/index.jpg);"></div>
</div>

emmm…没有用！！！因为好像那是js改变了它，我在html变不了它，哭泣…还是乖乖研究js吧

这里看到加载界面的东西好像都放在TemplateData下面，所以看一下里面的UnityProgress.js文件，然后发现这个大概是关于logo和进度条的，没有关于那个背景的更换。切换阵地研究。

第二个尝试：修改js，成功！

我发现Build文件夹里的json文件里面有一个backgroundColor，这个颜色还跟加载界面的颜色一样，一定是它了。

本来是根据html中的css语法来写，不可行，例如：

"backgroundImage":"url(Build/index.jpg)"

"background":"url(Build/index.jpg)"

然后我就去看UnityLoader.js文件，搜索发现这一句，突然觉悟

把backgroundColor的那个语句改成，记得把图片放在Build文件夹下

"backgroundUrl":"index.jpg"

看看效果：修改成功

三、修改图标

这个我还没做，但是我觉得应该挺简单，感觉把文件夹里的unity图标换成自己的图标就好了应该~ 等下次更新吧！！

---

2020-05-22更新

第一次尝试，成功！

把原先的先给备份一下，以防万一不能用
然后把自己的图标两个都放进来更换掉，或者你只更换一个也ok随便你，一般更换progressLogo.Dark.png这个

看看结果，成功

四、修改进度条

也是选择更换掉图片的形式，虽然上面logo你可以不用太在意尺寸大小
不过进度条最好跟原先的一致吧~

第一次尝试，成功！

更换好啦 看看结果

完结！！！！