实现Vue3和UE5.2进行通信(Pixel Streaming)

文章目录

      • 1. 从UE5.2到前端页面的通信
        • 1.1 编写蓝图脚本
        • 1.2 编写前端的响应函数
        • 1.3 功能验证
      • 2. 从Vue3到UE5.2的信息发送
        • 2.1 UE5.2蓝图的设计
        • 2.2 前端发送消息功能的实现
        • 2.3 功能验证
      • 3. 参考资源

这篇文章简单讲解一下如何实现vue3和UE5进行数据的通信。
如果有同学还不清楚如何在Vue3中实现Pixel Streaming的播放器,请查看这篇文章 Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)。

1. 从UE5.2到前端页面的通信

现在我们想让UE5.2也就是后端发送给前端一些消息,然后前端接收到消息后并根据不同的消息进行不同的处理。

1.1 编写蓝图脚本

打开UE5.2,新建一个空白项目,这些操作上一篇博客已经讲过,就不在此过多赘述了。
打开内容浏览器,在内容文件夹下新建一个文件夹,命名为Blueprints
新建Blueprints文件夹
然后,双击打开该文件夹,在右边空白处,右键然后新建一个蓝图类,选取父类为Actor,然后将其命名为SendMessage。
新建蓝图类
然后,双击打开SendMessage蓝图类:
我们在此为了简单调试,创建一个按下键盘数字键3就会发送给前端一个字符串的蓝图类,功能比较简单,很好实现,如果有不懂的地方可以看一看Unreal蓝图相关的知识,官方文档介绍的比较仔细。
如下图所示:
SendMessage蓝图类
最后,将该蓝图类拖拽到场景中即可。

1.2 编写前端的响应函数

在上一篇博客中,我们已经成功在vue中集成了UE5.2的像素流,并且可以实时展示。
现在,我们来实现接收后端发送的消息的功能。
编写一个响应函数,命名为myHandleResponseFunction,功能就是在接收的消息后,在当前页面弹出一个提示框,并展示消息的内容。
代码如下,将其放在methods里面:
在这里插入图片描述

myHandleResponseFunction(response) {
			let popupContainer = document.createElement('div');
			popupContainer.style.position = 'fixed';
			popupContainer.style.top = '50%';
			popupContainer.style.left = '50%';
			popupContainer.style.transform = 'translate(-50%, -50%)';
			popupContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
			popupContainer.style.color = '#fff';
			popupContainer.style.padding = '20px';
			popupContainer.style.borderRadius = '5px';
			popupContainer.style.zIndex = '9999';

			// 创建展示消息的文本节点
			var messageNode = document.createTextNode(response);
			popupContainer.appendChild(messageNode);

			// 将提示窗口添加到 body 元素中
			document.body.appendChild(popupContainer);

			// 设置定时器,在一定时间后移除提示窗口
			setTimeout(function() {
				document.body.removeChild(popupContainer);
			}, 3000);
		},

在mounted里面添加注册我们编写的监听/响应函数,通过pixelstreaming对象的addResponseEventListener函数即可实现。

stream.addResponseEventListener("handle_responses", this.myHandleResponseFunction);

如果要移除注册,通过removeResponseEventListener函数即可。

stream.removeResponseEventListener("handle_responses");

1.3 功能验证

首先,在UE5.2中打开信令服务器,并同时流送关卡编辑器。
开启信令服务器并流送关卡编辑器
单击运行按钮,运行关卡。
运行关卡
启动vue项目:

npm run serve

打开http://localhost:8080/,访问页面。
现在,可以成功在浏览器中看到关卡页面。
关卡页面
回到UE5.2中,单击一下关卡,让鼠标聚焦在编辑器里,此时按下数字键3,就可以看到浏览器中弹出提示窗口。
在这里插入图片描述
到此为止,我们就完成了从UE5.2到前端信息的传递;如果想了解更多,大家可以阅读一下源码。

2. 从Vue3到UE5.2的信息发送

2.1 UE5.2蓝图的设计

还是为了简单起见,我们仅仅将接收到的消息输出,更多复杂的功能大家可以自己去实现。
仿照上面,创建一个新的蓝图类,命名为GetMessage
创建GetMessage蓝图类

2.2 前端发送消息功能的实现

首先,我们在播放器中编写一个新的按钮,命名为Send Message,为其绑定一个点击触发的函数——发送一个字符串test
发送文本时,我们利用pixelStreaming对象的emitUIInteraction函数,该函数不仅仅可以发送字符串,还可以发送JSON格式的对象。
代码如下:

const SendTextButton = new LabelledButton(
	'Send Message',
	 'Send'
 );
 SendTextButton .addOnClickListener(() => {
     stream.emitUIInteraction("test");
 });
const commandsSectionElem = application.configUI.buildSectionWithHeading(
     application.settingsPanel.settingsContentElement,
     'TestOrders'
 );       
 commandsSectionElem.appendChild(restartStreamButton.rootElement);

现在打开播放器中的设置面板,可以看到多了一个Send Message的按钮:
在这里插入图片描述

2.3 功能验证

首先,像上面一样,在UE5.2中单击启动按钮,然后启动信令服务器并流送关卡编辑器。
然后,启动vue项目,在浏览器输入地址打开页面。
单击一下Send按钮,可以看到UE5关卡编辑器中左上角出现了test文本,说明发送消息成功。

在这里插入图片描述

3. 参考资源

Unreal Engine 5.2官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/30330.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微服务链路追踪SkyWalking的介绍和部署

skywalking和链路追踪 SkyWalking介绍 首先我们要明白一点,在微服务的架构中,为什么要做链路追踪?解决问题的痛点在哪里?其实无外乎是如下几个问题: 如何将整个调用链路串起来,并能够快速定位问题&#…

通过GPIO子系统编写LED驱动,应用程序控制LED灯亮灭

1、在内核设备树中添加设备信息: LED1的设备树编写需要参考内核的帮助文档: linux-5.10.61/Documentation/devicetree/bindings/gpio 在根节点内部添加led灯设备树节点 :~/linux-5.10.61/arch/arm/boot/dts $ vi stm32mp157a-fsmp1a.dts myled.c #in…

选择排序 - C语言实现

目录 🥰前言 ✅选择排序 🥝基本思想 🥝实现逻辑 🥝动图演示 复杂度分析 😍代码实现 🚩优化改进-->二元选择排序 😍 改进代码 前言 🥰在学数据结构的第一节课就知道了数据结…

React 通过一个输入内容加入列表案例熟悉 Hook 基本使用

我们创建一个react项目 在src下创建components文件夹 在下面创建一个index.jsx index.jsx 参考代码如下 import React, { useState } from "react";const useInputValue (initialValue) > {const [value,setValue] useState(initialValue);return {value,onCha…

19-递归的理解、场景

一、递归 🌭🌭🌭在函数内部,可以调用其他函数。如果一个函数在内部调用自身本身,这个函数就是递归函数 核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解 一般来说,递归…

算法刷题-字符串-左旋转字符串

反转个字符串还有这么多用处? 题目:剑指Offer58-II.左旋转字符串 力扣题目链接 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部。请定义一个函数实现字符串左旋转操作的功能。比如,输入字符串"abcdefg"和数字2…

generator和promise和async的异同

一、generator(生成器)是ES6标准引入的新数据类型,他和promise一样都是异步事件的解决方案 //generator函数生成斐波那契// generator(生成器)是ES6标准引入的新数据类型,async就是 Generator 函数的语法糖//本质:用来处理异步事件的对象/包含异步操作的容器functio…

校园外卖平台怎么做

校园外卖小程序是一款基于智能手机的移动应用,提供订餐、支付、配送等服务。它能为顾客提供丰富的美食选择,为商家提供进一步发展业务的机会,同时骑手也有机会赚取额外的收入。 一、 用户端功能介绍 1. 地图定位:用户可以利用小…

网络安全学术顶会——CCS '22 议题清单、摘要与总结(中)

注意:本文由GPT4与Claude联合生成。 81、HammerScope: Observing DRAM Power Consumption Using Rowhammer 内存单元尺寸的不断缩小使得内存密度提高,功耗降低,但同时也影响了其可靠性。Rowhammer攻击利用这种降低的可靠性在内存中引发比特翻…

计算机网络基础学习指南

前言 计算机网络基础是研发/运维工程师都需掌握的知识,但往往会被忽略。 今天,我将对计算机网络基础学习进行详细阐述,涵盖 TCP / UDP协议、Http协议、Socket等,希望你们会喜欢。 1、计算机网络体系结构 1.1 简介 定义 计算机…

数据库的事务处理

文章目录 前言一、事务的概念二、事务的特性三、隔离级别四、并发控制五、总结 前言 在现代信息化时代,大量的数据不断地被创建、修改、删除和查询。 为了保证数据的准确性和一致性,数据库的事务处理成为了必不可少的一个重要组成部分。 本文将针对数据…

nginx学习使用

一、Nginx是什么? Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第…

线性代数:线性方程求解、矩阵的逆、线性组合、线性独立

本文参考www.deeplearningbook.org一书第二章2.3 Identity and Inverse Matrices 2.4 Linear Dependence and Span 本文围绕线性方程求解依次介绍矩阵的逆、线性组合、线性独立等线性代数的基础知识点。 一、线性方程 本文主要围绕求解线性方程展开,我们先把线性…

软件工程——第2章可行性研究知识点整理

本专栏是博主个人笔记,主要目的是利用碎片化的时间来记忆软工知识点,特此声明! 文章目录 1.可行性研究的目的? 2.可行性研究的实质? 3.从哪些方面研究逻辑模型的解法可行性? 4.可行性研究最根本的任务是…

【MySQL】数据库基础 ②

✍LIKE 子句 说明: 使用 SELECT 来查询数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录。 WHERE 子句中可以使用等号 来设定获取数据的条件,如 "字段(text_title) 值()"。 但是有时候我们需要获取 text_…

Dump寄存器使用、解析

前人种树,后人乘凉;创造不易,请勿迁移~ author daisy.skye的博客_CSDN博客-嵌入式,Qt,Linux领域博主 daisy.skye的博客_CSDN博客-嵌入式,Qt,Linux领域博主daisy.skye擅长嵌入式,Qt,Linux,等方面的知识https://blog.csdn.net/qq_40715266?t…

Ubuntu18.04离线安装Nginx

因需要安装nginx的服务器无法连接互联网,所以需要离线安装。首先需要下载nginx的安装包,之后进行安装,在安装之前需要保证gcc,g,make等依赖包已经安装。 因为是需要离线安装,所以在之前是用的一台互联网下载…

selenium 要点击的元素被其他元素遮挡 or 无法找到非可视范围内的元素

selenium 无法找到非可视范围内的元素 org.openqa.selenium.StaleElementReferenceException: The element reference of is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed se…

Java实训日志06

文章目录 八、项目开发实现步骤(八)创建服务接口1、创建学校服务接口2、创建状态服务接口3、创建学生服务接口4、创建用户服务接口 (九)创建服务接口实现类1、创建学校服务接口实现类2、创建状态服务接口实现类3、创建学生服务接口…

【C++】4.工具:读取ini配置信息

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍读取ini配置信息。 学其所用,用其所学。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下次更新不迷路&…