Unity打包到Webgl平台以及碰到的问题
Unity打包到Webgl平台以及碰到的问题参考网站
Unity打包WebGL的全过程及在打包和使用过程中会碰到的问题(本地测试)-CSDN博客
unity打包到Webgl 并配置能正常运行
这里我用的是Unity2022.3.3f1c1版本
有两种方法
1、配置本地web服务
2、安装vsCode>添加插件LiveServer>把工程托到vsCode里在index.html上右键Open with Live Server 即可运行webgl
首先安装webGL模块
https://i-blog.csdnimg.cn/blog_migrate/980d060d0ddae7192c65f324d7e3788f.png
新建一个空工程
切到WebGL平台https://i-blog.csdnimg.cn/blog_migrate/7902e0c5d51aba3c4d9f6d9806653d6f.png
PlayerSettings设置
Resolution and Presentation设置分辨率 : 将会在浏览器显示的默认大小
https://i-blog.csdnimg.cn/blog_migrate/f172d99bd5cc0e0499b5ea9d9c5fb5b1.png
Other Settings
有的版本会有一个警告:
Unity Other Settings的默认设置在打开后会看到有警告，其大抵意思就是在提醒我们要在 Unity WebGL 构建中启用高质量的光照贴图编码并确保 WebGL 2 兼容性，解决这个警告只必要将Auto Graphics API 自动图形接口关闭后在Graphics APIs选择WebGL2就可以解决这个警告
我们这里也用WebGL2的渲染方式
https://i-blog.csdnimg.cn/blog_migrate/413f4853a36cd8b4d312537ae1c8764e.png
Publishing Settings 发布设置
分两种环境介绍 选择压缩的 选择不压缩的
https://i-blog.csdnimg.cn/blog_migrate/77643d5e1098355d4ac7a61a1bed4867.png
Compression Format是打包后的Build包的压缩格式
https://i-blog.csdnimg.cn/blog_migrate/6569a6529114c75e90eb430bf6934a32.png
压缩和不压缩出来的包展示：
没有压缩的
https://i-blog.csdnimg.cn/blog_migrate/3a3243f0e0cc18e1f0d616146d64ced5.png
选择Gzip压缩的
https://i-blog.csdnimg.cn/blog_migrate/8b91646549cee37cc8f698625d2401f3.png
选择Gzip压缩 没勾压缩回退的 这种的webgl运行加载会堕落
!https://i-blog.csdnimg.cn/blog_migrate/dfbf7ac7a3bbc546b5d713669cc0a453.png
到这里打包从前的所有配置就都已经完了
接下来就是配置本地的服务器测试环境
先介绍第一种 发布时 不压缩的环境
https://i-blog.csdnimg.cn/blog_migrate/a96ab5393b2b0803f615f74090b30e85.png
打包后我们会发如今我们的文件夹里会有一个网址html，
这代表我们的Web包已经打乐成了，
那么直接点击这个html文件运行我们的项目会发现一个报错
https://i-blog.csdnimg.cn/blog_migrate/5b13a1d078133e8b1ca8dcd4dde2bde1.png
提示我们没有web服务
这个问题是因为我们Web包必须在有服务器支持的环境下才可以或许正常运行，
所以接下来我们要配置我们的包体在本地也就是127.0.0的环境下的服务器托管状态
配置包体在本地也就是127.0.0的环境下的服务器托管状态
分两步
1、启用我们的电脑的Windows功能
2、创建一个新的网络（映射到我们本身的包体）
首先要配置（启用）我们的电脑的Windows功能
控制面板>程序>启用或关闭windows功能
https://i-blog.csdnimg.cn/blog_migrate/18a713ea4636b61aef8d8e2a3bab003c.png
https://i-blog.csdnimg.cn/blog_migrate/ce95e0e28cbb37f5046709f2879e8300.png
https://i-blog.csdnimg.cn/blog_migrate/52d9410e4fc78ff54d80da4b929fbffa.png
Internet Information Services左边的箭头全选后点击 确定就可以
接下来就是创建一个新的网络
我的电脑（右键）>管理>服务和应用管理>Internet Information Services>
网站（右键 添加一个新的网站）
https://i-blog.csdnimg.cn/blog_migrate/89c81c1a3331971fc75012699fccc1ea.png
!https://i-blog.csdnimg.cn/blog_migrate/329797ca86afcecd4b95219e03faa318.png
https://i-blog.csdnimg.cn/blog_migrate/8edc0683024d2a0a8a867a6a4df0675b.png
!https://i-blog.csdnimg.cn/blog_migrate/302d0492fb34a13ca7a495717299c1a4.png
点击确定后就会创建出一个我们的本地路径的web服务
然后在我们的网页上输入127.0.0.1:8080（设置的端标语）
运行后发现照旧进不去F12打开调试看一下
照旧报错
https://i-blog.csdnimg.cn/blog_migrate/11154595173499328558f087d6558b55.png
https://i-blog.csdnimg.cn/blog_migrate/85d02a7b19288f675b202e5e58ccdcbe.png
我们在网络里发现我们的.data文件出现了报错我们双击他就会进入如许的界面
https://i-blog.csdnimg.cn/blog_migrate/2d91d9709da6817d73ccad23376a84e4.png
.data的解析堕落
这是因为我们的网站MIME范例不支持解析.data范例文件
必要我们本身在网站的MIME里添加一个.data范例
我们再次回到我们的网站配置界面 点击我们添加的网站
https://i-blog.csdnimg.cn/blog_migrate/d62363515b67b2f68b0d486468e38374.png
找到MIME范例双击它 双击
然后点击添加
https://i-blog.csdnimg.cn/blog_migrate/fbd25cb829423836edd5b5b3164f2871.png
application/octet-stream
点击确定就添加上了我们的范例
然后再回去我们的网站就可以正常运行了
https://i-blog.csdnimg.cn/blog_migrate/8871a87a56c009b44c59dfc7ab660c9c.png
至此所有环境配置完成
第二种压缩的发布设置
https://i-blog.csdnimg.cn/blog_migrate/42e26bf53bf6858867cf87c6d90958bd.png
压缩后必要在压缩回退这里勾上
否则web运行时会堕落
https://i-blog.csdnimg.cn/blog_migrate/e122b481f2e52bce6d1532ee311c0038.png
然后点击添加 在把这两个文件扩展名添加上
!https://i-blog.csdnimg.cn/blog_migrate/03557b7aa9d48466c5ffae179fdb219d.png
.unity3d
.unityweb
application/octet-stream
.json (一样平常环境下在配置好IIS后会有该范例，若没有就添加)
application/json
然后压缩的也可以正常运行了
第二种运行Unity打包出web的办法
1、安装VSCode
vsCode下载慢的话 可以百度vsCode下载慢 会有办法的
VSCode下载和安装教程（超详细）以及解决VSCode下载速度特别慢的问题_vscode下载太慢-CSDN博客
2、安装LiveServer插件
这个插件是用来启动本地服务的 所以可以顺遂运行webgl工程
https://i-blog.csdnimg.cn/blog_migrate/bb5fbc86292d34f965008cfe2f5e224d.png
3、vscode打开unity发布的webgl
可以直接把文件夹拖到vsCode里 会提示信托 点击信托就行
4、选择index,在文本编辑位置，右键选择 Open with Live Server 即可运行webgl
Unity webgl读取streamingAssetsPath文件夹txt
参考网站
里面有读取音频 texture 等都有参考价值
Unity webgl读取streamingAssetsPath文件夹txt_unitywebgl读取steamasset-CSDN博客
在StreamingAssets文件夹下新建一个txt 里面任意写点东西
也可以写json一些配置文件用于游戏的配置设置
把这个脚本挂到场景的物体上 在脚本上拖一个Text
这里只演示了一下读取
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.Networking;
using UnityEngine.UI;
public class ReadConfig : MonoBehaviour
{
public Text ReadText;
// Start is called before the first frame update
void Start()
{
StartCoroutine(ReadTxt("ConfigData.txt", ReadTxtCallBack));
}
private void ReadTxtCallBack(string str)
{
ReadText.text = str;
}
private IEnumerator ReadTxt(string configName, UnityAction<string> action = null)
{
string path;
//手机路径需要加file://
#if UNITY_WIN_STANDALONE || UNITY_IPHONE &&!UNITY_EDITOR
path ="file://"+ Application.streamingAssetsPath + configName;
#else
path = Application.streamingAssetsPath + "/" + configName;
#endif
UnityWebRequest unityWebRequest = UnityWebRequest.Get(path);
yield return unityWebRequest.SendWebRequest();
if (unityWebRequest.error != null)
Debug.Log(unityWebRequest.error);
else
{
string content = unityWebRequest.downloadHandler.text;
if (action != null)
action(content);
}
}
// Update is called once per frame
void Update()
{
}
}
unity中C#调用js
参考网站
Interaction with browser scripting - Unity 手册 (unity3d.com)
Unity2021发布WebGL与网页交互问题的解决 - 自由资讯 (558idc.com)
在项目中使用浏览器 JavaScript 的建议方法是将 JavaScript 源代码添加到项目中，
然后直接从脚本代码中调用这些函数。
首先是必要在工程的Asset目录里面建一个Plugins文件夹，
然后在文件夹里面创建一个.txt文件，名字倒是无所谓，
创建好后要把扩展名改成.jslib。
文件必要有如下所示的语法：
这此中只有mergeInto的第二个参数是可以修改的，
第二个参数是一个对象，这个对象里面包含了多个方法的引用，
这些方法（例如：Hello（）、BingdeWebGLTexture（）等）都是在Unity编程中可以引入的。
这些方法内调用的方法（例如：wiindow.alert()、GLctx.bindTexture()等）都是未来页面中可以被调用的。
mergeInto(LibraryManager.library, {
Hello: function () {
window.alert("Hello, world!");
},
HelloString: function (str) {
window.alert(UTF8ToString(str));
},
PrintFloatArray: function (array, size) {
for(var i = 0; i < size; i++)
console.log(HEAPF32[(array >> 2) + i]);
},
AddNumbers: function (x, y) {
return x + y;
},
StringReturnValueFunction: function () {
var returnStr = "bla";
var bufferSize = lengthBytesUTF8(returnStr) + 1;
var buffer = _malloc(bufferSize);
stringToUTF8(returnStr, buffer, bufferSize);
return buffer;
},
BindWebGLTexture: function (texture) {
GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures);
},
});
详细在Unity编程中引入方法的方式以C#为例
首先必要引入命名空间：
using System.Runtime.InteropServices;
其次必要写详细引入代码：
private static extern void Hello();using System.Collections;using System.Collections.Generic;using System.Runtime.InteropServices;
using UnityEngine;public class CShapCallJs : MonoBehaviour{ private static extern void Hello(); private static extern void HelloString(string str); private static extern void PrintFloatArray(float[] array, int size); private static extern int AddNumbers(int x, int y); private static extern string StringReturnValueFunction(); private static extern void BindWebGLTexture(int texture); public bool CanRotate; public float angle = 45; void Start() { Hello();//在js里写了 出先一个弹窗tip HelloString("这是一个字符串"); float[] myArray = new float; PrintFloatArray(myArray, myArray.Length); int result = AddNumbers(5, 7); Debug.Log(result); Debug.Log(StringReturnValueFunction()); //var texture = new Texture2D(0, 0, TextureFormat.ARGB32, false); //BindWebGLTexture(texture.GetNativeTextureID()); } void Update() { if (CanRotate) { this.transform.Rotate(Vector3.up, Time.deltaTime * angle, Space.World); } } public void OnSetStart() { CanRotate = true; } public void OnSetEnd() { CanRotate = false; }} js调用unity中C#的代码
(页面方法调用Unity内方法的办法)
偶然必要从浏览器的 JavaScript 向 Unity 脚本发送一些数据或通知。
建议的做法是调用内容中的游戏对象上的方法。
如果要从嵌入在项目中的 JavaScript 插件执行调用，
可使用以下代码：
MyGameInstance.SendMessage(objectName, methodName, value);
此中，objectName 是场景中的对象名称；methodName 是当前附加到该对象的脚本中的方法名称；value 可以是字符串、数字，也可为空。
https://i-blog.csdnimg.cn/blog_migrate/f9c27761b085c7bb004541226f1ae2b0.png
很空虚详细怎么用呢
看看打出包来的官方index.html程序 怎么调用
官方用了一个全屏的功能 unityInstance.SetFullscreen(1);
https://i-blog.csdnimg.cn/blog_migrate/1fefbc34066d66357f25300ac9356d55.png
如果是我们本身怎么用呢 ，这个是被界说在了拉姆达表达式里 我们用一个对象给接收出来
就可以用这个Unity实例对象了
详细怎么用呢
我们先创建两个按钮测试一下
在 unity打好的webgl包里 的 index.html中 body下创建两个button
https://i-blog.csdnimg.cn/blog_migrate/af729d652a6f1a175db20d7783450068.png
https://i-blog.csdnimg.cn/blog_migrate/07794d7ccb77f0623e5e25daab60ab90.png
在这里可以看到这两个按钮
接下来给这两个按钮 用js添加点击事件
https://i-blog.csdnimg.cn/blog_migrate/c5df44bfe342432eb5cfdcb7acad2abb.png
myUnityInstance.SendMessage(“Cube”, “OnSetStart”);
这个SendMessage 对应到了 unity里的方法
https://i-blog.csdnimg.cn/blog_migrate/c5107bb84539243753bbda6f22f3837c.png
接下来看看打印出来的myUnityInstance
https://i-blog.csdnimg.cn/blog_migrate/a9a800c3264bfc0f87a6a600c0ffe7fa.png
这两个都是熟悉的方法了 打印出来也有个利益是 能看到里面能用到的方法
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]