Unity-WebGL-打包流程以及遇到的各种坑

Unity-WebGL-环境部署、打包(基于2018.3.7)
1、 步骤流程图:
在这里插入图片描述

如果没有下载 WebGL 的话就点击Down 的话就去下载一个,一个这样的东西
注意:安装之前得先退出 Unity 客户端才能安装,否则就无法进行安装、也就是安装无效
在这里插入图片描述

完成安装以后你能看到的东西就是这样的,

在这里插入图片描述

不要忘记把场景加上去
OK 先不要乱动、安装好后,发布时不要勾选Development Build,勾选后文件非常大,然后点击上图左下角的 Player Settings
在这里插入图片描述

设置一下分辨率、做一个 UI 自适应。
在这里插入图片描述

strip engine code:官方文档是这样描述它的"如果被选中,unity会默认剥离在项目中不会使用的组件",也就是说,假如你的项目中没有音频功能,unity会在封装的时候去掉这部分代码以减少大小。
尽量取消勾选
然后 Other Settings 都不要动它。
继续设置完成了以后你 就需要 build 了,那么这个地方的重点来了
注意 :项目里面一定不要出现中文名称、所有的包括 硬盘盘符最好也是英文的!
如果有中文的话是这样的
在这里插入图片描述

继续接着上面的、接下来它会提示你 打包存放的位置,
注意:打包存放的位置也得放在项目的根目录下面,也就是跟 Assets 同级目录。
作者还是怕大家搞错了,上张图吧
在这里插入图片描述

然后静静的等待个 5 分钟左右,如果说你怕程序崩溃的话,你可以打开这个
在这里插入图片描述

观察 Unity 的内存指的变化。
OK 这里我按照最好的打算,一路顺风(反正我的是正常的哈哈),
大约 xx min以后,进入到你的这个界面,直接点击使用 谷歌打开。
在这里插入图片描述

打开之后、也许可能会第一次的时候打开不报错、等到你二次打开的时候(谷歌报错)
在这里插入图片描述

这是神马原因呢?
一般来说,为了安全起见,浏览器是不能通过load方法来加载本地文件的,load方法只能加载远程服务器上的文件。
在浏览器默认的情况下,试图加载一个本地文件,会出现交叉域访问的错误
我有两种方式,
第一种是在本地搭建一个web服务器,例如tomcat,将需要加载的数据放到服务器中,通过url地址来访问。
第二种是直接修改 谷歌的目标位置,
在这里插入图片描述

中间有一个 空格 内容放在冒号之后
中间有一个 空格
中间有一个 空格
–enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files
最后就是打开的时候要关闭所有的谷歌浏览器
然后将你的 index.html 拖动到修改过的谷歌快捷方式上面,就能完美的打开了。
之后进行了尝试,终于成功用chrome浏览器打开了unity发布成webgl对应的index文件。但是也存在一定问题:一定要用你设置的那个快捷方式打开才行,并且打开index文件之前必须要关闭所有chrome窗口(除非是设置好的快捷方式打开的窗口应该不影响)。很麻烦对吧

参考博客
注意事项:
https://blog.csdn.net/qq_37212364/article/details/88792961
火狐打开
https://blog.csdn.net/liang_704959721/article/details/102546394
报错处理
https://www.cnblogs.com/huwenya/p/9547224.html

2、 文字无法显示问题
使用unity自带的arial字体,运行完全没问题,但是,生成webgl以后,所有中文字体都不显示了。
解决办法:下载一个字体,必须为ttf字体,导入,然后,使用该字体即可。

3、持续更新。。。
TODO

  • 19
    点赞
  • 108
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
Vue-Unity-WebGL 是一个具有极高可扩展性和灵活性的 Unity3D web 端开发框架,它将 Vue.js 与 Unity Web Player 和 WebGL 等技术相结合,为开发者提供了最佳的解决方案。 Vue-Unity-WebGL 框架具有很高的兼容性和易用性,开发者可以更加灵活地应用该框架来定制自己的项目。由于该框架具备了许多优秀的特性,如自适应布局、多平台支持等,使得开发者可以轻松地实现用户体验和开发效率的提升。此外,Vue-Unity-WebGL 框架不仅提供了可视化开发工具,还提供了完整的运行环境,为开发者提供了优秀的开发体验。 Vue-Unity-WebGL 框架的另一个重要特点是其大量的插件与扩展功能,这些插件和扩展可以为项目的开发和管理提供坚强的技术支持。比如,通过 vue-router 可以控制路由,Vue-Unity-WebGL 可以协作处理组件数据和 Unity3D 渲染等复杂的操作,而 Vuex 则可以使开发者方便地处理应用数据流和组件状态的管理。这些插件和扩展功能极大地提高了 Vue-Unity-WebGL 框架的可扩展性和灵活性,使得开发者可以更加容易地进行定制。 综上所述,Vue-Unity-WebGL 框架是一个快速、可靠且强大的解决方案,这使得开发者能够轻松地编写出高质量的 Unity3D web 应用程序。该框架具有大量的功能,实现可扩展性、灵活性、易用性和可维护性,比其他框架更具有竞争力。在未来的发展中,Vue-Unity-WebGL 框架将会被更多的开发者喜爱和应用,并在技术社区中拥有更广泛的影响力。
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值