解锁PixelStreamingInfrastructure蓝图API在浏览器里直接操作Unreal Engine蓝图【免费下载链接】PixelStreamingInfrastructureMoved to: https://github.com/EpicGamesExt/PixelStreamingInfrastructure项目地址: https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructurePixelStreamingInfrastructure是虚幻引擎Unreal Engine像素流送的基础设施项目它让你把 UE 游戏画面流畅地推送到浏览器里播放。而它最有玩法的一环就是蓝图 APIBlueprint API你可以让网页上的按钮、表单和 UI 直接指挥游戏里的蓝图逻辑也能让游戏事件反过来更新网页界面。本文将带你快速上手这条浏览器与 Unreal 之间的双向通信链路无需深厚背景也能看懂。为什么需要 Pixel Streaming 蓝图 API传统的像素流送应用里浏览器只是一个播放器你看到的画面在游戏里运行鼠标键盘事件被转发过去仅此而已。而蓝图 API 打破了这种单向关系。它提供了一条自定义消息通道让网页和 UE 可以互相发送任意数据️浏览器 → UE网页发出自定义事件游戏蓝图接收并执行逻辑比如切换关卡、更换角色皮肤UE → 浏览器游戏里发生事件时向所有连接的网页推送消息比如弹出提示、更新比分板也就是说你的 HTML 页面不再只是游戏的屏幕而是可以深度参与游戏逻辑的控制面板。第一步给 Actor 添加 Pixel Streaming Input 组件使用蓝图 API 的前提是在你的关卡里给一个 Actor 添加PixelStreamingInputComponent组件。官方建议挂在应用的PlayerController上这是一个安全稳妥的选择。操作非常简单在蓝图编辑器中点击Add Component从下拉列表中选择Pixel Streaming Input即可。⚠️注意在 UE 4.27 之前这个组件在加载插件时会自动添加现在需要开发者手动添加这也是新版项目中最常见的新手踩坑点。浏览器向 UE 发命令三个核心函数前端库提供了三个函数让你从 HTML 玩家页面把事件和命令传给游戏。它们的实现位于前端库的核心类中源码见 PixelStreaming.ts。函数用途emitCommand发送任意 JSON 对象作为命令给游戏emitConsoleCommand发送 UE 控制台命令如stat fps显示帧率emitUIInteraction发送自定义字符串或对象触发蓝图中绑定的输入事件其中emitUIInteraction是自定义交互的主力。比如在网页上点击加载第二关按钮时const descriptor { LoadLevel: /Game/Maps/Level_2, PlayerCharacter: { Name: Shinobi, Skin: Dynasty, }, }; this.stream.emitUIInteraction(descriptor);这段逻辑的底层实现位于 WebRtcPlayerController.ts。安全提示由于 UE 控制台命令能力极强emitCommand和emitConsoleCommand只有在启动 UE 应用时附加-AllowPixelStreamingCommands命令行参数后才会生效否则命令会被前端直接拦截。蓝图端绑定 UI Interaction 事件网页发出的emitUIInteraction消息需要在蓝图里接住。使用Pixel Streaming Input Bind Event to On Input Event节点把你自己的自定义事件绑定上去通常在游戏开始时绑定一次即可。绑定的自定义事件带有一个名为Descriptor的输出它就是网页发来的字符串。你可以用Search Substring节点判断消息内容如果发的是 JSON 对象则用Pixel Streaming Get Json String Value节点提取任意字段值例如取出LoadLevel小技巧如果要取嵌套字段用 TypeScript 常见的点号表示法即可比如PlayerCharacter.Name。UE 向浏览器发事件Send Pixel Streaming Response反向通信同样简单任何带有Pixel Streaming Input组件的 Actor都可以用Send Pixel Streaming Response节点把一条自定义字符串发给所有连接的网页。前端这边通过PixelStreaming对象的addResponseEventListener注册监听函数即可收到消息如果传的是 JSON 字符串在回调里用JSON.parse还原成对象即可。响应消息的接收处理源码见 ResponseController.ts。这样游戏内的剧情触发、任务完成、血量变化等事件都能实时驱动网页 UI 更新做出非常精致的混合体验。常见问题与避坑清单问题解决方法蓝图收不到 UI Interaction 事件检查是否添加了 Pixel Streaming Input 组件并正确绑定了事件控制台命令无效启动参数缺少-AllowPixelStreamingCommands取不到嵌套的 JSON 字段使用点号表示法如PlayerCharacter.Skin消息没发送出去emitUIInteraction等函数在视频未就绪时会返回false确认连接已建立延伸阅读与相关文件想深入细节可以阅读项目自带的前端文档路径均为项目内相对路径蓝图 API 入门Accessing the Pixel Streaming Blueprint API.md浏览器到 UE 的通信详解Communicating from the Player Page to UE5.mdUE 到浏览器的通信详解Communicating from UE5 to the Player Page.md前端库入口pixelstreamingfrontend.ts前端文档目录Frontend/Docs/README.md掌握蓝图 API 后你的浏览器页面就能成为 UE 游戏的第二控制台——从网页加载关卡、到游戏驱动网页 UI创意完全由你决定。【免费下载链接】PixelStreamingInfrastructureMoved to: https://github.com/EpicGamesExt/PixelStreamingInfrastructure项目地址: https://gitcode.com/gh_mirrors/pix/PixelStreamingInfrastructure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
