【UE4】很适合IOC项目使用的一个库——WebUI,实现web穿透

1220416-20200512164910391-170923032.gif

如何导入UE4的插件Plugins

UE4如何跟WebBrowser交互，互调传参

Web穿透设置

一、下载和导入插件

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

打开例程项目，点开插件管理页面，Edit->Plugins，勾选刚加入项目的plugins，如下图：
[图片上传失败...(image-e341b8-1604997096053)]
重启项目才能加载刚勾上的plugins

最后导入demo项目里面的InterfaceHUD和WebInterface。

关于导出导入蓝图：先在需要导出的项目中选中需要导出的蓝图文件，点击右键，选择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的函数名称setFPS，Data引脚为传入的json数据。
[图片上传失败...(image-79041e-1604997096053)]

三、Web穿透的设置

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

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