Unity3D WebGL 相关踩坑记录 2

发表于 分类于 本文字数： 3.4k 阅读时长 ≈ 3 分钟
自定义加载界面的 Logo 和进度条样式
1
2
3
4
5
6
7
8
9
10
11
12
Dark: 
{
    progressLogoUrl: "http://magi-melchiorl.gitee.io/pages/Logo.png",
    progressEmptyUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAASCAYAAABmbl0zAAAACXBIWXMAAAsSAAALEgHS3X78AAAATUlEQVRo3u3aIQ4AIAwEQUr4/5cPiyMVBDOj0M2mCKgkGdAwjYCudZzLOLiITYPrCdEgGkSDaEA0iAbRIBpEA6JBNHx1vnL7V4NNwxsbCNMGI3YImu0AAAAASUVORK5CYII=",
    progressFullUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAASCAYAAABmbl0zAAAACXBIWXMAAAsSAAALEgHS3X78AAAAO0lEQVRo3u3SQREAAAjDMMC/56EB3omEXjtJCg5GAkyDaTANpsE0YBpMg2kwDaYB02AaTINpMA2Yhr8FO18EIBpZMeQAAAAASUVORK5CYII="
},
Light: 
{
    progressLogoUrl: "http://magi-melchiorl.gitee.io/pages/Logo.png",
    progressEmptyUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAASCAYAAABmbl0zAAAACXBIWXMAAAsSAAALEgHS3X78AAAAUUlEQVRo3u3aMQ4AEAxAUcRJzGb3v1mt3cQglvcmc/NTA3XMFQUuNCPgVk/nahwchE2D6wnRIBpEg2hANIgG0SAaRAOiQTR8lV+5/avBpuGNDcz6A6oq1CgNAAAAAElFTkSuQmCC",
    progressFullUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI0AAAASCAYAAABmbl0zAAAACXBIWXMAAAsSAAALEgHS3X78AAAAQElEQVRo3u3SMREAMAgAsVIpnTvj3xlogDmR8PfxftaBgSsBpsE0mAbTYBowDabBNJgG04BpMA2mwTSYBkzDXgP/hgGnr4PpeAAAAABJRU5ErkJggg=="
}

修改加载界面Logo和进度条使用图片的代码，在UnityLoader.js的2388到2399行之间。Progress方法内有两组变量，Dark和Light为加载时候使用的的各类图片数组。

  • progressLogoUrl 为加载时候的LOGO图

  • progressEmptyUrl 为空的加载进度条框

  • progressFullUrl 为填满的加载进度条框

  • 这里LOGO的引用可以是base64，也可以是png图片，按照这个情况，应该可以引用svg图片，未测试。

  • Unity默认使用的是Dark样式的加载界面，不知道是不是和使用的Unity版本有关，我使用的是Pro版发布的。如果使用个人版，是不是就会使用Light的界面样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
if (e.Module) 
{
    var r = UnityLoader.Progress.Styles[e.Module.splashScreenStyle],
    n = e.Module.progressLogoUrl ? e.Module.resolveBuildUrl(e.Module.progressLogoUrl) : r.progressLogoUrl,
    o = e.Module.progressEmptyUrl ? e.Module.resolveBuildUrl(e.Module.progressEmptyUrl) : r.progressEmptyUrl,
    i = e.Module.progressFullUrl ? e.Module.resolveBuildUrl(e.Module.progressFullUrl) : r.progressFullUrl,
    a = "position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);";
    e.logo || (e.logo = document.createElement("div"), e.logo.style.cssText = a + "background: url('" + n + "') no-repeat center / contain; width: 154px; height: 130px;", e.container.appendChild(e.logo)),
    e.progress || (e.progress = document.createElement("div"), e.progress.style.cssText = a + " height: 18px; width: 141px; margin-top: 90px;", e.progress.empty = document.createElement("div"), e.progress.empty.style.cssText = "background: url('" + o + "') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;", e.progress.appendChild(e.progress.empty), e.progress.full = document.createElement("div"), e.progress.full.style.cssText = "background: url('" + i + "') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;", e.progress.appendChild(e.progress.full), e.container.appendChild(e.progress)),
    e.progress.full.style.width = 100 * t + "%",
    e.progress.empty.style.width = 100 * (1 - t) + "%",
    1 == t && (e.logo.style.display = e.progress.style.display = "none")
}

遗留问题

  • 这里应该有改变背景色的属性，使用css来改背景色。未研究。