24. UE5 RPG制作属性面板(二)

news2024/11/16 5:28:13

在上一篇中,我们创建属性面板的大部分样式,这一篇里面接着制作。
在这一篇里我们需要有以下几个方面:

  1. 在界面增加一个属性按钮。
  2. 属性按钮增加事件,点击时可以打开属性面板,属性面板打开时无法再次点击按钮。
  3. 点击属性面板的关闭按钮可以关闭属性面板,关闭属性面板后,属性按钮可以再次打开属性面板。

接下来,我们将一步步实现上面的功能。

创建属性按钮

在上一篇中,我们创建了一个按钮模版widget,它可以被直接使用,也可以被继承使用。接下来,我们将使用它创建一个加宽版本的按钮。
右键创建一个控件蓝图,父类使用WBP_Button命名为WBP_WideButton
在这里插入图片描述
选中左侧的节点
在这里插入图片描述
右侧会出现我们公开的属性
在这里插入图片描述
我们将它们修改掉。加宽的按钮不需要边框,我们将其清除掉,并修改四种状态下使用的图片
在这里插入图片描述
修改完成后效果如下
在这里插入图片描述
修改完成将其添加到WBP_Overlay上面
在这里插入图片描述
编译运行,我们测试它的三种状态,因为没有触发第四种,记得直接修改按钮上的文字,在界面上显示的时候,显示Attributes
在这里插入图片描述

添加属性按钮的点击事件

之前没讲过,现在讲一下WIdget图标里面的几个事件
在这里插入图片描述
Event Pre Construct 相当于是构造函数,可以在编辑时触发
Event Construct 在构造后绑定事件使用,构造包含内部的节点
Event Tick 相当于帧回调事件

首先修改一下按钮的命名,我们将其修改为AttributeMenuButton
在这里插入图片描述
将其设置为一个变量
在这里插入图片描述
我们可以在事件图标中通过变量获取到widget内部的button节点
在这里插入图片描述
在button上面我们可以绑定多个button的回调,有On Clicked点击事件,On Hovered悬停事件,On Pressed按下时就触发的事件,On Released 鼠标抬起时, On Unhovered 鼠标未悬停到
在这里插入图片描述
我们使用点击事件触发,当按钮被点击时,就会触发绑定的事件
在这里插入图片描述
我们将事件绑定和逻辑分开,所以再单独创建一个自定义事件
在这里插入图片描述
然后在触发事件回调时,让其调用自定义事件
在这里插入图片描述
在点击事件中,我们首先将按钮设置关闭状态,它将显示无法启用的ui,然后我们再打印一个问题,看看会不会多次被调用
在这里插入图片描述
测试证明,设置关闭状态后,点击事件无法再次触发
在这里插入图片描述
接着在事件后面接着创建一个属性面板,添加到视口
在这里插入图片描述
运行会发现属性面板铺满的全屏
在这里插入图片描述
我们打开WBP_AttributeMenu,在使用覆层包裹住尺寸框节点,填充修改为填充屏幕,会显示出当前所在的位置
在这里插入图片描述
修改一下SizeBox_Root的填充
在这里插入图片描述
然后编译打开,就显示正常了
在这里插入图片描述
或者,我们使用Set Position in Viewport也可以实现
在这里插入图片描述

添加关闭属性面板功能

打开WBP_AttributeMenu,给关闭按钮修改一个名称,设置为变量
在这里插入图片描述
绑定点击事件,这里直接将ui从父节点移除
在这里插入图片描述
我们实现了关闭属性框,但是还有一个问题,就是无法开启视口的按钮再次打开属性框。接下来我们要实现这个功能。
这个功能我们可以在WBP_AttributeMenu里面获取到开启按钮,然后设置,但是这种耦合度太高,不利于后续的维护,所以我们使用事件分发器进行设置。
我们在WBP_AttribueMenu里面添加一个事件分发器,它相当于蓝图版本的事件委托。
在这里插入图片描述
在属性框被销毁时调用一下委托,我们在别的Widget里面就可以监听此节点。
在这里插入图片描述
回到WBP_Overlay,在创建WBP_AttribueMenu后面监听事件分发器,在事件回调里面将按钮激活
在这里插入图片描述
至此,完成了属性面板的开关。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Google ScreenAI代表了一款先进的视觉语言模型,专为用户界面(UI)和视觉情境下的语言理解而设计

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Vue 实现带拖动功能的时间轴

1.效果图 2. 当使用timeline-slider-vue组件时,你可以设置以下属性: date:用于设置时间轴滑块的初始日期,格式通常为 YYYY-MM-DD。 mask:一个布尔值,用于控制是否显示背景遮罩。 markDate:一…

月之暗面Kimi代码分析能力评测

最近打算重构一下PawSQL优化引擎中的OR条件的SELECT重写优化策略的代码,时间有点久,代码有点复杂,看到网上对新出了KIMI评价很高。于是尝试用它来理解一下代码。上传了此优化重写的代码,提问: 第一问,设计…

HTTPS:原理、使用方法及安全威胁

文章目录 一、HTTPS技术原理1.1 主要技术原理1.2 HTTPS的工作过程1.2.1 握手阶段1.2.2 数据传输阶段 1.3 HTTPS的安全性 二、HTTPS使用方法三、HTTPS安全威胁四、总结 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer)&am…

UDS诊断 CANoe使用(线下实操项目)

本周末2天的时间,可以线下带大家对车载项目: uds诊断进行实操训练和CANoe工具的灵活使用 本博主从事新能源汽车的研发部,主要是嵌入式方面的,对车载测试的底层逻辑非常熟悉。 需要项目或者CANoe工具实操的可以关注并私信我

知攻善防应急靶场-Linux(2)

前言: 堕落了三个月,现在因为被找实习而困扰,着实自己能力不足,从今天开始 每天沉淀一点点 ,准备秋招 加油 注意: 本文章参考qax的网络安全应急响应和知攻善防实验室靶场,记录自己的学习过程&am…

mac 解决随机出现的蓝色框

macbookair为什么打字的时候按空格键会出现蓝色框? - 知乎

09、ArrayList

ArrayList 文章目录 ArrayList集合与数组ArrayList集合进阶集合体系结构Collection集合List集合(接口)数据结构ArrayList集合LinkedList集合 Set集合HashSet 双列集合创建不可变集合 集合与数组 自动扩容 无法存储基本数据类型,只能将其变为…

CVPR 2024中有哪些值得关注的视频生成和视频编辑方向的论文?

Diffusion Models视频生成-博客汇总 前言:轰轰烈烈的CVPR 2024所有accept paper已经全部公开,随着Sora的爆火,视频生成和视频编辑是目前计算机视觉最火热的方向,受到了很多人的关注。这篇博客就整理盘点一下有哪些值得关注的视频生成和视频编辑方向的论文?值得做这个方向的…

网易web安全工程师进阶版课程

课程介绍 《Web安全工程师(进阶)》是由“ i春秋学院联合网易安全部”出品,资深讲师团队通过精炼的教学内容、丰富的实际场景及综合项目实战,帮助学员纵向提升技能,横向拓宽视野,牢靠掌握Web安全工程师核心…

HMI界面之:医疗设备界面

一、什么是医疗HMI界面 医疗HMI界面是指医疗设备或系统中的人机界面(Human-Machine Interface),用于与医疗设备进行交互和操作的界面。它是医疗设备中的重要组成部分,通过图形化、直观化的界面,使医护人员能够方便地控…

Vue 3中实现基于角色的权限认证实现思路

一、基于角色的权限认证主要步骤 在Vue 3中实现基于角色的权限认证通常涉及以下几个主要步骤: 定义角色和权限:首先需要在后端服务定义不同的角色和它们对应的权限。权限可以是对特定资源的访问权限,比如读取、写入、修改等。用户认证&#…

【Linux】写个日志和再谈线程池

欢迎来到Cefler的博客😁 🕌博客主页:折纸花满衣 🏠个人专栏:信号量和线程池 目录 👉🏻日志代码Log.cppMain.cc 👉🏻线程池代码LockGuard.hpp(自定义互斥锁,进…

vulhub中Apache Shiro 1.2.4反序列化漏洞复现(CVE-2016-4437)

Apache Shiro是一款开源安全框架,提供身份验证、授权、密码学和会话管理。Shiro框架直观、易用,同时也能提供健壮的安全性。 Apache Shiro 1.2.4及以前版本中,加密的用户信息序列化后存储在名为remember-me的Cookie中。攻击者可以使用Shiro的…

第九篇【传奇开心果系列】Python自动化办公库技术点案例示例:深度解读Python处理PDF文件

传奇开心果博文系列 系列博文目录Python自动化办公库技术点案例示例系列 博文目录前言一、重要作用介绍二、Python库处理PDF文件基础操作和高级操作介绍(一)基础操作介绍(二)高级操作介绍 三、Python库处理PDF文件基础操作示例代码…

动态规划Dynamic Programming

上篇文章我们简单入门了动态规划(一般都是简单的上楼梯,分析数据等问题)点我跳转,今天给大家带来的是路径问题,相对于上一篇在一维中摸爬滚打,这次就要上升到二维解决问题,但都用的是动态规划思…

JAVA 学习记录(1)

1.函数 (1)String.join(";", messages); ";" 表示分隔符,输出的结果: message; (2) Double.parseDouble(valueString); 它返回由字符串参数表示的双精度值。 (3) Double.valueOf((Float) value; float 类型的数值转化为double类…

Go——map操作及原理

一.map介绍和使用 map是一种无序的基于key-value的数据结构,Go语言的map是引用类型,必须初始化才可以使用。 1. 定义 Go语言中,map类型语法如下: map[KeyType]ValueType KeyType表示键类型ValueType表示值类型 map类型的变量默认…

Axure案例分享—折叠面板(附下载地址)

今天和大家分享的Axure案例是折叠面板 折叠面板是移动端APP中常见的组件之一,有时候也称之为手风琴。咱们先看下Axure画出的折叠面板原型效果,然后再对该组件进行详细讲解。 一、功能介绍 折叠或展开多个面板内容,默认为展开一项内容&…

IntelliJ IDE 插件开发 | (七)PSI 入门及实战(实现 MyBatis 插件的跳转功能)

系列文章 IntelliJ IDE 插件开发 |(一)快速入门IntelliJ IDE 插件开发 |(二)UI 界面与数据持久化IntelliJ IDE 插件开发 |(三)消息通知与事件监听IntelliJ IDE 插件开发 |(四)来查收…