UE Web Remote Control

news2024/11/27 6:36:42

前言

最近在研究UE自启WEB服务和网页通信以此来通过网页与UE进行数据交互，这样最好的方式就是可以摒弃掉整个繁琐的通信连接流程如TCP UDP，但是找到的一些方法都不是很适用，尤其是WEBUI这个插件它只适合内嵌到UE本身才能完成交互，但是用WebSocket进行交互的话还需要额外创建一个服务让其网页与UE在交互的过程有一个桥梁，这就违背了我们的初衷，之前就了解到UE 有一个Remote Control它可以自启一个服务生成一个网页端来控制UE中提前预设好的一些功能，本着试试的态度看了一遍UE的WEB API发现能用但是很繁琐，想要简单一点的话还需要额外添加一个RemoteControlWebInterface插件让其进行交互，如果你只是对与官方的控制端网页想进行优化的话，那么接下来的过程很实用了，但是想自由的实际操作一些功能我还是建议自己开发一下，这也是我记录完操作过程后要进军的事情了，话不多说，接下来就是整个通信请求过程。

过程

插件准备

在你创建好的UE工程中在Edit ->Plugins中找到RemoteControlAPI和RemoteControlWebInterface插件然后进行勾选启用后重启项目
重启后可在Edit ->ProjectSettings->Plugins中找到Remote Control这显示的30010就是我们的WebAPI的服务端口
随后我们先开启我们的WEB服务，有两种方式进行调用一种是直接在UE CMD运行窗口中一种是在蓝图中，我建议我们使用蓝图这样可以很方便的在我们工程中尽显使用了，这样我们在项目启动后开启我们的WEB服务，点键盘1的时候关闭服务和项目
```
WebControl.StartServer
WebControl.StopServer
WebControl.EnableServerOnStartup
```

RemoteControl

我们先在UE中创建一个Actor，然后随便的创建两个自定义事件，后面做一个不一样的打印
在UEContent文件夹下我们创建一个自己的文件夹然后鼠标右键选择Miscellaneous在后面选择RemoteControlPreset对其进行创建，名称根据自己的想法添加就行。
双击我们刚才创建RemoteControlPreset，点击Expose下拉在ActorFunction中找到我们刚才创建的蓝图找到那两个自定义事件，每次只能添加一个所以还需要再操作一次
添加好我们的两个自定义事件后，为了方便自己能记住每个事件的具体作用我们可以进行重命名，修改完保存一下运行项目即可，接下来我们就模拟下网页的实际请求。

HTTP WEB API

现在已经将我们的WEB服务启动了，接下来我建议准备一个HTTP协议测试工具如Postman可以很方便的进行测试，首先第一个api我们先看下Remote中都有哪些请求，这是一个GET请求，可以直接网页中打开，其中的Path就是api地址，Verb是我们请求类型，Description是这个api一个详细的介绍，大家根据自己的需求详细的看下里面解释的还是很清晰的。
```
http://localhost:30010/remote/info
```
在获取到所有的api的前提下，我们现在获取我们创建的RemoteControlPreset，remote/presets是获取我们工程下preset列表，有几个获取几个，获取到我们的preset后解析Json然后将我们的名称存下来，因为我们接下来要通过找到刚才添加的两个自定义事件。
```
http://localhost:30010/remote/presets
```
/remote/preset/:preset是获取我们的preset下所有内容的接口，这样我们就可以获取到我们的刚才创建的preset下的两个自定义事件了。里面数据目前我们的只用到DisplayName，剩下的Path这些数据细节开发会用到
```
http://localhost:30010/remote/preset/Demo
```
现在我们对测试一这个自定义事件进行测试触发，我们需要再preset后面添加一个function，因为所有的事件和函数都继承与UFunction，只不过具体类型的二进制命令不一致，这块内容大家可以了解下迭代器和反射系统，这不细说，我们进行调用，这里的调用是PUT了而且需要再请求过程时添加请求体。
```
HTTP请求链接
http://localhost:30010/remote/preset/Demo/function/测试一

请求体（Raw-->Json）
{
    "Parameters": {
        "InText": "Hello, World"
    },
    "GenerateTransaction": true
}
```
这样呢就完成我们的对其Remote WEB API简单的使用，也可以根据自己的需求设计合适的前端UI了，对于修改和添加的一些内容请大家看下官方的api介绍
UE 官方remote-control-apihttps://docs.unrealengine.com/5.3/en-US/remote-control-api-http-reference-for-unreal-engine/
UE 官方HTTP APIhttps://docs.unrealengine.com/5.3/en-US/remote-control-preset-api-http-reference-for-unreal-engine/