UE5.4像素流及前端接入

在ue5.2之后，ue像素流的源码放入到Github仓库中，由社区维护。
像素流送Github

https://github.com/EpicGames/PixelStreamingInfrastructure/tree/master/Frontend
创建一个虚幻项目

使用虚幻引擎5.2以上创建一个初始项目
 

创建项目后打开Pixel Streaming插件，重启项目

项目创建完成。
创建并启动Vue项目

创建项目

默认电脑已安装node.js与Vue脚手架

1. npm install -g @vue/cil

复制代码

在Vscode大概下令行输入

1. vue create test_vue

复制代码

test_vue为项目名称
创建完成

启动项目

在下令行进入到项目地点文件夹

使用npm run 查看可运行下令

使用

1. npm run serve

复制代码

成功启动后

引入相干的依靠库

在ue的5.2之后，像素流集成不再引入相干文件，换成使用npm引入相干的依靠。与正常的Vue引入依靠流程一致。

1. npm install @epicgames-ps/lib-pixelstreamingfrontend-ue5.2
2. npm install @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2

复制代码

背面的5.2为引擎版本，引入与引擎对应的版本，否则可能有未知错误。

新建vue文件

在components文件夹下创建新的Vue文件

在文件中输入下方的代码

1. <template>
2.     <div>
3.       <!-- 页面内容 -->
4.     </div>
5. </template>
6.   
7.   <script>
8. import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
9. import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
12. export default {
13.     name: 'PlayerView',
14.     mounted() {
15.       const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
16.       PixelStreamingApplicationStyles.applyStyleSheet();
17.   
18.       // Example of how to set the logger level
19.       // Logger.SetLoggerVerbosity(10);
20.   
21.       // Create a config object
22.       const config = new Config({ useUrlParams: true });
23.   
24.       // Create a Native DOM delegate instance that implements the Delegate interface class
25.       const stream = new PixelStreaming(config);
26.       const application = new Application({
27.         stream,
28.         onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
29.       });
30.   
31.       document.body.appendChild(application.rootElement);
32.     },
33.     methods: {
34.       // ...
35.     }
36. }
37. </script>
38.   
39. <style>
40. body {
41.     width: 100vw;
42.     height: 100vh;
43.     min-height: -webkit-fill-available;
44.     font-family: 'Montserrat';
45.     margin: 0;
46. }
47. </style>

复制代码

在App.vue中引入新的页面并把初始页面注释，此中PlayerView为在页面界说的模块名称

1. <template>
2.     <div>
3.       <!-- 页面内容 -->
4.     </div>
5. </template>
6.   
7.   <script>
8. import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
9. import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
12. export default {
13.     name: 'PlayerView',
14.     mounted() {
15.       const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
16.       PixelStreamingApplicationStyles.applyStyleSheet();
17.   
18.       // Example of how to set the logger level
19.       // Logger.SetLoggerVerbosity(10);
20.   
21.       // Create a config object
22.       const config = new Config({ useUrlParams: true });
23.   
24.       // Create a Native DOM delegate instance that implements the Delegate interface class
25.       const stream = new PixelStreaming(config);
26.       const application = new Application({
27.         stream,
28.         onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
29.       });
30.   
31.       document.body.appendChild(application.rootElement);
32.     },
33.     methods: {
34.       // ...
35.     }
36. }
37. </script>
38.   
39. <style>
40. body {
41.     width: 100vw;
42.     height: 100vh;
43.     min-height: -webkit-fill-available;
44.     font-family: 'Montserrat';
45.     margin: 0;
46. }
47. </style>

复制代码

之后启动项目会看到下面页面

启动像素流

虚幻启动像素流

在编辑器的像素流送选项下点击启动信令服务器，流送关卡编辑器就流送完整编辑器

前端修改地点

点击前端的设置，修改流送地点(上图的红色框中)，之后链接就会看到画面

到此前端引入像素流完成。
前端与UE通讯

UE蓝图

在虚幻引擎的玩家控制器引入PixStreamingInput组件

向前端发送消息

接受前端的消息

前端代码

在前端创建变量，袒露stream对象，它内里就有我们的通讯函数

1. <template>
2.     <div>
3.       <!-- 页面内容 -->
4.       <button @click="SendMesage">发送消息</button>
5.     </div>
6. </template>
7.   
8.   <script>
9. import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
10. import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
15. export default {
16.     name: 'PlayerView',
17. data(){
18.     return{
19.         s:null
20.     }
21. },
22.     mounted() {
23.       const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
24.       PixelStreamingApplicationStyles.applyStyleSheet();
25.   
26.       // Example of how to set the logger level
27.       // Logger.SetLoggerVerbosity(10);
28.   
29.       // Create a config object
30.       const config = new Config({ useUrlParams: true });
31.   
32.       // Create a Native DOM delegate instance that implements the Delegate interface class
33.       const stream = new PixelStreaming(config);
34.       this.s = stream;
35.       
36.       const application = new Application({
37.         stream,
38.         onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
39.       });
40.   
41.       document.body.appendChild(application.rootElement);
42.       stream.addEventListener("handle_responses",this.HandleResponse)
43.       
44.     },
45.     methods: {
46.       // ...
47.       SendMesage:function() {
48.         console.log(this.s);
49.         this.s.emitUIInteraction("111");
50.       },
51.       HandleResponse:function(res){
52.         console.log(res)
53.       }
54.     }
55. }
56. </script>
57.   
58. <style>
59. body {
60.     width: 100vw;
61.     height: 100vh;
62.     min-height: -webkit-fill-available;
63.     font-family: 'Montserrat';
64.     margin: 0;
65. }
66. </style>

复制代码

至此就可以实现UE与前端的双端通讯。
留意，通讯不可以是流送编辑器，必须是打包大概以独立线程能运行才可以。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。