首页 > 手游开发 > Unity3D > 推荐几个Unity3D中WebGL打包时的插件
2020
02-19

推荐几个Unity3D中WebGL打包时的插件

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

Unity3D WebGL官方介绍

https://docs.unity3d.com/Manual/webgl.html

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

AssetBundle

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

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

几个用到的插件和代码

https://github.com/sta/websocket-sharp

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

https://github.com/kongregate/Unity-WebGL-Utilities

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

https://blog.csdn.net/blog_lee/article/details/79173141 Unity WebGL 实现中文IME输入

https://github.com/unity3d-jp/WebGLNativeInputField

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

几个问题

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

Uncaught TypeError: this.decompress is not a function 遇到这个报错的时候像这个帖子里提到的修改下UnityLoader.js代码:

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版本,暂时想到的就这些了,以后如果有问题再继续记录。

最后编辑:
作者:搬运工
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。