目录
演示：
未修改：
修改后：
一、获取Unity 自带模板
1.路径：
2.模板选择：
3.Unity 查看模板：
二.导入Unity
1.创建模板
2.模板文件说明：
三.修改模板
1.删除网页多余图片
HTML：
CSS：
2.全屏、适配浏览器大小：
四、进度条：
CSS：
五、完成
HTML：
演示：
未修改：
修改后：
一、获取Unity 自带模板
1.路径：
Unity安装路径下\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates
2.模板选择：
分别有 Default 和 Minimal 两个自带模板【Minimal 模板比较简洁什么都没有，这里选择Default，因为有进度条】
3.Unity 查看模板：
可以在 Project Settings -> Player -> Resolution add Presentation 查看 模板
二.导入Unity
1.创建模板
在 Unity Project 面板下创建 WebGLTemplates 文件夹【很重要】，在 WebGLTemplates 下创建的文件夹就是 在 Resolution add Presentation 下显示的名字【创建好后，就会出现模板】，红色箭头代表对应关系
2.模板文件说明：
TemplateData 文件夹：启动界面的进度条、图标等一些UI 。还有一个style.css文件【控制位置和一些图片引用】
-------------------------------------------------------------------------------------------------------------------------
index.html ：为网页模板【很重要】
-------------------------------------------------------------------------------------------------------------------------
thumbnail.png：在Resolution add Presentation下显示的缩略图
三.修改模板
1.删除网页多余图片
HTML：
打开模板中 index.html 文件【下方为未修改的文件】
【删除第 31、23 行 代码】：
第31行，这里引用了CSS里面的图片样式，最后会直接显示在打包好的WebGl程序中。【下方为需要删除的代码，全屏的按钮】
【注】在当前脚本中会有这些代码的引用记得删掉【按钮的绑定事件】
-------------------------------------------------------------------------------------------------------------------------
第23行，会获取 Unity 里的 Product Name 显示在打包程序上，所以删掉
31行 - var fullscreenButton = document.querySelector("#unity-fullscreen-button");
23行 -
CSS：
CSS文件在 TemplateData 文件夹下【下方为原代码】
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: {{{ BACKGROUND_COLOR }}} }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
删除掉 第 8、13、14、15行代码 【刚刚在后缀 HTML，脚本里删掉了全屏的按钮，这里的引用也就没有用了，所以删掉【第15行】 】
剩下的就是一些显示的Logo 和 图片什么的【所以也删掉，不然会影响全屏，比如打包后会出现滑动条】
2.全屏、适配浏览器大小：
在未修改文件的第 106 - 107 行：【vh、vw 在HTML里代表视口】注意位置别找错
canvas.style.width = "{{{ WIDTH }}}px";
canvas.style.height = "{{{ HEIGHT }}}px";
修改为：
canvas.style.width = "100vw";
canvas.style.height = "98vh";
四、进度条：
经过上面修改打包出来的效果如下：
打开 TemplateData 文件夹： 图片只保留 【progress-bar-empty-dark】和【progress-bar-full-dark】进度条，剩下图片都不需要【注】这里删的都是图片
-------------------------------------------------------------------------------------------------------------------------
图片我做了修改【黑色图上面有一张白色图】
CSS：
这里只修改
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
修改为：
#unity-progress-bar-empty { width: 564px; height: 18px; margin-top: 500px; margin-left: 6.5px; background: url('progress-bar-empty-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 502px; background: url('progress-bar-full-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat }
unity-progress-bar-empty：为底图
unity-progress-bar-full ：进度条
-------------------------------------------------------------------------------------------------------------------------
将底图的 Width 修改为 564px【制作的地图宽】margin-top 修改为500px【将进度条放在下方】，将最后的 center 删掉
进度条 的 margin-top 修改为500px【因为修改的图片关系】，代码最后面的 center 也删掉
五、完成
但是发现进度条没有走完
HTML：
未修改：
第 9、10行代表给滑动条赋值。
第 13 行代表 进度条消失
#if BACKGROUND_FILENAME
canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
#endif
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
修改后：
在第 13 行 添加 Html 代码 【500代表 0.5秒后执行】
setTimeout(function ()
{
loadingBar.style.display = "none";
}, 500);
注意第 12 - 14 行
#if BACKGROUND_FILENAME
canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
#endif
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
setTimeout(function () {
loadingBar.style.display = "none";
}, 500);
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
文章来源
您阅读本篇文章共花了：
发表评论