unity打包Webgl的设置和UI适配问题

最新推荐文章于 2025-04-02 10:01:23 发布
最新推荐文章于 2025-04-02 10:01:23 发布
阅读量1.3k 收藏 7
点赞数 4
文章标签： webgl unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Optimistic_lx/article/details/140696355
版权

前言

记录一下自己学习打包Webgl出现的问题，看了不少文章，自己总结一下。

一、unity添加模块和设置

在unityHub中安装中添加webgl模块

在打包的地方点击webgl点击左下角的Playersetting

将Decompression Fallback勾选上

然后就可以打包并运行，你就会看到

这样就对了，因为你没有服务器作为载体。所以我们要配置本地服务器。

二、配置本地服务器并打开服务

右击此电脑点击管理

最低0.47元/天 解锁文章
Optimistic_lx
关注
unity导出webgl支持手机_Unity3D打包WebGL项目
weixin_39672396的博客
12-22 1683
公司原本的手游试水转页游，由于是Unity3D项目，于是选择了打包WebGL的方式，把遇到的一些问题记录一下，方便其他有相关需求的朋友，也方便自己查询。Unity3DWebGL官方介绍需要先看一遍，介绍了浏览器兼容性、内存相关、网络相关、与页面javascript交互等知识。AssetBundle首先一个问题是要改变游戏加载的方式，原本只是打成一个包即可，下载后安装到手机里，项目里也有打包Ass...
Unity打包WebGL的全过程及在打包和使用过程中会遇到的问题(本地测试)
热门推荐
qq_66312646的博客
06-07 2万+
如果说选择压缩打包那么在本地测试会出现浏览器不支持解压缩这个问题解决方案还在研究中，所以就只讲解一下不压缩的，其实压缩与不压缩其会出现的问题只会在包的大小上体现出来如果不是正式上线只是本地测试的话没有什么区别也不会存在解压缩这个问题了。打包后我们会发现在我们的文件夹里会有一个网址html，这代表我们的Web包已经打成功了，那么直接点击这个html文件就能够直接运行我们的项目了。点击确定就添加上了我们的类型然后再回去我们的网站就发现BUG不见了至此所有本地测试的流程就完成了。
Unity WebGL 项目, 屏幕自适应
newtonsm的博客
03-07 2724
https://www.jianshu.com/p/cb3189cce7e8 Unity WebGL 项目, 屏幕自适应 tackor关注 2018.04.10 17:27字数 297阅读 1278评论 0喜欢 2 Unity WebGL 项目, 屏幕自适应 Unity 2017.4.0f1 2018.4.10 Snip20180410_8.png 如图所示, 使用火狐...
Unity打包webgl本地测试
最新发布
m0_73117967的博客
04-02 186
把压缩格式取消了省去很多解析麻烦
unity3d 打包成webgl 错误解决办法
12-21
unity 发布webgl时打包出错 il2cpp.exe did not run properly!
Unity打包webgl设置及遇到问题
一只木子李
12-19 1611
Unity 打包webgl设置及遇到问题
Unity打包到Webgl平台以及遇到的问题
unity_http的博客
12-08 9762
unity打包webgl
Unity WebGL项目打包后本地打开报错问题解决方法
蓝紫色的忧郁的博客
06-16 1万+
打开控制面板-->程序-->启用或关闭功能-->Internet Infomation Services,全部打勾，确认即可。，点击此电脑，点击右键-->管理-->服务和应用程序-->Internet Infomation Services--网站。最后在网页上输入：127.0.0.1:8080查看效果即可 ，此时可能遇到提示权限不足无法打开配置文件的问题。右击文件夹->属性->安全，点击编辑，添加 Everyone用户 赋予它所有权限。接着点击网站-->新建一个网站。
Unity WebGL打包配置本地服务器
renkai2heng的博客
05-30 1626
1、None 无：选择这个你不需要任何异常支持。这提供了最佳的性能和最小的构建。使用这个选项，任何异常的抛出都会停止运行。2）、然后选择IIS（Internet Information Services）双击进入。3）、找到网站右键添加网址或者在面板右侧添加网址。6）、再次在左边点击刚刚创建的，然后在右侧点击浏览。没有配置IIS的，可根据下面这篇文章配置。5）、点击刚刚创建的，设置MIME类型。1）、打开控制面板，找到管理工具。3）、遇到异常以及压缩格式。2）、设置打包的窗口大小。4）、根据下面设置好。
unity webgl、安卓（Android）打包最简单的ProjectSettings参数设置
qq_41263535的博客
11-29 825
当使用插件导致不能打包，基本上都是插件版本问题，先更换插件版本，在打包，先不要改变ProjectSettings参数；因为你不知道你的项目中会用到多少插件，如果每个插件都改参数，到最后头都炸了。发布webgl、安卓（Android）时是否因为各种各样的原因打包错？首先，要明白的是unity空场景打包webgl、安卓（Android）时是不会报错的，这点很重要。二、webgl打包同样改变上边的两个参数，再改变两个参数。一、安卓（Android）打包只需要改变两个参数设置。之后直接打包发布即可。
【Unity WebGL 打包技巧】
weixin_43837133的博客
04-28 2655
UnityWebGL打包技巧 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j1aZW0EP-1651130931404)(C:/Users/PC20210625001/AppData/Roaming/Typora/typora-user-images/image-20220428151940195.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xikew1xJ-1651130931408)(C:/Users/PC202106250
Unity打包WebGL基础介绍
weixin_44263579的博客
01-10 1万+
一、WebGL PlayerSetting打包设置 官方参考 Icon： web端无图标设置。 ResolutionandPresentation： 设置初始分辨率和显示 DefaultCanvasWidth/Height：设置webgl画布默认宽高 RunIn BackGround：是否后台运行。 WebGl模版： Default：简单的白色页面，其中的灰色画布上有一个加载进度条。右下方有全屏化界面按钮。 Minimal：作者感...
Unity3D打包WebGL并使用MQTT(一)
ice_bear221的博客
04-14 2990
Unity3D打包WebGL并使用MQTT
【Unity】打包WebGL项目遇到的问题及解决记录
Sig的博客
06-06 2万+
目录Unity中打包时注意事项切换平台为WebGL平台设置Player Setting分辨率预设其它设置发布设置确保项目路径没有中文选择Assets同级目录打包打包后将项目部署到IIS上发布安装IIS并添加网站为服务器添加 MIME Type 映射和跨域访问权限添加MIME Type映射添加跨域访问权限尝试访问html网站访问遇到的问题Failed to load resource: the server responded with a status of 404 (Not Found) favicon.
UnityWebGL打包部署
QQ_1048367381 俊的博客
08-09 687
最近发现Unity对webGL平台有优化，加载速度快了不少，于是打包了自己的demo发先不错，本地部署了IIS后，局域网访问也不错，于是开始搞云端部署。Windows本地IIS很多教程，看一下就知道，主要添加unity的两个 MIME。2.使用Unity的PackageManager 的Publish插件。1.购买云服务，阿里云，华为云等 然后安装IIS后开始部署就行。Mac的就简单多了，找到目录再使用终端开启就行了。然后我主要记录一下怎么外网发布部署。详细两种方式后面补全更新。具体操作网上都有教程。
Unity WebGL 编译和打包说明（官方文档翻译校正）
长脖鹿的博客
08-25 2802
Unity 编辑器中的 WebGL 选项允许您将内容发布为 JavaScript 程序，这些程序使用 HTML5/JavaScript、WebAssembly、WebGL rendering API 以及其他 Web 标准在 Web 浏览器中运行 Unity 内容。默认情况下，WebGL 缓存存储 .data 和 .bundle 文件，并在从缓存加载前重新验证它们。您可以通过添加新的来更改 UnityLoader 配置，从而更改此行为。以下示例显示了在index.html。
Unity-WebGL配置系统教程(含iis本地部署) --简略版
归里的博客
05-24 6500
一份系统性的完整的Unity-WebGL配置教程，绝对不会让你吃亏，可为你减少大量的时间。
UnityWebGL平台打包基础设置，AB包打包读取
weixin_52599679的博客
11-13 1211
UnityWebGL平台打包基础设置，AB包打包读取
unity webgl屏幕适配
01-09
### 实现Unity WebGL项目屏幕适配的方法 为了使Unity WebGL项目能够在各种分辨率下正常显示，确保UI元素按预期缩放并适应不同的宽高比至关重要。通过Canvas Scaler组件以及合理的Anchor设置能够有效解决这一问题。 #### 使用Canvas Scaler进行自适应调整 在Unity中创建或选中一个Canvas对象，在Inspector面板找到其下的`Canvas Scaler`组件。将Scale Mode设为`Scale With Screen Size`模式[^1]。这使得整个UI布局能依据当前设备的屏幕尺寸动态变化。具体参数如下： - **Reference Resolution**: 设置参考分辨率为设计稿的实际大小，通常选择常见的比例如1920×1080。 - **Match**: - 当值接近于0时（比如0.5），宽度优先匹配；此时高度可能会被拉伸/压缩来填充剩余空间。 - 反之则表示高度优先匹配，即宽度可能发生变化以满足设定的高度范围。 对于WebGL这类需要广泛兼容多种终端的应用场景而言，推荐采用较为宽松的比例关系，允许一定程度上的变形而非强制保持原始纵横比不变。 #### Anchor Points配置优化用户体验 针对具体的UI控件，合理利用矩形变换(Rect Transform)里的Anchors属性可以帮助构建响应式的用户界面。例如，如果希望按钮始终位于窗口底部中央，则应将其Min和Max anchors都指向Parent节点中心位置，并适当调节Pivot使其居中对齐。 另外值得注意的是，在处理滚动视图(Scroll View)内的内容时，考虑到性能因素，建议尽可能选用RectMask2D来进行遮罩操作而不是Mask，除非确实存在复杂的形状裁切需求[^4]。 ```csharp // C#脚本用于辅助调试目的，实时更新Canvas Scale Factor using UnityEngine; using UnityEngine.UI; public class CanvasScalerHelper : MonoBehaviour { private void Update() { float scaleFactor = GetDesiredScaleFactor(); GetComponent<Canvas>().scaleFactor = Mathf.Lerp(GetComponent<Canvas>().scaleFactor, scaleFactor, Time.deltaTime * 2f); } private float GetDesiredScaleFactor(){ Vector2 referenceResolution = new Vector2(1920, 1080); // 设定的标准分辨率 Camera mainCamera = Camera.main; if (mainCamera != null){ return Mathf.Min(Screen.width / referenceResolution.x, Screen.height / referenceResolution.y); } return 1f; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值