Unity打包WebGL的全过程及在打包和使用过程中会遇到的问题(本地测试)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Unity打包WebGL的全过程及在打包和使用过程中会遇到的问题(本地测试)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概要

Unity打包WebGL PlayerSettings设置

Resolution and Presentation

Other Settings

Publishing Settings

本地服务器测试环境配置

问题盘点

概要

盘点Unity在Build WebGL环境包时需要的配置以及遇到的难题

Unity打包WebGL PlayerSettings设置

Resolution and Presentation

unity打包webgl,webgl,unity,c#,游戏引擎

Resolution and Presentation 界面主要设置打包后的WebGL界面的分辨率显示

设置的分辨率尽量要和当前编译器界面的分辨率一致

Other Settings

unity打包webgl,webgl,unity,c#,游戏引擎

Unity Other Settings的默认设置在打开后会看到有警告，其大致意思就是在提醒我们要在 Unity WebGL 构建中启用高质量的光照贴图编码并确保 WebGL 2 兼容性，解决这个警告只需要将Auto Graphics API 自动图形接口关闭后在Graphics APIs选择WebGL2就可以解决这个警告

unity打包webgl,webgl,unity,c#,游戏引擎

Publishing Settings

unity打包webgl,webgl,unity,c#,游戏引擎

这是系统默认的 Publishing设置

其中Compression Format是打包后的Build包的压缩格式这里如果是要在本地服务器也就是127.0.0的环境下测试的话选择Disabled就可以如果说选择压缩的话就需要去解压缩这些文件

选择Gzip的Build包

unity打包webgl,webgl,unity,c#,游戏引擎

选择Disabled的Build包 unity打包webgl,webgl,unity,c#,游戏引擎

如果说选择压缩打包那么在本地测试会出现浏览器不支持解压缩这个问题解决方案还在研究中，所以就只讲解一下不压缩的，其实压缩与不压缩其会出现的问题只会在包的大小上体现出来如果不是正式上线只是本地测试的话没有什么区别也不会存在解压缩这个问题了

到这里打包以前的所有配置就都已经完毕了，接下来就是配置本地的服务器测试环境

本地服务器测试环境配置

打包后我们会发现在我们的文件夹里会有一个网址html，这代表我们的Web包已经打成功了，那么直接点击这个html文件就能够直接运行我们的项目了

unity打包webgl,webgl,unity,c#,游戏引擎

无法下载文件，此浏览器不支持在没有 Web 服务器的情况下通过 file:// URL 加载网页。请使用本地开发 Web 服务器来托管 Unity 内容，或使用 Unity 构建和运行选项。

映入眼帘的血红的报错，犹如万箭穿心，裤子都脱了你给我看这个！！！

别慌马上就来..............

这个问题是因为我们Web包必须在有服务器支持的环境下才能够正常运行，所以接下来重点要来了

我们要配置我们的包体在本地也就是127.0.0的环境下的服务器托管状态

首先要配置我们的电脑的Windows功能

1.打开控制面板

2. unity打包webgl,webgl,unity,c#,游戏引擎

3. unity打包webgl,webgl,unity,c#,游戏引擎

4. unity打包webgl,webgl,unity,c#,游戏引擎

Internet Information Services左边的箭头全选后点击确定就可以

接下来就是创建一个新的网络

1.找到此电脑然后右击找到管理选项

unity打包webgl,webgl,unity,c#,游戏引擎

2.打开后我们可以看到如下界面在服务和应用程序下面找到Internet Information Services选项单击进入 unity打包webgl,webgl,unity,c#,游戏引擎

3.找到网站右击点击添加一个新的网站

unity打包webgl,webgl,unity,c#,游戏引擎

4. unity打包webgl,webgl,unity,c#,游戏引擎

5.点击确定后就会创建出一个我们的本地路径

unity打包webgl,webgl,unity,c#,游戏引擎

然后在我们的网页上输入127.0.0.1:8080（设置的端口号）

不出意外的话意外就要来啦

进入界面后我们看见报错不见了但是并没有进入我们的界面，根据能量守恒定律报错没有消失他只是换了一种方式陪伴你而已，当我们按F12进入网页控制台后我们发现报错来啦。

unity打包webgl,webgl,unity,c#,游戏引擎

我们在网络里发现我们的.data文件出现了报错我们双击他就会进入这样的界面

unity打包webgl,webgl,unity,c#,游戏引擎

这是因为我们的网站MIME类型不支持解析.data类型文件那这个.data文件是哪来的？？？

有这样疑问的朋友一定没有看过Unity打包后的Web包里都存在什么

在我们的Build包里存在这样几个文件

unity打包webgl,webgl,unity,c#,游戏引擎

.data的解析就是因为这里导致的

那么开往幼儿园的车要发车了~~~~~~~~~~~~~~~~~~

我们再次回到我们的网站配置界面点击我们添加的网站

unity打包webgl,webgl,unity,c#,游戏引擎

找到MIME类型双击他双击双击双击重要的事情说三遍

unity打包webgl,webgl,unity,c#,游戏引擎

在这个界面添加我们的MIME类型

unity打包webgl,webgl,unity,c#,游戏引擎

application/octet-stream 知道你们懒得敲

点击确定就添加上了我们的类型然后再回去我们的网站就发现BUG不见了至此所有本地测试的流程就完成了

问题盘点

在测试中发现了一些阻碍项目运行的问题

在我们的项目中减少不了有许多的文件解析尤其json占我们解析文件的大头

在打包后解析json时发现了一个问题应为我使用的json解析是Newtonsoft.Json.dll插件去解析的，在我们打包后运行时会发现这个插件Web并不能去识别所以会给我们发出报错

这个的解决方案其实很简单更换一个解析插件或者说直接使用unity自带API去解析

如果说在打开项目的浏览器非火狐浏览器，是需要进行WebGL的许可设置的，谷歌浏览器的webgl组件默认是关闭的，需要先开启才能支持webgl运行设置方法：在谷歌浏览器中搜索chrome://flags/打开界面以后搜索WebGL Developer Extensions和WebGL Draft Extensions将其设置为Enabled就可以了这两个一个是“允许 Web 应用程序访问仅在开发期间使用的 WebGL 扩展”一个是“允许 Web 应用程序访问仍处于草稿状态的 WebGL 扩展”其他浏览器同理

点击下载解析插件文章来源地址https://www.toymoban.com/news/detail-752082.html

到了这里，关于Unity打包WebGL的全过程及在打包和使用过程中会遇到的问题(本地测试)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！