Unity WebGL开发汇总

一、配置

1.BuildSettings

Unity WebGL开发汇总_第1张图片

建议使用内置渲染管线,URP和HDRP帧率较低。

2.分辨率根据项目情况设置,Run in Background看需求

Unity WebGL开发汇总_第2张图片

3.Color Space和Lightmap Encoding需要设置

Unity WebGL开发汇总_第3张图片

4.裁剪未引用的模块,建议开启

Unity WebGL开发汇总_第4张图片

注意:

代码裁剪可能引起的问题:

可能会裁剪掉实际用到的类型,比如预制体包含一个类型 A,而将该预制体打包到 AssetBundle 之中,Unity 就可能将 A 类型裁剪掉,运行时将在控制到看到错误 Could not produce class with ID XXX,可以按照下面两步来解决该问题:

  1. 根据提示 ID,查找裁剪的类型,查找地址:这里;
  1. 将该类型在脚本中引用一下,或者在创建 Assets 目录下 link.xml,格式如下。

Plain Text

    
        
    

如果想要查看裁剪之后 Unity 包含了内些类型,可以在打包之后,找到文件 Temp/StagingArea/Data/il2cppOutput/UnityClassRegistration.cpp 进行查看,除此之外没有其他更加方便的方法。

另一点需要知道的是 Strip Engine Code选项只是针对 Unity 的本机代码,对于托管代码来说,总是会进行代码裁剪,IL2CPP 通过托管 DLL,以及代码脚本中的静态引用,来进行代码裁剪,如果代码中使用反射来获取类型,那么同样的,该类型有可能被裁剪掉,因此也需要添加到 linker.xml中。

5.发布选项中,Enable Exceptions建议上线时选None,Compression Format我没配置服务器,所以选的Disable。Decompression Fallback建议勾选。

brotli的压缩比最高,gzip次之,无压缩与压缩的体积差距大。

目前主流的浏览器都已经支持了压缩格式,能够在 http(s)传输过程中,将压缩的数据进行解压,这在效率上要比 js 进行解压要快很多。

另外,unity 在发布时也提供了 js 实现的解压器,如果浏览器解压失败的话,将会采用 js 解压的方式,当然这会带来一些性能损失,增长内容加载时间。

为了让浏览器在 http(s)传输过程中进行解压,需要Web 服务器通过 http(s)头来告诉浏览器,传输内容的压缩格式,就需要对 Web 服务器进行相应的设置。

【注】如果服务器不支持压缩,而设置使用了压缩,可能会导致加载失败。此时要么设置压缩为disable,或者配置服务器使之支持压缩格式(如下)。

Unity WebGL开发汇总_第5张图片

二、WebGL不支持功能

  • 不支持多线程,因为 JavaScript 不支持多线程,所以 System.Threading 命名空间下的类不要使用;
  • 不能在 VS 中进行断点调试,可以直接网页调试(F12);
  • 不能直接使用 Socket,包括 System.Net下的任何类型,以及 System.Net.Sockets 下的部分类型,以及 UnityEngine.Network,如果需要在 WebGL 平台使用网络功能,可以使用 WWW或者 UnityWebRequest这些都是基于 Http协议的实现,如要需要高实时性,可以选择 WebSockets或者 WebRTC;
  • WebGL 1.0是基于 OpenGL ES 2.0,WebGL 2.0基于 OpenGL ES 3.0,所以存在相应的限制;
  • WebGL 音频是基于自定义的后台,只具备基本的音频功能;
  • WebGL 是 AOT(ahead of time,即静态编译平台,因此不能使用 System.Reflection.Emit 下的类型进行代码生成,IL2CPP和 iOS 也是如此。
  • 部分浏览器不支持

三、游戏优化

略(看我之前的优化文章,大体通用,主要就是渲染优化和内存

四、页面优化

1.页面启动默认全屏模型。修改index.html文件:

function Reset()
{
  canvas.style.height= document.documentElement.clientHeight+"px";
  canvas.style.width = document.documentElement.clientWidth+"px";
}

Unity WebGL开发汇总_第6张图片

2.关闭移动端的提示,同样修改index.html,注释掉那行代码即可。

Unity WebGL开发汇总_第7张图片

 Unity WebGL开发汇总_第8张图片

3.修改Loading进度条样式。修改TemplateData中对应的贴图即可。更多样式需求得重写style.css

布局。

Unity WebGL开发汇总_第9张图片

例如(注意对应好文件夹中背景图的名称):

body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height:100% }
/* #unity-canvas { background:  url('bk.gif') no-repeat center} */
/* #unity-canvas { background: rgb(0, 0, 0)} */
#unity-canvas {background: url('bk.gif'); background-size:100% auto;background-repeat: no-repeat; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left:50%; top: 90%; transform: translate(-50%, -50%); display: none }
/* #unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center } */
#unity-progress-bar-empty { width: 550px; height: 3px; margin-top: 10px; margin-left: 6.5px; background: rgba(255, 255, 255, 0.2) }
#unity-progress-bar-full { width: 0%; height: 3px; margin-top: 10px; background: rgba(255, 255, 255, 0.6)}
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

4.修改web页面的title名称。同样修改index.html

Unity WebGL开发汇总_第10张图片

五、其他

优化加载时间、压缩、资源管理

(后续再补充)

你可能感兴趣的:(unity,webgl,游戏引擎)