提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
WebGL开发笔记
- 前言
- 一、先搭环境
- 1.浏览器选择火狐,理由是方便本地直接运行看效果,相关设置:
- 2.本地布署IIS
- 3.防火墙规则设置
- 二、Unity设置
- 1.切平台
- 2.Player Settings设置
- 3.打版看效果
- 4.自定义网页登陆样式
- 三、编程注意事项
- 1.会报错的东西
- 2.数据库
- 总结
前言
`PC项目转WebGL遇到一些坑,还是记录一下好了。
一、先搭环境
1.浏览器选择火狐,理由是方便本地直接运行看效果,相关设置:
火狐浏览器webgl相关设置:
地址栏输入:about:config
搜索:webgl.force-enabled设置为true
搜索:security.fileuri.strict_origin_policy设置为false
2.本地布署IIS
配置简单可以使用其他浏览器看最终效果
控制面板-程序-启用或关闭windows功能-勾Internet Information Services-全勾应用程序开发功能
控制面板-管理工具-Internet Information Services (IIS)管理器-添加网站-设好网站名称,物理路径,端口号
添加MIME类型:
.unity3d application/octet-stream
.unityweb application/binary
3.防火墙规则设置
开启BranchCache内容检索(HTTP-In)规则
防火墙入站规则加TCP端口,端口要与IIS设置的端口一致
二、Unity设置
1.切平台
2.Player Settings设置
勾选后台行动,至于WebGL Template下面说
自动精简代码,挺好用的
平时Enable Exceptions选Explicitly Thrown Exceptions Only查异常用,正式版无问题时用None
3.打版看效果
火狐浏览器直接双击本地浏览或者火狐/谷歌/EDGE随意一款浏览器输入本机IP:端口
4.自定义网页登陆样式
在项目中创建WebGLTemplates文件夹,自定义样式为其子文件夹中index.html,最精简代码如下:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
</script>
</head>
<body>
<div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
</body>
</html>
新功能写到script块里(比如进度条),宽高居中之类写在body里,跟做网站写HTML一样的感觉(大概吧。。本人10几年没摸网站了)。
三、编程注意事项
1.会报错的东西
DllImport类加载C++库的写法调用DLL一定报错
webgl不支持多线程
webgl不支持System.IO
webgl自带字体不会显示汉字要自行导入TTF格式字体
JSON等外部文件读取要用WWW方式获取,比如放在了StreamingAssets文件夹就不能直接获取,实例代码如下:
using UnityEngine.Networking;
public class JsonManager:MonoBehaviour
{
JsonData _data;
string path = Application.streamingAssetsPath + "/test.json";
void ReadJson() {
StartCoroutine(WWWLoadJsonFile());
}
IEnumerator WWWLoadJsonFile() {
UnityWebRequest www = UnityWebRequest.Get(path);
yield return www.SendWebRequest();
if (www.isNetworkError || www.isHttpError)
{
Debug.LogError(www.error);
}
else {
//Debug.Log(www.downloadHandler.text);
byte[] result = www.downloadHandler.data;
//有中文的JSON,格式要存utf8+bom
string jsondata = System.Text.Encoding.UTF8.GetString(result, 3, result.Length-3);
_data = JsonMapper.ToObject<JsonData>(jsondata);
}
}
}
Resources文件夹倒是可以正常加载。
2.数据库
原项目用的是方便又小巧的SQLite,可惜sqlite3.dll不给面子,WebGL会报错,于是改用更加小巧的(作者连使用手册都不写)iboxDB,亲测支持WebGL,但有个小问题,我是做的本地存储,保存的数据库会因浏览器不同分别存到浏览器各自的UserData里,脆了点,还能用吧。
//创建数据库
DB.Root(Application.persistentDataPath);
DB db = new DB (6);
//保存数据库,如果使用火狐浏览器会自动保存不需要这条
Application.ExternalEval("FS.syncfs(false, function (err) {});");
//删除数据库,这个6对应创建时的iddress
//如果是PC端则自动生成db6.box,不过现在讲webgl就呵呵呵,火狐能用谷歌这条没效果
BoxSystem.DBDebug.DeleteDBFiles(6);
总结
只要知道了规则,以后开发就会很容易了。
PS:没湖底泥好玩