UE5.4像素流及前端接入
在ue5.2之后，ue像素流的源码放入到Github仓库中，由社区维护。像素流送Githubhttps://csdnimg.cn/release/blog_editor_html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83Ahttps://github.com/EpicGames/PixelStreamingInfrastructure/tree/master/Frontend
创建一个虚幻项目
使用虚幻引擎5.2以上创建一个初始项目
https://i-blog.csdnimg.cn/direct/791434824f43423da391bb2a9d3dd1f9.png
创建项目后打开Pixel Streaming插件，重启项目
https://i-blog.csdnimg.cn/direct/79cb55fc4f28405680bdade26c03be6e.png
项目创建完成。
创建并启动Vue项目
创建项目
默认电脑已安装node.js与Vue脚手架
npm install -g @vue/cil 在Vscode大概下令行输入
vue create test_vue test_vue为项目名称
创建完成
https://i-blog.csdnimg.cn/direct/668dc65bbf944d4eb4b3fcd0ec36303a.png
启动项目
在下令行进入到项目地点文件夹
https://i-blog.csdnimg.cn/direct/011d1a1e0e154502929210a48e23fa52.png
使用npm run 查看可运行下令
https://i-blog.csdnimg.cn/direct/400653c6329c43c9bb53c4720fbc9a06.png
使用
npm run serve 成功启动后
https://i-blog.csdnimg.cn/direct/a89ea43daaf34377922cf6de9dab6f9d.png
https://i-blog.csdnimg.cn/direct/1faa5527bb71468d87be70684e033107.png
引入相干的依靠库
在ue的5.2之后，像素流集成不再引入相干文件，换成使用npm引入相干的依靠。与正常的Vue引入依靠流程一致。
npm install @epicgames-ps/lib-pixelstreamingfrontend-ue5.2
npm install @epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2 背面的5.2为引擎版本，引入与引擎对应的版本，否则可能有未知错误。
https://i-blog.csdnimg.cn/direct/aa3abc22ebe247119703504a3dc001eb.png新建vue文件
在components文件夹下创建新的Vue文件
https://i-blog.csdnimg.cn/direct/91f1c623a9ec4618bad7405833ecc4b6.png
在文件中输入下方的代码
<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> 之后启动项目会看到下面页面
https://i-blog.csdnimg.cn/direct/23da732fff78406b93098abab9813480.png
启动像素流
虚幻启动像素流
在编辑器的像素流送选项下点击启动信令服务器，流送关卡编辑器就流送完整编辑器
https://i-blog.csdnimg.cn/direct/a526286067dc476894b7790f916ae186.png
前端修改地点https://i-blog.csdnimg.cn/direct/c868644f01d84b6ca3fdc967db2c8320.png
点击前端的设置，修改流送地点(上图的红色框中)，之后链接就会看到画面
https://i-blog.csdnimg.cn/direct/c92d52e2b6d04592ae2285bb8eabb02e.png
到此前端引入像素流完成。
前端与UE通讯
UE蓝图
在虚幻引擎的玩家控制器引入PixStreamingInput组件
https://i-blog.csdnimg.cn/direct/a37ce4020b2d4147a1b7b174524b1466.png
向前端发送消息
https://i-blog.csdnimg.cn/direct/9716378f708b47c998e02efe8917de7f.png
接受前端的消息
https://i-blog.csdnimg.cn/direct/a725251f412f474bb587dc7458dd48fb.png
前端代码
在前端创建变量，袒露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> https://i-blog.csdnimg.cn/direct/2f00450c586f42fa9403b4cca7eb1fb9.png
至此就可以实现UE与前端的双端通讯。
留意，通讯不可以是流送编辑器，必须是打包大概以独立线程能运行才可以。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]