当前位置: 首页 > 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模式的图片,用于保持背景图片边框在拉伸时不会变化
选择图片,将他的绘制为由图像改为盒体,并设置边缘
在这里插入图片描述


http://www.mrgr.cn/news/96226.html

相关文章:

  • ​​解锁 JavaScript DOM:节点操作的核心方法与最佳实践
  • LibVLC —— 《基于Qt的LibVLC专业开发技术》视频教程
  • NodeJs之http模块
  • 基于Netlify + Localtunnel 实现本地项目“无服务器”部署上线
  • vue复习1~45
  • 【每日算法】Day 10-1:深度优先搜索(DFS)算法精讲——排列组合与路径问题的终极解法(C++实现)
  • vue+webpack5(高级配置)
  • 还刷刷刷刷刷
  • VSCode Java 单元测试没有运行按钮
  • QTcpSocket(客户端实现)多线程连接慢问题
  • 基于MCP协议的多模态模型优化在医疗3D打印精密人工关节制造中的研究
  • office_word中使用宏以及DeepSeek
  • 第十六届蓝桥杯模拟二(串口通信)
  • ubuntu 22.04 一键安装 lxd
  • Linux——线程安全
  • YOLO历代发展 图像增强方式 架构
  • K8S学习之基础五十九:部署gitlab服务
  • 《Python实战进阶》No34:卷积神经网络(CNN)图像分类实战
  • LangChain4j与DashScope深度集成实战:一站式开发指南
  • Vue 中使用 ECharts