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

1220416-20200512164910391-170923032.gif

1. 如何导入UE4的插件Plugins
2. UE4如何跟WebBrowser交互，互调传参
3. 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中设置使用它。

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界面元素的透明度阈值。

在这里插入图片描述

官网地址： https://tracerinteractive.com/plugins/webui
Github地址：https://github.com/tracerinteractive/UnrealEngine