ITman彪叔的博客,微信公众号:ITman彪叔。欢迎对canvas、webgl、图形学感兴趣的读者订阅专栏。 点击下面链接可以订阅: [canvas高级进阶] https://xiaozhuanlan.com/canvas [webgl入门到高级进阶]https://xiaozhuanlan.com/webgl

UE4 WebUI使用指南2-通信

前面一篇WebUI的文章讲述的WebUI插件的下载,开启,在UE中创建,加载网页等。
本文继续讲述通过WebUI,UE和网页实现双向通信的实现思路。

一点说明

由于WebUI 使用的浏览器内核并不是最新的浏览器内核,所以一些新的JS语法和新的CSS并不支持。 比如不支持解构语法等。

所以在制作页面的时候需要注意这些问题点。

调试

如果遇到问题,需要调试,在WebUI加载网页之后,点击网页上任意元素,然后按下shift+ctrl+i 可以调出网页控制台,进行错误查看。

引入通信JS代码

要实现UE和页面的通信,首先需要在页面中引入一段js代码,如下所示:

"object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),(ue.interface={}),(ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):((document.location.hash=n),(document.location.hash=encodeURIComponent("[]")))}})):(function(e){(ue.interface={}),(ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))})})(ue.interface),(window.ue4=ue.interface.broadcast);window.ue=ue;

该js代码片段为WebUI官方推荐。

网页向UE发送消息

网页向UE发消息比较如意,通过ue4函数,既可向UE发送消息,ue4函数支持两个参数,name和data,name是string格式,data是json格式,如下所示:

ue4("cmd",{value:123})

UE接受消息

UE接受消息,通过蓝图即可监听webui的消息即可,如下图(蓝图)所示:

image.png
其中name和Data是网页传递过来的参数,Callback此处不详述,一般用不上。

网页接受UE消息

网页除了可以给UE发送消息外,还可以接受来自UE的消息。 只需要在ue.interface对象上面,添加一个回调函数,即可接受消息,如下所示:

ue.interface.add = function (data) {

  const { initValue } = JSON.parse(data);
  // todo
};

UE发送消息给网页

UE想网页发送消息的蓝图如下所示,调用webUI的Call方法,Function传递函数名称,Data 传递函数的参数

image.png

总结

本文提供了UE和网页的双向通信的方式的思路,具体细节需要大家自己多上手尝试。

太阳虽好,总要诸君亲自去晒,旁人却替你晒不来。

最后,关注公号“ITMan彪叔” 可以添加作者微信进行交流,及时收到更多有价值的文章。

posted on 2023-03-08 17:23  ITman彪叔  阅读(186)  评论(0编辑  收藏  举报

导航

ITman彪叔的博客,微信公众号:ITman彪叔。欢迎对canvas、webgl、图形学感兴趣的读者订阅专栏。 点击下面链接可以订阅: [canvas高级进阶] https://xiaozhuanlan.com/canvas [webgl入门到高级进阶]https://xiaozhuanlan.com/webgl