0
0

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模块

在这里插入图片描述
新建一个空工程

切到WebGL平台

PlayerSettings设置

Resolution and Presentation设置分辨率 : 将会在浏览器显示的默认大小

在这里插入图片描述
Other Settings

有的版本会有一个警告:

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

我们这里也用WebGL2的渲染方式

在这里插入图片描述

Publishing Settings 发布设置

分两种情况介绍 选择压缩的 选择不压缩的

在这里插入图片描述

Compression Format是打包后的Build包的压缩格式

在这里插入图片描述
压缩和不压缩出来的包展示：

没有压缩的

在这里插入图片描述

选择Gzip压缩的

在这里插入图片描述

选择Gzip压缩 没勾压缩回退的 这种的webgl运行加载会出错

!在这里插入图片描述

到这里打包以前的所有配置就都已经完了

接下来就是配置本地的服务器测试环境

先介绍第一种 发布时 不压缩的情况

在这里插入图片描述
打包后我们会发现在我们的文件夹里会有一个网址html，

这代表我们的Web包已经打成功了，

那么直接点击这个html文件运行我们的项目会发现一个报错
在这里插入图片描述
提示我们没有web服务

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

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

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

分两步
1、启用我们的电脑的Windows功能
2、创建一个新的网络（映射到我们自己的包体）

首先要配置（启用）我们的电脑的Windows功能

控制面板>程序>启用或关闭windows功能
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

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

我的电脑（右键）>管理>服务和应用管理>Internet Information Services>

网站（右键 添加一个新的网站）

在这里插入图片描述

!在这里插入图片描述

在这里插入图片描述

!在这里插入图片描述

点击确定后就会创建出一个我们的本地路径的web服务

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

运行后发现还是进不去F12打开调试看一下

还是报错

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述
.data的解析出错

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

需要我们自己在网站的MIME里添加一个.data类型

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

在这里插入图片描述
找到MIME类型双击它 双击

然后点击添加
在这里插入图片描述
application/octet-stream

点击确定就添加上了我们的类型

然后再回去我们的网站就可以正常运行了
在这里插入图片描述

至此所有环境配置完成

第二种压缩的发布设置

在这里插入图片描述
压缩后需要在压缩回退这里勾上

否则web运行时会出错

在这里插入图片描述

然后点击添加 在把这两个文件扩展名添加上

!在这里插入图片描述

.unity3d

.unityweb

application/octet-stream

.json (一般情况下在配置好IIS后会有该类型，若没有就添加)

application/json

然后压缩的也可以正常运行了

第二种运行Unity打包出web的办法

1、安装VSCode

vsCode下载慢的话 可以百度vsCode下载慢 会有办法的

VSCode下载和安装教程（超详细）以及解决VSCode下载速度特别慢的问题_vscode下载太慢-CSDN博客

2、安装LiveServer插件

这个插件是用来启动本地服务的 所以可以顺利运行webgl工程

在这里插入图片描述
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[texture]);
  },

});

具体在Unity编程中引入方法的方式以C#为例

首先需要引入命名空间：

using System.Runtime.InteropServices;

其次需要写具体引入代码：

[DllImport("__Internal")] private static extern void Hello();

using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;

public class CShapCallJs : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Hello();

    [DllImport("__Internal")]
    private static extern void HelloString(string str);

    [DllImport("__Internal")]
    private static extern void PrintFloatArray(float[] array, int size);

    [DllImport("__Internal")]
    private static extern int AddNumbers(int x, int y);

    [DllImport("__Internal")]
    private static extern string StringReturnValueFunction();

    [DllImport("__Internal")]
    private static extern void BindWebGLTexture(int texture);

    public bool CanRotate;
    public float angle = 45;

    void Start()
    {
        Hello();//在js里写了 出先一个弹窗tip

        HelloString("这是一个字符串");

        float[] myArray = new float[10];
        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 可以是字符串、数字，也可为空。

在这里插入图片描述

很空虚具体怎么用呢

看看打出包来的官方index.html程序 怎么调用

官方用了一个全屏的功能 unityInstance.SetFullscreen(1);

在这里插入图片描述

如果是我们自己怎么用呢 ，这个是被定义在了拉姆达表达式里 我们用一个对象给接收出来

就可以用这个Unity实例对象了

具体怎么用呢

我们先创建两个按钮测试一下

在 unity打好的webgl包里 的 index.html中 body下创建两个button

在这里插入图片描述

在这里插入图片描述

在这里可以看到这两个按钮

接下来给这两个按钮 用js添加点击事件

在这里插入图片描述

myUnityInstance.SendMessage(“Cube”, “OnSetStart”);

这个SendMessage 对应到了 unity里的方法

在这里插入图片描述

接下来看看打印出来的myUnityInstance

在这里插入图片描述

这两个都是熟悉的方法了 打印出来也有个好处是 能看到里面能用到的方法

标签： unity webgl 游戏引擎
本文转载自: https://blog.csdn.net/unity_http/article/details/134883877
版权归原作者 unity_http 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Unity打包到Webgl平台以及遇到的问题”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

泷羽sec-星光不负a-学习打卡-安全见闻(1)

Linux 经典面试八股文

docker 拉取MySQL8.0镜像以及安装

【PowerShell】如何使用Pester进行单元测试？

PyCharm中TensorFlow安装指南及.whl文件使用

移动UI：意见反馈设计的8大要点，让用户和产品畅快沟通。

git | 删除指定 commit

文章导航