Unity百例开发日记之如何发布WebGL、去Logo、网络端通信、本地运行

最新推荐文章于 2024-03-22 11:21:15 发布

小程小程，永不消沉

最新推荐文章于 2024-03-22 11:21:15 发布

阅读量5k

点赞数 7

分类专栏： Unity开发文章标签： unity webgl js

本文链接：https://blog.csdn.net/qq_43505432/article/details/109655905

版权

Unity开发专栏收录该内容

63 篇文章 28 订阅

订阅专栏

以下内容将和大家详细分享 Unity 在 WebGL平台的发布方法、 如何去除unity的Logo和加载界面、 WebGL与网络端通信 、以及 如何在本地运行html。

一、Unity在 WebGL平台的发布方法

1、如下图，选择webgl平台，没安装的点击下载安装
在这里插入图片描述
安装后如图

选择需要打包的场景，无特殊要求则可以直接点击Build打包项目，会生成如下三个文件，则发布成功。

如果想直接运行看效果，则可以选择Build And Run，打包结束时会自动打开网页运行此项目。
在这里插入图片描述
或者安装火狐游览器，双击打包生成的html文件运行项目。
.

二、如何去除unity的Logo、加载界面、进度条

上面简单说了下打包步骤，但是大家会发现开始运行时加载界面带有unity进度条和Logo。
如何去掉呢？

首先当然得拥有付费账号，或者 emmm，不会的私我，才能有权限关闭这些东西。

1、去掉Logo

如下图，关闭Splash Image去除Made with Unity启动画面，即可关闭Logo。
（在File->Build Settings->Player Settings->Splash Image->Show Splash Screen）
在这里插入图片描述

2、去掉加载界面进度条

在Unity官方文档中查询WebGL Template（https://docs.unity3d.com/Manual/webgl-templates.html），找到这个主题

在这里插入图片描述

在这里插入图片描述
根据文档的例子，我们有两种方式来去掉或者自定义载入条：

直接修改默认模板default或者minimal（不建议）
根据文档里说的，Unity内置的两种模板都可以在Unity的安装路径中找到，这里我们选择default这个默认模板，打开文件夹

接下来进入TemplateData这个文件夹里找到UnityProgress.js这个文件

在这里插入图片描述

这个文件的onProgress方法定义了整个进度条，包括了Logo的生成，进度条的生成，进度条的进度等，这里我们可以把进度条修改成自己需要的样式，如果单纯地想去掉它，把方法体{ …}里面的内容都删掉就可以了
在这里插入图片描述
通过这个方法修改了系统自带的模板，对以后发布的每一个项目都有影响，所以不太建议使用这种方法。

自定义一个WebGL Template

Unity提供了一个自定义WebGL模板的方法，步骤如下：

（1）在Assets文件夹下新建一个文件夹WebGLTemplates

（2）在WebGLTemplates文件夹下创建子文件夹MyTemplate，这个文件夹保存我们自定义的模板的内容，文件夹名可以随意

（3）然后在MyTemplate文件夹创建一个index.html文件，这时就可以在File->Build Settings->Player Settings->Resolution and Presentation看到我们自定义的模板了
在这里插入图片描述

（4）根据官方文档，编辑index.html文件

其实更方便的是，我们可以直接把第一种方法里的default文件夹里的内容直接复制到这里来，然后按照第一种方法去修改，最后在发布的时候选择这个模板就可以了。

三、WebGL与网络端通信

关于WebGL与网络端互传数据的方式可参考此博客：https://blog.csdn.net/york_new/article/details/78984678
以下是我修改后的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 | Test</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 unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebGl.json", { onProgress: UnityProgress });
  </script>
</head>

<body>
  <div class="webgl-content" style="width: 100%;">
    <div id="unityContainer" style="width:100%"></div>

  </div>
  //---------------------打包后手动增加部分
  <script>
    window.addEventListener('message', (e) => {
      console.log(unityInstance);
      // A3 紧急
      // A4 气体
      // A5 恢复
      let { type } = e.data;
      console.log(type, 'type');
      if (type === 'dispatchSize') {
        const { width, height } = e.data;
        const dom = document.querySelector('#unityContainer');
        dom.style.height = height + 'px';
      } else if (type === 'A3') {
        console.log('监听到紧急事件')
        unityInstance.SendMessage('Camera', 'TestMethod', 'true');
      } else if (type === 'A5') {
        unityInstance.SendMessage('Camera', 'TestMethod', 'false');
        console.log('监听到恢复事件')
      }

    }, false);

  </script>
  //---------------------打包后手动增加部分
</body>

</html>

四、如何在本地运行html

想要直接运行看效果，我所知道的有以下几种方法：
1、打包时选择Build And Run，打包结束时会自动打开网页运行此项目。
在这里插入图片描述
2、安装火狐游览器，双击打包生成的html文件运行项目。

3、正常都是放到服务器上运行。

4、下载一个netbox2，架设一个本地服务器。

关于此方法可参考此博客：https://blog.csdn.net/blastblade/article/details/81170020

小程小程，永不消沉

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
8
评论
Unity百例开发日记之如何发布WebGL、去Logo、网络端通信、本地运行

https://blog.csdn.net/blastblade/article/details/84440098https://blog.csdn.net/w405722907/article/details/81699068<!DOCTYPE html><html lang="en-us"><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="t
复制链接

扫一扫