\

In the cone of light, all is fate

记录如何在UE4中使用HTML页面做为UI,并双向交互——插件WEBUI


使用WEBUI作为插件是因为网上的资料相对较多,之前看到很多人推荐BLUI,我尝试了一下,没有找到能读明白的教程。
之前也用过WEBUI实现UE4与WEB的展示和双向交互,不过那是基于原生的HTML和JS,这次想在VUE中实现页面,正好学习一下前端知识。
UE4中我们要新建GameModeBase和InterfaceHUD,然后在项目设置中使用刚才新建的GameModeBase,GameModeBase中要使用刚才新建的InterfaceHUD。

 

 

 

 

 

 

 

 

 

 在HUD中,蓝图如下

 

 

 然后就是WEB部分,这里我们先实现一个简单的,准备一个HTML页面,在<head>标签内加一个<script>标签,里面内容如下:

"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), (ue4 = ue.interface.broadcast);
View Code
ue4("abc"); //web调用UE4内的方法、事件,参数是方法名,可以有第二个参数,它是第一个参数的参数
ue.interface.ABC = function(){
    //...UE4调用web里的方法,ABC是方法名,括号内也可以传参数
}

上图中LoadURL这个节点的参数是一个网址,可以是任意网页的网址,也可以是本地服务的网址,图中我用的就是后者,当然目前的情况,可用LoadFile节点,参数是文件的路径。
注意WEBUI这个插件,默认你把前端相关文件都放在一个叫UI的文件夹,这个UI文件夹就放在项目根目录就行,然后LoadFile中的文件路径,默认根路径是UI,比如index.html在UI下,就直接在参数位置写index.html。

事实上以本地服务的地址作为LoadURL的参数还存在问题,比如我必须先将WEB项目运行,然后UE4中才能通过LoadURL访问到页面,虽说可以通过C++开启本地服务,但开启本地服务并不等于WEB页面就运行在上面了,不过目前这不是我要考虑的问题,只要关注插件如何使用,和VUE相关的技术即可。

posted @ 2021-11-13 14:18  Ymrt  阅读(5117)  评论(0编辑  收藏  举报