纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

unity与vue交互 unity与vue交互(无第三方插件)

weixin_44957482   2021-06-24 我要评论
想了解unity与vue交互(无第三方插件)的相关内容吗weixin_44957482在本文为您仔细讲解unity与vue交互的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue与Unity交互,vue与Unity双向交互下面大家一起来学习吧

vue与unity交互最终版本 不需要安装任何第三方插件

请大家安心看完写的比较详细并且绝对有效所以篇幅比较大也可以直接看图解看不懂图解后再看文档也可

因为之前我使用的vue-unity-webgl 后来发现使用过程中容易出现各种问题也可能是我们菜吧没弄懂插件如何使用下面先说一下我遇见的问题

问题1:unity为了解决无法输入中文问题使用了网上的解决方案因为vue-unity-webgl会将unity的东西完全融入到vue所以unity的操作也会导致vue页面出现异常例如我的el-input无法正常输入

问题2:unity引入hls为了解决视频播放问题因为vue-unity-webgl不支持引入其他js导致unity无法正常播放视频(我还傻呵呵的改了三方源码打了补丁现在血亏)

综合以上2个原因我决定从根本上解决此问题也为了避免不再背锅想出了以下解决方案这个方案比较简单但却非常有效;

思路:

  1. 在vue中依然使用iframe引入unity文件原因:iframe是另外一个window即使unity程序出现了使用了全局的方法来进行操作也不行影响到vue程序
  2. unity编辑后的index.html被iframe引入然后再index.html中追加几行代码进行unity的方法接受和vue传递详情见图解

好处:
unity存在于iframe的独立window中可以避开好多非常规操作引起的问题并且此方法可以适用于任何前端和unity的交互场景不要求一定是vue

tip:
不用担心iframe层级无限高导致布局困难的问题新版unity即使在iframe中引入也是可以被定位元素覆盖住的

unity文件写法:

1、定义一个jslib文件名字随意起但是一定要放在Plugins文件夹代码示例如下

在这里插入图片描述

这里定义了一个sayHello和一个ReportReady简单解释下:
sayHello是unity自己测试用的方法;

ReoprtReady是unity加载完成后触发window对象下的ReportReaddy事件这个事件明显不存在是对于window对象的自定义方法;

至于前端需要调用的方法存在于第二步中;

2、新建一个测试文件创建一个物体名为JsTalker

在这里插入图片描述

此文件的写法相信unity小伙伴都知道意思不过多赘述简要描述下就是此物体引用过来第一步写的2个方法(SayHello、RepoetReady)暴露出去一个方法(SetToken)这个暴露出来的方法就是前端需要调用的

此时运行表现形式应该会提示window下无ReportReady方法所以需要在unity打包后生产的index.html中加入一行代码 window.ReportReady=function(){} 此时不会报错;

接下来就是unity加载完毕执行ReportReady然后input按下指定按键触发SayHello前端如果调用SetToken会使unity中text变量变动

vue文件写法

1、在index.html页面中定义的RepoetReady中按照下列方式进行书写

在这里插入图片描述
在这里插入图片描述

解释:当unity触发window.ReportReady的时候向顶层window传递事件然后调用定义好的send;

表现形式:unity加载完毕触发ReportReady前端接收到后执行send同时向上层传递事件进行交互;

send写法为固定api解释见上图

2、在使用iframe引入unity的vue组件中书写

在这里插入图片描述

当index.html使用window.top.dispatchEvent的时候此处可以监听到;

提问:为啥监听的是fn因为unity调用window.ReportReady的时候携带的参数是(‘fn',…)这里是我和unity工程师定义的第一个参数是事件名字第二个参数为携带参数

当vue程序出发send事件的时候实际上是触发index.html中定义的send方法然后携带参数index.html接受到后会将参数发送给unity

在这里插入图片描述

此时双向交互完成

总结:

window.ReportReady 是自定义事件是由unity挂载到window的当unity需要给vue发送事件的时候会调用window.ReportReady()然后带有2个参数一个是事件名字一个是携带参数这个示例中携带事件名字为fn;
前端接受到后通过dispatch来派发到顶层window顶层window就是咱们的vue然后vue中通过事件监听来获取;
发送事件的话就是通过send通过contentWindow来调用iframe中(unity打包后的index.html)的方法方法为固定api写法其中贴图中有注释


相关文章

猜您喜欢

  • Android 文字消除效果 Android实现文字消除效果

    想了解Android实现文字消除效果的相关内容吗萝卜枣在本文为您仔细讲解Android 文字消除效果的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Android,消除效果,Android,文字消除下面大家一起来学习吧..
  • Java8的stream流 总结一下关于在Java8中使用stream流踩过的一些坑

    想了解总结一下关于在Java8中使用stream流踩过的一些坑的相关内容吗一路奔跑1314在本文为您仔细讲解Java8的stream流的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Java8的stream流,Java,stream的使用下面大家一起来学习吧..

网友评论

Copyright 2020 www.gamerfx.net 【游戏天空】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式