unity制作手机h5小游戏，发布webgl后我的修改
记录一下发布webgl后我的修改1.添加web.config配置文件2.修改index.shtml文件2.1添加语句2.2代码删除修改2.3整体代码查看3.TemplateData文件夹下图片更换4.Build文件夹放入加载背景图片5.修改Build文件夹下.json文件6.修改Build文件夹下UnityLoader.js文件6.1修改删除手机提示框6.2修改div进度条7.修改Template
·
查看我的项目：每日一玩，赚成长值
密码：Hxf123456
记录一下发布webgl后我的修改
推荐我使用的免费服务器
三丰云-云服务器-虚拟主机-免费空间-免备案域名注册VPS服务商.html
https://www.sanfengyun.com
找了很久才找到这么一个免费服务器，供个人使用
这个服务器有"免费虚拟主机"“免费云服务器”，还可以弄免备案的域名，不过免备案的域名需要科学上网，但其实用他们本身的域名也是挺方便的，只是多一个输入密码访问的步骤。
这里是免费虚拟主机的界面：还可以弄预装=
1.添加web.config配置文件
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".unityweb" />
<mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
</staticContent>
<rewrite>
<outboundRules>
<rule name="Append gzip Content-Encoding header">
<match serverVariable="RESPONSE_Content-Encoding" pattern=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="\.unityweb$" />
</conditions>
<action type="Rewrite" value="gzip" />
</rule>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
2.修改index.shtml文件
2.1添加语句
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
2.2代码删除修改
<div class="webgl-content" style="width:100%;height: 100%;">
<div id="unityContainer" style="width:100%;height: 100%;background: url(Build/index.jpg);"></div>
</div>
/*以下删除*/
<!--<div class="webgl-content">
<div id="unityContainer" style="width: 1080px; height: 1920px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" οnclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">mazhen</div>
</div>
</div>-->
2.3整体代码查看
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>每日一玩，赚成长值</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/mazhen0605.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content" style="width:100%;height: 100%;">
<div id="unityContainer" style="width:100%;height: 100%;background: url(Build/index.jpg);"></div>
</div>
</body>
</html>
3.TemplateData文件夹下图片更换
换为以下↓↓↓↓注意：js和css文件不要动
4.Build文件夹放入加载背景图片
5.修改Build文件夹下.json文件
把backgroundColor": "#231F20",语句修改为"backgroundUrl": "index.jpg",
全部代码：
{
"companyName": "DefaultCompany",
"productName": "mazhen",
"productVersion": "0.1",
"dataUrl": "mazhen0605.data.unityweb",
"wasmCodeUrl": "mazhen0605.wasm.code.unityweb",
"wasmFrameworkUrl": "mazhen0605.wasm.framework.unityweb",
"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundUrl": "index.jpg",
"cacheControl": {"default": "must-revalidate"},
"developmentBuild": false,
"multithreading": false,
"unityVersion": "2019.3.7f1"
}
6.修改Build文件夹下UnityLoader.js文件
6.1修改删除手机提示框
搜索：compatibilityCheck，将以下语句替换为
compatibilityCheck:function(e,t,r){
UnityLoader.SystemInfo.hasWebGL?
UnityLoader.SystemInfo.mobile?
t()
:["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?
t()
:t()
:e.popup("Your browser does not support WebGL",[{text:"OK",callback:r}])
},
6.2修改div进度条
搜索：e.logo，将语句替换为以下语句，主要是增加一个div和一个img。
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.div = document.createElement("div"), e.progress.appendChild(e.progress.div),e.progress.loader = document.createElement("div"),e.progress.div.appendChild(e.progress.loader),e.progress.ani = document.createElement("img"),e.progress.ani.style.cssText = "float: left; width: 100%; height: 100%; display: inline-block;", e.progress.div.appendChild(e.progress.ani),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")
7.修改TemplateData文件夹下UnityProgress.js文件
主要是添加div和img
【添加代码】
/* ani start*/
unityInstance.progress.div = document.createElement("div");
unityInstance.progress.div.className = "div";
unityInstance.progress.appendChild(unityInstance.progress.div);
unityInstance.progress.loader = document.createElement("loader");
unityInstance.progress.loader.className = "loader";
unityInstance.progress.loader.style.cssText = "float: left; width:110px; height: 30px; display: inline-block;"
unityInstance.progress.div.appendChild(unityInstance.progress.loader);
unityInstance.progress.ani = document.createElement("img");
unityInstance.progress.ani.className = "ani";
unityInstance.progress.ani.src="TemplateData/load.gif";
unityInstance.progress.ani.width=30;
unityInstance.progress.ani.height=30;
unityInstance.progress.div.appendChild(unityInstance.progress.ani);
/* ani end*/
unityInstance.progress.loader.style.width = ((11000/141) * progress) + "%";
【完整代码】
function UnityProgress(unityInstance, progress) {
if (!unityInstance.Module)
return;
if (!unityInstance.logo) {
unityInstance.logo = document.createElement("div");
unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
unityInstance.container.appendChild(unityInstance.logo);
}
if (!unityInstance.progress) {
unityInstance.progress = document.createElement("div");
unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
/* ani start*/
unityInstance.progress.div = document.createElement("div");
unityInstance.progress.div.className = "div";
unityInstance.progress.appendChild(unityInstance.progress.div);
unityInstance.progress.loader = document.createElement("loader");
unityInstance.progress.loader.className = "loader";
unityInstance.progress.loader.style.cssText = "float: left; width:110px; height: 30px; display: inline-block;"
unityInstance.progress.div.appendChild(unityInstance.progress.loader);
unityInstance.progress.ani = document.createElement("img");
unityInstance.progress.ani.className = "ani";
unityInstance.progress.ani.src="TemplateData/load.gif";
unityInstance.progress.ani.width=30;
unityInstance.progress.ani.height=30;
unityInstance.progress.div.appendChild(unityInstance.progress.ani);
/* ani end*/
unityInstance.progress.empty = document.createElement("div");
unityInstance.progress.empty.className = "empty";
unityInstance.progress.appendChild(unityInstance.progress.empty);
unityInstance.progress.full = document.createElement("div");
unityInstance.progress.full.className = "full";
unityInstance.progress.appendChild(unityInstance.progress.full);
unityInstance.container.appendChild(unityInstance.progress);
}
unityInstance.progress.loader.style.width = ((11000/141) * progress) + "%";//动图前div让动图跟随进度移动，宽为110故用公式(110*100）/141
unityInstance.progress.full.style.width = (100 * progress) + "%";
unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
if (progress == 1)
unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
}
8.修改TemplateData文件夹下style.css文件
修改为：
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -41%); transform: translate(-50%, -41%);}
9.在index.html通过js获取unity中的数据，互通。
参考：Unity3D开发之unity和js通信交互_JayW的博客-CSDN博客_unityjs
9.1 unity中须添加语句
我是添加在update里面，为了实时获取。
因为Application.ExternalCall已过时，所以要在update函数前加[System.Obsolete]
Application.ExternalCall("Getcounts",count);
其中counts为某分数。
9.2 html通过js获取
<script type="text/javascript">
function Getcounts(count)
{
console.log(count); //获取玩家分数 ，count为玩家分数
}
</script>
记录可能有用的参考网站
苏州本地的技术开发者社区，在这里可以交流本地的好吃好玩的，可以交流技术，可以交流招聘等等，没啥限制。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)