【UE4】一个实现Web穿透,用HTML开发UI的方式——WebUI的用法

网友实现的效果

  1. 如何导入UE4的插件Plugins
  2. UE4如何跟WebBrowser交互,互调传参
  3. Web穿透设置
  4. 文末附件

一、下载和导入插件

首先到官网下载对应版本的依赖库,把依赖库解压后放置在游戏引擎安装目录的Plugins目录下面:
如我的路径是 ..../Epic Games\UE_4.23\Engine\Plugins\Runtime

打开例程项目,点开插件管理页面,Edit->Plugins,勾选刚加入项目的plugins,如下图:
在这里插入图片描述
重启项目才能加载刚勾上的plugins

最后导入demo项目里面的InterfaceHUDWebInterface

关于导出导入蓝图:先在需要导出的项目中选中需要导出的蓝图文件,点击右键,选择AssetAction->migrate,接着选择需要导入项目的Content路径,注意一定是要Content路径,不然蓝图会出问题。
这样就完成了蓝图的导出导入。

到了这一步就完成了UE4插件的导入。

二、UE4跟web交互,互相调用

html加上这段,方便接口调用两个蓝图。创建继承InterfaceHud的蓝图BP_HUD,或者直接使用InterfaceHUD,并在GameMode中设置使用它。

<script>
// create the global ue4(...) helper function
"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);
</script>

2.1 js传数据到UE4

在js中调用下面函数,第一个参数为UE4对应的接口名称,第二个参数(可选)为传入的json参数

ue4("callUE4Func", {"haha":999});

修改HUD的蓝图,在SwitchOnName中加入pin,命名为调用函数的名称
在这里插入图片描述
这样就完成了js传数据给UE4,那就能实现调用UE4的函数方法了。

2.2 UE4调用js函数

首先在js里定义一个函数,如下所示,setFPS为函数方法的名称

ue.interface.setFPS = function(fps)
    {
        // set element text
        $("#fpsMeter").text(fps.toFixed(1) + " FPS");
    };

然后,同样地在HUD蓝图中,添加CallFunction的蓝图节点,Function引脚填写js的函数名称setFPSData引脚为传入的json数据。
在这里插入图片描述

三、Web穿透的设置

Web穿透是WebUI很实用的功能之一,它是通过获取Web元素的透明值来判断是否执行穿透的。

设置方式:
打开蓝图WebInterface,在Hieracrchy窗口点选Browser,在Details窗口中,有这个属性类别 Behavior->Mouse,其中Enable Transparency就是用于设置穿透web界面元素的透明度阈值。

在这里插入图片描述

附件地址:https://download.csdn.net/download/killfunst/13103996

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注