当前位置: 首页 > news >正文

UE4学习笔记 FPS游戏制作26 UE中的UI

文章目录

    • 几个概念
    • 创建一个UI蓝图
    • 添加UI
    • 获取UI的引用 切换设计器和UI蓝图
    • 将UI添加到游戏场景
    • 锚点
    • 轴点
    • slot
    • SizeToContent
    • 三种UI数据更新方式
      • 函数绑定
      • 属性绑定
      • 事件绑定
    • 九宫格分割图片

几个概念

UMG:UE的UI编辑器
slate UI: UE的UI的编辑语言

创建一个UI蓝图

右键用户界面/控件蓝图,选择UserWidget父类
在这里插入图片描述
在这里插入图片描述

添加UI

添加UI前先添加一个画布,拖进场景里或者拖进层级里均可

在这里插入图片描述

在这里插入图片描述
然后需要什么UI直接往场景里拖就可以,也可以拖到别的UI上成为子级UI
例如先拖一个按钮,再拖一个text到按钮上,这样text自动成为按钮的子物体
在这里插入图片描述

获取UI的引用 切换设计器和UI蓝图

选中一个UI,勾选右上角是变量
在这里插入图片描述
点击右上角切换到事件图表
在这里插入图片描述
在变量里就可以看到UI
在这里插入图片描述
注意变量的名字是这里的名字,而不是层级面板里的名字
在这里插入图片描述

将UI添加到游戏场景

在GameModel里,创建UI并添加到游戏
在这里插入图片描述

锚点

和Unity的锚点是一样的,锚点是可以直接拖得
在这里插入图片描述

在这里插入图片描述

轴点

和untiy的0.5,0.5不同,UE的轴点默认对齐是0,0,位置是UI的左上角
这是轴点为0,0,位置也为0,0的情况,可以看到UI的左上角和锚点对齐
在这里插入图片描述
我们把轴点改为0.5,0.5,位置仍然是0,0,现在可以看到UI的中心和锚点对齐
在这里插入图片描述

slot

我们创建的按钮的对齐方式里有一个插槽属性,后边显示为画布面板槽,这是因为它的父物体是画布,父物体不同,他们的插槽的可选内容是不同的
在这里插入图片描述
这是按钮下的一个text,它的slot是按钮槽,而不是画布槽
在这里插入图片描述

SizeToContent

勾选后尺寸属性失去作用,完全由填充图片或者子级文本长度来控制大小
在这里插入图片描述

三种UI数据更新方式

函数绑定

对于UI中可变更的部分,例如数值,文本,点击后边的绑定按钮,会自动在事件蓝图中创建一个函数,函数的返回值会自动更行到UI上,函数将每帧调用
在这里插入图片描述
例如这里调用了一个GethealthPercent的函数,来获取血量的百分比
在这里插入图片描述
函数内部实现,Player是自己创建的变量
在这里插入图片描述

属性绑定

属性绑定和函数绑定类似,也是每帧调用,区别在于函数绑定是让UI同步函数的返回值,属性绑定是让UI同步属性字段的值
要求属性的数据类型必须和UI所需要的值相同

点开绑定,选择一个属性
以血量为例,虽然player中有当前血量,但是health的类型是float,不是string,所以不能直接用,我们需要在UI蓝图里新建要给HealthText的属性,类型为text或string,然后在UI蓝图的tcik事件里每帧转换数据类型给HealthText,最后再给UI绑定属性
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件绑定

参考这个

九宫格分割图片

参考unity的Slice模式的图片,用于保持背景图片边框在拉伸时不会变化
选择图片,将他的绘制为由图像改为盒体,并设置边缘
在这里插入图片描述

相关文章:

  • Rust 面向对象
  • AI笔记工具如何改变传统笔记方式:从手写到无纸化的转变
  • 模型压缩与迁移:基于蒸馏技术的实战教程
  • 本地化智能运维助手:基于 LangChain 数据增强 和 DeepSeek-R1 的K8s运维文档检索与问答系统 Demo
  • 【C++游戏引擎开发】《线性代数》(2):矩阵加减法与SIMD集成
  • JAVA学习笔记——第十二章 异常
  • 【Mysql】深入剖析 MySQL 死锁问题及应对策略
  • 项目-苍穹外卖(十四) Spring Task+订单状态定时处理
  • Langchain4j实现本地RAG和联网查询
  • 网络中常用协议
  • 【机器学习】基础知识
  • Ubuntu Linux安装PyQt5并配置Qt Designer
  • 面试记录3
  • IoT平台实时监测机器人状态的实现方案
  • Ubuntu24.04 离线安装 MySQL8.0.41
  • 零基础如何学习自动化测试
  • RAGFlow部署时遇到的mysql unhealthy问题解决方案汇总
  • 108.在 Vue 3 中使用 OpenLayers 加载 XYZ 地图的示例
  • [微信小程序]对接sse接口
  • 安装 pgsql 将gis数据入库
  • 西安做网站多钱/免费舆情网站下载大全最新版
  • 怎么做淘宝网站/阿里指数数据分析平台官网
  • 网站的设计技术策划/百度打广告多少钱
  • 在百度网站备案查询上显示未备案是什么意思/谷歌海外广告投放
  • e4a做网站软件/上海seo顾问推推蛙
  • 企业做微网站/百度指数在线查询小程序