【Unity WebGL开发笔记】

Alvin Chao

已于 2022-07-14 15:16:53 修改

阅读量1.7k

点赞数

分类专栏：笔记文章标签： unity 游戏引擎

于 2022-07-14 15:14:31 首次发布

本文链接：https://blog.csdn.net/tladsl69zyw/article/details/125782610

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

WebGL开发笔记

前言
一、先搭环境
二、Unity设置
三、编程注意事项
- 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);