UE5.4像素流及前端接入

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

像素流送Githubhttps://github.com/EpicGames/PixelStreamingInfrastructure/tree/master/Frontend

创建一个虚幻项目

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

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

项目创建完成。

创建并启动Vue项目

创建项目

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

npm install -g @vue/cil

在Vscode或者命令行输入

vue create test_vue

test_vue为项目名称

创建完成

启动项目

在命令行进入到项目所在文件夹

使用npm run 查看可运行命令

使用

npm run serve

成功启动后

引入相关的依赖库

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

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

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

新建vue文件

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

在文件中输入下方的代码

<template>
    <div>
      <!-- 页面内容 -->
    </div>
</template>
  
  <script>
import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';

export default {
    name: 'PlayerView',
    mounted() {
      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();
  
      // Example of how to set the logger level
      // Logger.SetLoggerVerbosity(10);
  
      // Create a config object
      const config = new Config({ useUrlParams: true });
  
      // Create a Native DOM delegate instance that implements the Delegate interface class
      const stream = new PixelStreaming(config);
      const application = new Application({
        stream,
        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
      });
  
      document.body.appendChild(application.rootElement);
    },
    methods: {
      // ...
    }
}
</script>
  
<style>
body {
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Montserrat';
    margin: 0;
}
</style>

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

<template>
    <div>
      <!-- 页面内容 -->
    </div>
</template>
  
  <script>
import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';

export default {
    name: 'PlayerView',
    mounted() {
      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();
  
      // Example of how to set the logger level
      // Logger.SetLoggerVerbosity(10);
  
      // Create a config object
      const config = new Config({ useUrlParams: true });
  
      // Create a Native DOM delegate instance that implements the Delegate interface class
      const stream = new PixelStreaming(config);
      const application = new Application({
        stream,
        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
      });
  
      document.body.appendChild(application.rootElement);
    },
    methods: {
      // ...
    }
}
</script>
  
<style>
body {
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Montserrat';
    margin: 0;
}
</style>

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

启动像素流

虚幻启动像素流

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

前端修改地址

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

到此前端引入像素流完成。

前端与UE通信

UE蓝图

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

向前端发送消息

接受前端的消息

前端代码

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

<template>
    <div>
      <!-- 页面内容 -->
      <button @click="SendMesage">发送消息</button>
    </div>
</template>
  
  <script>
import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';

export default {
    name: 'PlayerView',
data(){
    return{
        s:null
    }
},
    mounted() {
      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
      PixelStreamingApplicationStyles.applyStyleSheet();
  
      // Example of how to set the logger level
      // Logger.SetLoggerVerbosity(10);
  
      // Create a config object
      const config = new Config({ useUrlParams: true });
  
      // Create a Native DOM delegate instance that implements the Delegate interface class
      const stream = new PixelStreaming(config);
      this.s = stream;
      
      const application = new Application({
        stream,
        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
      });
  
      document.body.appendChild(application.rootElement);
      stream.addEventListener("handle_responses",this.HandleResponse)
      
    },
    methods: {
      // ...
      SendMesage:function() {
        console.log(this.s);
        this.s.emitUIInteraction("111");
      },
      HandleResponse:function(res){
        console.log(res)
      }
    }
}
</script>
  
<style>
body {
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Montserrat';
    margin: 0;
}
</style>

至此就可以实现UE与前端的双端通信。

注意，通讯不可以是流送编辑器，必须是打包或者以独立线程能运行才可以。