unity导出webgl支持手机_Unity3D打包WebGL项目

公司原本的手游试水转页游，由于是Unity3D项目，于是选择了打包WebGL的方式，把遇到的一些问题记录一下，方便其他有相关需求的朋友，也方便自己查询。

Unity3D WebGL官方介绍

需要先看一遍，介绍了浏览器兼容性、内存相关、网络相关、与页面javascript交互等知识。

AssetBundle

首先一个问题是要改变游戏加载的方式，原本只是打成一个包即可，下载后安装到手机里，项目里也有打包AssetBundle的方案，不过好像没用(?)(我是后接手的，对过去的东西不太了解)。而页游不可能加载一个完整包，测试了下打出来的包得有小200MB。。所以必须使用AssetBundle，让主程序尽可能小，而且手游和页游的AssetBundle使用方法也不同，手游在启动游戏后检查资源文件的列表和版本，更新文件到本地供游戏使用，而页游会用到浏览器缓存，不能一上来就全部加载，只能逐步加载所需资源，不然体验很差。

最终修改完后的主程序大概15MB左右，打出来的包还是大了点，应该还能再缩减一点，经过各种压缩后的AssetBundle资源文件总共大概110MB多，牺牲了一点画质，不过也没有办法。一般贴图(如场景、特效等)压缩参数High Quality 30，角色需要根据所需精修程度来定，UI图片、Atlas图集等压缩参数High Quality 80-90，这个不能压太狠，不然画面惨不忍睹。

几个用到的插件和代码

网络连接需要改用WebSocket，使用的这个库，再改改自己的相关代码，服务器也需要进行相关调整。不过这个库提供的Unity Asset Store上的插件好像已经无法访问了。。

来处理缓存问题和查看游戏内存占用。顺便提一句，Unity 2018.2正式支持WebAssembly后使用WebAssembly可以不用像使用asm时需要将打包参数里的内存使用设定在比较大的值，因为它可以在运行时动态增长，但是需要相对新一点的浏览器内核支持才行，所以由于国内的游戏环境所限，暂时先不考虑了。。

打包后的WebGL端是用不了输入法的。。这里有一个解决方案，原本的插件显示方式不太好，这篇文章的作者进行了修改和优化，虽然效果和游戏内置插件比还是逊色了些，不过算是可用了。

几个问题

需要自己写代码把非内置的、用到的shader添加到Project Settings - Graphics - Always Included Shaders里，不然启动游戏后会满屏粉红色。

var options = ["this.require = ",decompressor.require,"; var vv = this;this.decompress = ",decompressor.decompress,"; this.onmessage = ",function(e){var t={id:e.data.id,decompressed:vv.decompress(e.data.compressed)};postMessage(t,t.decompressed?[t.decompressed.buffer]:[])},"; postMessage({ ready: true });"];

TypeError: Cannot read property 'enumerateDevices' of undefined 这是最近在接QQ游戏大厅时遇到的，居然还是Chrome43的内核，真古老。。开发者平台也不太好用，吐槽一下。这个方法好像是摄像头和麦克风相关的，Chrome45以后加入的，反正也用不上，直接搜了下Unity3D打包工具的代码(Unity\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\prejs\MediaDevices.js和BuildTools\lib\UnityNativeJs\UnityNative.js不知道是不是都有用)，把逻辑改了一下(感觉原本逻辑也是有问题？)，再打包就不报错了。

目前使用的是Unity3D 5.6.6版本，暂时想到的就这些了，以后如果有问题再继续记录。