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

👉 原文地址
: https://blog.hidavid.cn/webui-html-mouse-unreal/

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

一、下载和导入插件

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

打开例程项目，点开插件管理页面，Edit->Plugins，勾选刚加入项目的plugins，如下图：

重启项目才能加载刚勾上的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数据。

三、Web穿透的设置

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

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

WebUI 或 WebBrowser无法输入中文字体的解决方案

WebUI自带一个接口可以接收输入法的中文输入，只需要调用下面的方法即可：

如果是WebBrowser，需要自行实现该方法：

void UC_WebBrowser::EnableIME()
{
    if (WebBrowserWidget.IsValid())
    {
        ITextInputMethodSystem*inputSystem = FSlateApplication::Get().GetTextInputMethodSystem();

        if (inputSystem)
        {
            WebBrowserWidget->UnbindInputMethodSystem();
            WebBrowserWidget->BindInputMethodSystem(inputSystem);
        }
        else
        {
            UE_LOG(LogTemp, Warning, TEXT("Input Method System is not valid"));
        }
    }
}

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