Unity 发布WebGL、去Logo、网络端通信 、本地运行

这篇具有很好参考价值的文章主要介绍了Unity 发布WebGL、去Logo、网络端通信 、本地运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


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

一、Unity在 WebGL平台的发布方法
1、如下图,选择webgl平台,没安装的点击下载安装。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

 安装后如图。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

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

Unity 发布WebGL、去Logo、网络端通信 、本地运行

 如果想直接运行看效果,则可以选择Build And Run,打包结束时会自动打开网页运行此项目。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

或者安装火狐游览器,双击打包生成的html文件运行项目。

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

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

1、去掉Logo
如下图,关闭Splash Image去除Made with Unity启动画面,即可关闭Logo。(在File->Build Settings->Player Settings->Splash Image->Show Splash Screen)

Unity 发布WebGL、去Logo、网络端通信 、本地运行
2、去掉加载界面进度条
在Unity官方文档中查询WebGL Template(https://docs.unity3d.com/Manual/webgl-templates.html),找到这个主题。

 Unity 发布WebGL、去Logo、网络端通信 、本地运行

根据文档的例子,我们有两种方式来去掉或者自定义载入条:

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

Unity 发布WebGL、去Logo、网络端通信 、本地运行

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

Unity 发布WebGL、去Logo、网络端通信 、本地运行

 这个文件的onProgress方法定义了整个进度条,包括了Logo的生成,进度条的生成,进度条的进度等,这里我们可以把进度条修改成自己需要的样式,如果单纯地想去掉它,把方法体{ …}里面的内容都删掉就可以了。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

通过这个方法修改了系统自带的模板,对以后发布的每一个项目都有影响,所以不太建议使用这种方法。

2.自定义一个WebGL Template
Unity提供了一个自定义WebGL模板的方法,步骤如下:

(1) 在Assets文件夹下新建一个文件夹WebGLTemplates。

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

(3) 然后在MyTemplate文件夹创建一个index.html文件,这时就可以在File->Build Settings->Player Settings->Resolution and Presentation看到我们自定义的模板了。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

Unity 发布WebGL、去Logo、网络端通信 、本地运行
(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,打包结束时会自动打开网页运行此项目。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

2、安装火狐游览器,双击打包生成的html文件运行项目。

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

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

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

=======================================================

Firefox在本地打开Unity3D开发的webGL的项目(2020-12)


最新版的Firefox 84.0.1

Unity 发布WebGL、去Logo、网络端通信 、本地运行
在本地打开webGL的文件:


1,打开火狐firefox浏览器,在地址栏内输入 about:config ,出现Firefox配置信息,“三思而后行”点击“接受风险并继续”。

Unity 发布WebGL、去Logo、网络端通信 、本地运行


2,在最上面的搜索栏中搜索 webgl

Unity 发布WebGL、去Logo、网络端通信 、本地运行

3,找到 webgl.force-enabled,双击,设置为true,强制开启webgl支持。 Unity 发布WebGL、去Logo、网络端通信 、本地运行

4,搜索 security.fileuri.strict_origin_policy ,双击设置为false,允许加载本地资源。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

5,关闭Firefox,然后重新启动,就可以打开本地的webgl文件了。

Unity 发布WebGL、去Logo、网络端通信 、本地运行

 
————————————————
参考链接:

https://blog.csdn.net/qq_43505432/article/details/109655905

https://blog.csdn.net/qq_27999715/article/details/111932634文章来源地址https://www.toymoban.com/news/detail-460377.html

到了这里,关于Unity 发布WebGL、去Logo、网络端通信 、本地运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity WebGL发布页面报错

    1、报错内容 Unable to parse Build/test.framework.js.gz! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header \\\"Content-Encoding: gzip\\\" present. Check browser Console and Devtools Network tab to debug. 2、报错页面 解决方案,在Unity的WebGL Player S

    2024年02月16日
    浏览(39)
  • unity WebGL 发布服务后出错

    解决办法:需要在IIS中添加unity3d和unityweb两个mime 1、电脑怎么添加mime 2、UNITY3D WEBGL IIS发布添加MIME类型 我在添加unity3d和unityweb两个mime后 已经解决此问题

    2024年02月11日
    浏览(47)
  • unity发布WebGL遇到的坑(持续更新)

    1、unity默认字体在网页中不会显示 解决方法:自己新导入一个字体,使用导入的字体 2、之前打过包并运行过,后面又在unity中进行了修改,重新打包,运行发现还是修改之前的效果,虽然是新包, 解决方法:这是因为网页中有缓存, 点击浏览器右边的三个点,选择设置–隐

    2024年02月12日
    浏览(46)
  • Unity发布webgl获取浏览器的URL

    Unity发布webgl之后获取浏览器的url 在unity中创建文件夹 Plugins ,然后添加添加文件 UnityGetBrowserURL.jslib 在Unity中添加代码 场景布局 发布webgl 拷贝到nginx 运行结果 在地址栏输入 Ip:端口号/?serligblsdhroivbaelirbgvkersab , /? 后面是随便打的字符,然后按下enter会刷新网页并重新显示URL,(

    2024年03月20日
    浏览(54)
  • unity webgl开发踩坑——从开发、发布到优化

    又是一个阳光明媚的早上,突然老板召集开会说要将一个android项目适配webgl,没办法赶紧用unity改一下踩踩坑;这里记录一下这些天的踩坑过程。 使用unity2021.3.4f1c1,visual studio2019,visual studio code videoplayer仅适用于安卓和PC,如果有苹果适配的需求的话,那就要用到这个插件:

    2024年02月02日
    浏览(44)
  • unity webgl 系列(2):从webgl内存中下载文件到本地硬盘

    前面是将文件上传到webgl进程,本篇是将文件从webgl进程中下载文件到浏览器的下载目录中。 通用,只需要 二进制数组和文件名。 添加一段代码 解释:接收三个字符串:由文件二进制转换出来的二进制字符串、xxx.yy文件名、文件类型。 统一经过Pointer_stringify转化为js字符串,

    2024年04月17日
    浏览(37)
  • vue项目结合unity webgl,并相互通信

    vue与unity交互完成,最开始使用vue-unity-webgl插件,用着感觉有很多问题,然后换成了iframe,简单记录一下 本文主要解决以下问题: 1.vue项目中如何引入使用unity webgl 2.vue如何与unity互信通信 主要步骤: 1.将unity打包后的文件夹引入至项目,我把它放在static目录下 2.在vue文件通过

    2024年02月16日
    浏览(53)
  • Unity减少发布打包文件的体积(二)——设置WebGL发布时每张图片的压缩方式

    一个项目在发布成WebGL后,其体积至关重要,体积太大,用户加载会经历一个漫长的等待…轻则骂娘,重则用脚把电脑踢烂(扣 质 保 金 )… 那么如何减少发布后的体积呢,本文从图片的压缩开始入手。 前传回顾: Unity减少发布打包文件的体积(一)——获取精灵图片的信息限

    2024年02月04日
    浏览(44)
  • unity(WebGL) 把截图保存下载到本地

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 尊重原著: 原文链接: https://blog.csdn.net/Wrinkle2017/article/details/117660124 以下方法都可以搭配本文使用: 截图的方法: 链接: unity 自由框选截图(两种方法,亲测

    2024年03月14日
    浏览(48)
  • Unity在网页上运行WebGL问题

    项目要开发B/S模式,需要使用WebGL,目前还是前期阶段,遇到了几个问题,在此记录一下。 Unity版本:2019.4 浏览器:谷歌浏览器 目前按照Unity默认设置打包。 如果是BuildAndRun可以直接运行,但是如果是Build显示下面错误: It seems your browser does not support running Unity WebGL content from

    2023年04月08日
    浏览(84)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包