本指南基于UE4.26.2以及Node.js v17.1.0
最终实现目标:
- UE4程序向浏览器发送一段文字,浏览器能接受并解析这段文字
- 浏览器(Chrome)向UE4程序发送一段文字,UE4程序能接受并解析这段文字
可能涉及到的问题:
- 什么是像素流送
- 如何创建和使用一个像素流送项目
- 如何使用UE4蓝图接受和发送数据到浏览器
- 像素流的工作流程是怎样的
解决方案列表:
- 中文直译,大概是把ue4程序运行中产生的每一帧画面,通过网络将画面传送给浏览器,浏览器接受并且能显示这些画面。不过不只是显示画面这么简单,你可以在浏览器中像操作正常的UE4程序一样使用这些画面,比如点击画面上的某个按钮之类的
- 参考以下链接(此链接为UE4官方文档,照着一步步做,就可以得到一个能在手机上显示UE4程序的Demo):https://docs.unrealengine.com/4.27/zh-CN/SharingAndReleasing/PixelStreaming/PixelStreamingOverview/
- 如何使用UE4蓝图接受和发送数据到浏览器
3.1发送数据到浏览器
3.1.1发生Json到浏览器的方法:在蓝图中画下如下内容
3.1.2在打包路径中的app.js文件末尾加入如下图所示的代码:
app.js的文件路径:xxxxx\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer\scripts
function myHandleResponseFunction(data) {console.warn("收到回应Response received!");switch (data) {case "HelloWorld"://和你在UE4中通过SendPixelStreamingRespomse节点的Descriptor属性写的内容保持一致console.warn("HelloWorld");//在浏览器的控制台打印HelloWorldcase "AnotherEvent":console.warn("其他");}
}addResponseEventListener("handle_responses", myHandleResponseFunction);
3.1.3之后和官方案例的运行方式相同,在浏览器中点击F12->切换到控制台->按下键盘(不是小写键盘)的数字1,你便会在控制台中看到来自UE4的按键请求效果
3.2从浏览器中接收数据(当浏览器发送消息时,绑定的事件会从前到后依次执行一遍)
4.像素流的工作流程