UE Web Remote Control

前言

       最近在研究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-apiicon-default.png?t=N7T8https://docs.unrealengine.com/5.3/en-US/remote-control-api-http-reference-for-unreal-engine/
  • UE 官方HTTP APIicon-default.png?t=N7T8https://docs.unrealengine.com/5.3/en-US/remote-control-preset-api-http-reference-for-unreal-engine/

结束语

      这种使用方法 对于一些介绍类型项目还是比较实用的,可以通过Pad或者手机就可以直接控制,但是对于一些定制化内容,我建议还是研究下底层内容自己深入开发一下UE web服务因为Remote是官方提供的一个使用模版,肯定还是有一些限制的自由度不够,希望上面的内容对大家有所帮助。

UE WebUI插件是一种基于UE(Unreal Engine)引擎的Web用户界面插件。UE引擎是一款强大的游戏开发引擎,而WebUI插件则为开发人员提供了一种将Web技术和UE引擎结合起来的方式,以实现在游戏中构建交互式和可自定义的用户界面。 UE WebUI插件具有以下特点和功能: 1. 基于Web技术:UE WebUI插件利用Web技术(如HTML、CSS和JavaScript)来创建用户界面,使开发人员可以使用熟悉的前端技术进行开发。这种基于Web的开发方式使得开发人员可以更快地构建和调整用户界面。 2. 可自定义的界面:UE WebUI插件允许开发人员根据游戏需求自定义用户界面的外观和行为。开发人员可以使用CSS和JavaScript来定制样式和动态交互。这种灵活性使得开发人员能够创建独特且符合游戏风格的用户界面。 3. 支持数据交换:UE WebUI插件支持与游戏内的其他系统进行数据交换。开发人员可以使用JavaScript来实现与游戏逻辑的交互,以实现实时数据更新和响应。这种数据交换能够使用户界面和游戏内部的状态保持同步。 4. 跨平台支持:由于UE WebUI插件基于Web技术,因此可以在多个平台上进行部署和运行。无论是在PC上、掌机上还是移动设备上,都可以通过Web浏览器来访问和使用用户界面。 总之,UE WebUI插件是一种强大的工具,能够帮助开发人员在UE引擎中创建交互式和可自定义的用户界面。通过使用Web技术,开发人员可以更快地构建界面,定制样式和交互,并与游戏内部进行数据交换。这为游戏开发带来了更多的灵活性和创造力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值