vue與unity交互最終版本 不需要安裝任何第三方插件

請(qǐng)大家安心看完，寫(xiě)的比較詳細(xì)，并且絕對(duì)有效，所以篇幅比較大，也可以直接看圖解，看不懂圖解后再看文檔也可

因?yàn)橹拔沂褂玫膙ue-unity-webgl 后來(lái)發(fā)現(xiàn)使用過(guò)程中容易出現(xiàn)各種問(wèn)題，也可能是我們菜吧，沒(méi)弄懂插件如何使用，下面先說(shuō)一下我遇見(jiàn)的問(wèn)題

問(wèn)題1：unity為了解決無(wú)法輸入中文問(wèn)題，使用了網(wǎng)上的解決方案，因?yàn)関ue-unity-webgl會(huì)將unity的東西完全融入到vue，所以u(píng)nity的操作也會(huì)導(dǎo)致vue頁(yè)面出現(xiàn)異常，例如我的el-input無(wú)法正常輸入

問(wèn)題2：unity引入hls，為了解決視頻播放問(wèn)題，因?yàn)関ue-unity-webgl不支持引入其他js，導(dǎo)致unity無(wú)法正常播放視頻（我還傻呵呵的改了三方源碼，打了補(bǔ)丁，現(xiàn)在血虧）

綜合以上2個(gè)原因，我決定從根本上解決此問(wèn)題，也為了避免不再背鍋，想出了以下解決方案，這個(gè)方案比較簡(jiǎn)單但卻非常有效；

思路：

1. 在vue中依然使用iframe引入unity文件，原因：iframe是另外一個(gè)window，即使unity程序出現(xiàn)了使用了全局的方法來(lái)進(jìn)行操作，也不行影響到vue程序
2. unity編輯后的index.html被iframe引入，然后再index.html中追加幾行代碼，進(jìn)行unity的方法接受和vue傳遞，詳情見(jiàn)圖解

好處：
unity存在于iframe的獨(dú)立window中，可以避開(kāi)好多非常規(guī)操作引起的問(wèn)題，并且此方法可以適用于任何前端和unity的交互場(chǎng)景，不要求一定是vue

tip：
不用擔(dān)心iframe層級(jí)無(wú)限高導(dǎo)致布局困難的問(wèn)題，新版unity即使在iframe中引入，也是可以被定位元素覆蓋住的

unity文件寫(xiě)法：

1、定義一個(gè)jslib文件，名字隨意起，但是一定要放在Plugins文件夾，代碼示例如下

這里定義了一個(gè)sayHello和一個(gè)ReportReady，簡(jiǎn)單解釋下：
sayHello是unity自己測(cè)試用的方法；

ReoprtReady是unity加載完成后，觸發(fā)window對(duì)象下的ReportReaddy事件，這個(gè)事件明顯不存在，是對(duì)于window對(duì)象的自定義方法；

至于前端需要調(diào)用的方法存在于第二步中；

2、新建一個(gè)測(cè)試文件，創(chuàng)建一個(gè)物體名為JsTalker

此文件的寫(xiě)法相信unity小伙伴都知道意思，不過(guò)多贅述，簡(jiǎn)要描述下就是，此物體引用過(guò)來(lái)第一步寫(xiě)的2個(gè)方法（SayHello、RepoetReady），暴露出去一個(gè)方法（SetToken），這個(gè)暴露出來(lái)的方法就是前端需要調(diào)用的

此時(shí)運(yùn)行表現(xiàn)形式應(yīng)該會(huì)提示window下無(wú)ReportReady方法，所以需要在unity打包后生產(chǎn)的index.html中加入一行代碼 window.ReportReady=function(){} 此時(shí)不會(huì)報(bào)錯(cuò)；

接下來(lái)就是unity加載完畢執(zhí)行ReportReady，然后input按下指定按鍵，觸發(fā)SayHello，前端如果調(diào)用SetToken會(huì)使unity中text變量變動(dòng)

vue文件寫(xiě)法

1、在index.html頁(yè)面中定義的RepoetReady中，按照下列方式進(jìn)行書(shū)寫(xiě)

解釋：當(dāng)unity觸發(fā)window.ReportReady的時(shí)候，向頂層window傳遞事件，然后調(diào)用定義好的send；

表現(xiàn)形式：unity加載完畢，觸發(fā)ReportReady，前端接收到后執(zhí)行send，同時(shí)向上層傳遞事件，進(jìn)行交互；

send寫(xiě)法為固定api，解釋見(jiàn)上圖

2、在使用iframe引入unity的vue組件中書(shū)寫(xiě)

當(dāng)index.html使用window.top.dispatchEvent的時(shí)候，此處可以監(jiān)聽(tīng)到；

提問(wèn)：為啥監(jiān)聽(tīng)的是fn，因?yàn)閡nity調(diào)用window.ReportReady的時(shí)候，攜帶的參數(shù)是（‘fn',…），這里是我和unity工程師定義的，第一個(gè)參數(shù)是事件名字，第二個(gè)參數(shù)為攜帶參數(shù)

當(dāng)vue程序出發(fā)send事件的時(shí)候，實(shí)際上是觸發(fā)index.html中定義的send方法，然后攜帶參數(shù)，index.html接受到后，會(huì)將參數(shù)發(fā)送給unity

此時(shí)，雙向交互完成。

總結(jié)：

window.ReportReady 是自定義事件，是由unity掛載到window的，當(dāng)unity需要給vue發(fā)送事件的時(shí)候，會(huì)調(diào)用window.ReportReady()，然后帶有2個(gè)參數(shù)，一個(gè)是事件名字，一個(gè)是攜帶參數(shù)，這個(gè)示例中，攜帶事件名字為fn；
前端接受到后，通過(guò)dispatch來(lái)派發(fā)到頂層window，頂層window就是咱們的vue，然后vue中通過(guò)事件監(jiān)聽(tīng)來(lái)獲??；
發(fā)送事件的話就是通過(guò)send，通過(guò)contentWindow來(lái)調(diào)用iframe中（unity打包后的index.html）的方法，方法為固定api寫(xiě)法，其中貼圖中有注釋

到此這篇關(guān)于unity與vue交互(無(wú)第三方插件）的文章就介紹到這了,更多相關(guān)unity與vue交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論