Unity WebGL开发
教程来啦
- 一.WebGL不能干的那些事
- 二.注意事项
- 1.播放声音
- 2.跨域
- 3.发布http or https?
- 4.包体大小
- 5.Odin
- 6.T序列化失败
- 三.参考资料
- 四.Build
- 主要步骤
- web.config
- Apache
- IIS
- 手机端去掉提示框
- 全屏
- 加载时间过长
- 页面模板
- 只要进度条不要Logo
- 自定义加载背景图
- 激活嵌入资源
- 五.IIS 部署
- 启用Internet Infomation Services
- 添加程序到IIS
- 六.浏览器设置
- 七.UnityScript与JavaScript通信
一.WebGL不能干的那些事
1.内置的video player 无法播放。（可以使用AVPro 播放）
2.多线程
3.socket(可以用UnityWebRequest或websocket)
4.不支持dynamic类型，可以使用object。
5.不支持ComputeShader： SystemInfo.supportsComputeShaders
二.注意事项
1.播放声音
要去掉AutoPlay
2.跨域
参考1
参考2
官网
web.config添加
<httpProtocol><customHeaders><add name="Access-Control-Allow-Origin" value="*" /><add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD, OPTIONS" /><add name="Access-Control-Allow-Credentials" value="true"/><add name="Access-Control-Allow-Headers" value="X-Requested-With, origin, content-type,Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time" /></customHeaders></httpProtocol>
3.发布http or https?
当发布到https上时程序中访问http的都会被改成https,这时候一般就报错了。。。
4.包体大小
注意工程中尽量不用Resources文件夹，不然打包的时候会导致包体过大。因为放在该文件夹下的东西都会被打包。
| 是否包含Resources | build包体大小 |
|---|---|
| 包含Resources | 14M |
| 无Resources | 12.7M |
| 无Resource+Assembly Definitions | 8.93M |
5.Odin
有的类型在WebGL平台并不支持序列化，如果你使用了Odin就需要在打包前生成AOT:
6.T序列化失败
T序列化失败，System.Reflection.Emit.DynamicMethod::.ctor
把序列化工具换成Json .Net For Unity
三.参考资料
hi,WebGL
Unity 发布WebGL注意事项
Unity WebGL 官方教程
Unity WebGL官方教程翻译
发布后打不开
Unity WebGL游戏
官方WebGL Tiny
IIS的搭建
别个的笔记
问题总结
四.Build
空场景build耗时~142s
测试demo
主要步骤
web.config
需要在index.html同级目录下添加web.config配置文件。
需要根据部署的服务器决定：
Apache
web.config后缀改成.htaccess
Gzip版本:
<IfModule mod_mime.c>AddType application/octet-stream .unitywebAddEncoding gzip .unitywebAddType application/wasm .wasmAddEncoding gzip .wasmAddOutputFilterByType DEFLATE application/wasm
</IfModule>Brotli版本：
<IfModule mod_mime.c>AddEncoding br .unitywebRemoveType .wasmAddType application/wasm .wasmRemoveType .unitywebAddType application/octet-stream .unityweb
</IfModule>
IIS
首先安装URL Rewrite！
<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><staticContent><remove fileExtension=".unityweb" /><mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" /><remove fileExtension=".wasm" /><mimeMap fileExtension=".wasm" mimeType="application/wasm" /></staticContent><rewrite><outboundRules><rule name="Append gzip Content-Encoding header"><match serverVariable="RESPONSE_Content-Encoding" pattern=".*" /><conditions><add input="{REQUEST_FILENAME}" pattern="\.(unityweb|wasm)$" /></conditions><action type="Rewrite" value="gzip" /></rule></outboundRules></rewrite></system.webServer>
</configuration>
手机端去掉提示框
在手机端打开wegl项目会弹出不支持webgl的提示框，不想要的话可以把UnityLoader.js文件内的提示框代码改下（line:2041）：
修改前代码
compatibilityCheck: function(e, t, r) {UnityLoader.SystemInfo.hasWebGL ? UnityLoader.SystemInfo.mobile ? e.popup("Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.", [{text: "OK",callback: t}]) : ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1 ? e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.", [{text: "OK",callback: t}]) : t() : e.popup("Your browser does not support WebGL", [{text: "OK",callback: r}])},
修改后
compatibilityCheck: function(e, t, r) {UnityLoader.SystemInfo.hasWebGL ? ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1 ? e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.", [{text: "OK",callback: t}]) : t() : e.popup("Your browser does not support WebGL", [{text: "OK",callback: r}])},
全屏
index.html 修改如下：
<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Unity WebGL Player | Pudong</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><link rel="stylesheet" href="TemplateData/style.css"><script src="TemplateData/UnityProgress.js"></script><script src="Build/UnityLoader.js"></script><script>var gameInstance = UnityLoader.instantiate("gameContainer", "Build/build.json", {onProgress: UnityProgress});</script><!-- 滚动条隐藏 --><style type="text/css">body {overflow: scroll;overflow-x: hidden;overflow-y: hidden;}</style><!-- 窗口自适应 --><script type="text/javascript">function ChangeCanvas() {document.getElementById("gameContainer").style.width = window.innerWidth + "px";document.getElementById("gameContainer").style.height = window.innerHeight + "px";document.getElementById("#canvas").style.width = window.innerWidth + "px";document.getElementById("#canvas").style.height = window.innerHeight + "px";}</script>
</head><body onResize="ChangeCanvas()"><div class="webgl-content" style="position:absolute;width: 100%; height: 100%;z-index:1" id="gameContainer"></div><div style="position:absolute;z-index:2"></div>
</body></html>以上修改只能做到页面最大化，如果要全屏可以手动F11或者添加其他代码
加载时间过长
1.使用Gzip压缩格式
页面模板
模板demo
只要进度条不要Logo
用以下内容替换UnityProgress.js
function UnityProgress(gameInstance, progress) {if (!gameInstance.Module)return;if (!gameInstance.progress) {gameInstance.progress = document.createElement("div");gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;gameInstance.progress.empty = document.createElement("div");gameInstance.progress.empty.className = "empty";gameInstance.progress.appendChild(gameInstance.progress.empty);gameInstance.progress.full = document.createElement("div");gameInstance.progress.full.className = "full";gameInstance.progress.appendChild(gameInstance.progress.full);gameInstance.container.appendChild(gameInstance.progress);}gameInstance.progress.full.style.width = (100 * progress) + "%";gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";if (progress == 1)gameInstance.progress.style.display = "none";
}
Unity发布WebGL时如何修改、删除默认的载入进度条
自定义加载背景图
如下所示把黑色的背景换成了图片！！！
方法概况：直接把Logo换成想要的背景图，然后在css中修改尺寸即可｛（>A<）｝〃≈≈大罗法咒
详细步骤：
1.TemplateData/progressLogo.Dark.png 替换成需要的背景图片。（ps:进度条是progressFull.Dark.png）
2.打开style.css修改logo的宽高.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 100%; height: 100%;}
3.(ノ・_・)ノ去！卍卍卍
激活嵌入资源
介绍
using UnityEditor;
namespace ZYF
{public class ZYF_WebGLEditorScript{[MenuItem("WebGL/Enable Embedded Resources")][System.Obsolete]public static void EnableErrorMessageTesting(){PlayerSettings.SetPropertyBool("useEmbeddedResources", true, BuildTargetGroup.WebGL);}}
}
五.IIS 部署
启用Internet Infomation Services
添加程序到IIS
1.把build目录添加到IIS
2.通过浏览器打开（http://localhost/webgl/ ）
当然也可以用ip打开，笔者本地ip为：192.168.10.215，所以地址为：http://192.168.10.215:80/webgl/
报错了就说明需要添加web.config文件！
重新打开页面就正常了
六.浏览器设置
Chrome 快捷方式右键属性在目标内添加 --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files即可(注意第一个的空格)
示例：“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files
Firefox:
地址栏输入：about:config
找webgl.disabled false
找webgl.force-enabled true
七.UnityScript与JavaScript通信
┏ (゜ω゜)=
Unity WebGL开发相关推荐
- unity webgl开发踩坑——从开发、发布到优化
目录 前言 环境 unity webgl的一些注意点 videoplayer修改-->Video Player WebGL插件 text修改--解决不能显示汉字问题 制作.读取ab包 unity ...
- Unity WebGL开发问题
使用Unity版本为2020.3.15 代码交互 Unity调用Js方法 在项目Assets/Plugins中创建game.jslib文件 mergeInto(LibraryManager.libra ...
- Unity 基础开发-WebGL发布无法运行问题
项目需要发布webGL项目,之前测试过本地可以在火狐浏览器上运行,Unity也支持发布,发布效率比较慢,支持的内容比较少.在做测试的时候还是遇到了问题. Unity版本 20182.4f 火狐浏览器版 ...
- 2021-09-29 Unity WebGL平台开发遇到的坑
内容简介:最近在用Unity做一个 WebGL 平台的项目,开发过程中遇到了各种各样的坑,这里简单记录一下,以免以后再踩.首先是Http请求的问题,我最开始想的是,直接用C#里的写法,编辑器里测试毫无 ...
- 【Unity】开发WebGL内存概念具体解释和遇到的问题
自增加unity WebGL平台以来.Unity的开发团队就一直致力于优化WebGL的内存消耗. 我们已经在Unity使用手冊上有对于WebGL内存管理的详尽分析,甚至在Unite Europe 20 ...
- [Unity-经验]从购买云服务器到发布Unity WebGL项目
[Unity-经验]从购买云服务器到发布Unity WebGL项目 前言 一.WebGL的导出 1. 导出设置 二.服务器购买 1. 带宽的选择 2. 服务器的配置 3. 服务器各个属性的意义 三.项 ...
- untiy发布webgl开发记录
安装Unity3d并导入unitypackage 版本选择: untiy发布webgl经测试 2020版本系列的PC端网页打开都会报错,不能正常打开: 2019系列的发布后PC端可以正常打开并运行,一 ...
- unity webgl优化
对Unity开发WEBGL印象就是开发方便打包慢输出内容加载慢不支持移动端一堆堆问题.但是最麻烦的还是加载慢真的慢. 所以通过对各种h5开发对比准备放弃Unity发布WEBGL的做法.但是随着unit ...
- Unity WebGL错误集锦
ips: 0 Unity的PlayerSettings的otherSettings或者Publish Settings里面的Enable Exceptions里面选择Full StackTrace , ...
最新文章
- QWidget一生，从创建到销毁事件流
- Java设计模式之适配器模式
- Windows ThinPC 最终版已 RTM
- 仓鼠体重年龄对照表_一文带你走进仓鼠世界：仓鼠种类之叙利亚仓鼠（上）
- 洛谷 P3853 [TJOI2007]路标设置
- 琥珀ai_琥珀项目：Java的未来暴露
- LeetCode 237. Delete Node in a Linked List
- 列表视图案例2——显示用户列表
- apache 配置php 版本错误u,PHP+Apache+MySQL 在配置环境时遇到的问题
- 在项目中使用HTMLDom的事件冒泡机制
- 回归方程的拟合优度检验_回归分析的“拟合优度”是什么？
- 大数据平台以及一些核心组件介绍
- iphone12文件管理连接服务器,iPhone手机打开服务器功能，和Windows电脑互传文件方法...
- 紫荆花开之say love to the girl you love
- AnyDesk(远程控制软件) 免费版，比Teamviewer好用
- Android 向联系人名单新加联系人（添加名称和电话号码两项）
- Android中识别手柄JAVA_android蓝牙手柄监听 BluetoothGamepad
- 任性杭州，骨感北京——面试汇总
- [1-6] 把时间当做朋友（李笑来）Chapter 6 【更多思考】 摘录
- 电脑桌面显示不出任何应用程序如何解决？