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

news2025/4/3 3:31:41

文章目录

    • 几个概念
    • 创建一个UI蓝图
    • 添加UI
    • 获取UI的引用 切换设计器和UI蓝图
    • 将UI添加到游戏场景
    • 锚点
    • 轴点
    • slot
    • SizeToContent
    • 三种UI数据更新方式(Text、Image)
      • 函数绑定
      • 属性绑定
      • 事件绑定
    • 九宫格分割图片
    • 按钮
      • 设置图片
      • 绑定按下事件
    • 下拉框
      • 创建
      • 添加数据
      • 修改样式
      • 常用函数
    • 滚动框
      • 创建
      • 添加数据
      • 修改样式
        • 样式
        • 条样式
        • 滚动

几个概念

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数据更新方式(Text、Image)

函数绑定

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

属性绑定

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

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

事件绑定

参考这个

九宫格分割图片

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

按钮

设置图片

需要为普通,悬停,按压分别设置样式,可以用同一张图片改颜色,但是也要改3遍
在这里插入图片描述

绑定按下事件

设计界面,选中按钮,右侧细节面板,最下边
事件面板,选中按钮的引用,左侧细节面板,最下边
在这里插入图片描述

下拉框

创建

在输入栏下
在这里插入图片描述

添加数据

在这里插入图片描述

修改样式

列表项的高度
在这里插入图片描述
颜色和图片填充
在这里插入图片描述

常用函数

拖一个引用出来,输入中文只能输入"组合框",英文只能输入"combo box"
列出来的就是所有的引用
在这里插入图片描述
常用返回text的内容,或者索引
在这里插入图片描述
在这里插入图片描述

滚动框

类似Untiy的Scroll view

创建

在这里插入图片描述

添加数据

手动添加,直接添加其他UI模板即可(就是我们自己做的UI蓝图,在UI的"用户创建"栏目里)
在这里插入图片描述

可以通过add Child节点来添加其他控件进来
在这里插入图片描述

修改样式

样式

在这里插入图片描述
条厚度:没用
顶部阴影笔刷:这种阴影兄啊过,可以通过图像大小为0来隐藏,注意他的缩放方式非常特殊,还没有找到规律
在这里插入图片描述

条样式

在这里插入图片描述
水平背景图:水平滚动时滚动条的底部的图
垂直顶部插槽图像:垂直滚动时,滚动条上半部分的背景图,这个功能和垂直背景图是有一部分冲突的
正常的缩略图:滚动条的图片
厚度:没用,不是滚动条的宽度

滚动

在这里插入图片描述
朝向:水平滚还是竖直滚
滚动条厚度:滚动条的宽度,根据滚动方向不同,需要分别设置X或Y

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

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

相关文章

Navicat导出mysql数据库表结构说明到excel、word,单表导出方式记录

目前只找到一张一张表导出的方式 使用information_schema传入表名查询 字段名根据需要自行删减,一般保留序号、字段名、类型、说明就行 SELECT COLUMNS.ORDINAL_POSITION AS 序号, COLUMNS.COLUMN_NAME AS 字段名, COLUMNS.COLUMN_TYPE AS 类型(长度), COLUMNS.N…

Linux驱动开发 中断处理

目录 序言 1.中断的概念 2.如何使用中断 中断处理流程 中断上下文限制 屏蔽中断/使能 关键区别与选择 上半部中断 下半部中断 软中断(SoftIRQ) 小任务(Tasklet) 工作队列(Workqueue) 线程 IRQ(Threaded IRQ…

Centos主机检查脚本

使用方法: 将脚本保存为 CentOS_syscheck.sh 添加执行权限: chmod x CentOS_syscheck.sh 执行脚本: ./CentOS_syscheck.sh #!/bin/bash# 设置颜色变量 RED\033[0;31m GREEN\033[0;32m YELLOW\033[0;33m BLUE\033[0;34m NC\033[0m # 重置…

python系统之综合案例:用python打造智能诗词生成助手

不为失败找理由,只为成功找方法。所有的不甘,因为还心存梦想,所以在你放弃之前,好好拼一把,只怕心老,不怕路长。 python系列之综合案例 前言一、项目描述二、项目需求三、 项目实现1、开发准备2、代码实现 …

23种设计模式-结构型模式-桥接器

文章目录 简介问题解决方案示例总结 简介 桥接器是一种结构型设计模式,可将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构,从而能在开发时分别使用。 问题 假如你有一个几何形状Shape类,它有两个子类:圆形C…

K8S学习之基础五十八:部署nexus服务

部署nexus服务 Nexus服务器是一个代码包管理的服务器,可以理解 Nexus 服务器是一个巨大的 Library 仓库。Nexus 可以支持管理的工具包括 Maven , npm 等,对于 JAVA 开发来说,只要用到 Maven 管理就可以了。Nexus服务器作用&#x…

Docker Desktop 界面功能介绍

Docker Desktop 界面功能介绍 左侧导航栏 Containers(容器): 用于管理容器,包括查看运行中或已停止的容器,检查容器状态、日志,执行容器内命令,启动、停止、删除容器等操作。Images(镜像): 管理本地 Docker 镜像,可查看镜像列表、从 Docker Hub 拉取新镜像、删除镜…

C++ set map

1.set和map是什么 set和map是 C STL 提供的容器,用于高效的查找数据,底层采用红黑树实现,其中set是Key模型,map是Key-Value模型 set和map的基本使用较为简单,这里不再叙述,直接进入实现环节 2.set和map的…

Spring AI Alibaba 对话记忆使用

一、对话记忆 (ChatMemory)简介 1、对话记忆介绍 ”大模型的对话记忆”这一概念,根植于人工智能与自然语言处理领域,特别是针对具有深度学习能力的大型语言模型而言,它指的是模型在与用户进行交互式对话过程中,能够追踪、理解并利…

Ubuntu24.04 离线安装 MySQL8.0.41

一、环境准备 1.1 官方下载MySQL8.0.41 完整包 1.2 上传包 & 解压 上传包名称是:mysql-server_8.0.41-1ubuntu24.04_amd64.deb-bundle.tar # 切换到上传目录 cd /home/MySQL8 # 解压: tar -xvf mysql-server_8.0.41-1ubuntu24.04_amd64.deb-bundl…

SOME/IP-SD -- 协议英文原文讲解10

前言 SOME/IP协议越来越多的用于汽车电子行业中,关于协议详细完全的中文资料却没有,所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块: 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 5.1.5 Non…

Ubuntu上给AndroidStudio创建桌面图标

最近使用了Ubuntu开发了,默认的android studio没有桌面图标,还是很不方便,每次都要cd到bin目录启动studio.sh。 步骤1:cd /usr/share/applications linux系统里面,所有的应用启动入口都在 /usr/share/applications …

简单视图函数

视图函数 文章目录 视图函数[toc]一、什么是视图函数二、简单视图函数三、返回错误视图 一、什么是视图函数 所谓视图函数(简称视图),本质上就是一个Python函数,用于接收Web请求并且返回Web响应。Web响应可以包含很多类型&#x…

蓝桥杯备考----》完全背包模板

其实这个完全背包的步骤和01背包也是差不多滴,不过他有一些优化是我们必须要说一说的 老样子,我们先定义一下状态表示 step1: f[i][j]表示从1到i个物品里选出体积不超过j的最大价值 step2:状态转移方程 写成一行就是 我们再写一下f[i][j-v[i]]的表达…

小白入门机器学习概述

文章目录 一、引言二、机器学习的基础概念1. 机器学习的定义2. 机器学习的类型(1)监督学习(Supervised Learning)(2)无监督学习(Unsupervised Learning)(3)半…

微软 GraphRAG 项目学习总结

微软2024年4月份发布了一篇《From Local to Global: A GraphRAG Approach to Query-Focused Summarization》(GraphRAG:从局部到全局的查询式摘要方法)论文,提出了一种名为GraphRAG的检索增强生成(RAG)方法…

C# dataGridView 自动生成几行几列及手动输入整型字符

C# dataGridView生成12号4列的表格 private void Form1_Load(object sender, EventArgs e) {// 清除默认列dataGridView1.Columns.Clear();// 添加4列(首列为序号列)dataGridView1.Columns.Add("ColIndex", "序号");dataGridView1.…

Day17 -实例:利用不同语言不同框架的特征 进行识别

前置:我们所需的web站点,都可以利用fofa去搜索,例如:app"flask"这样的语句去找对应的站点,找到后,我们模拟不知道是什么框架,再根据特征去判断它的框架。 ***利用工具可以再去结合大…

Pycharm(八):字符串切片

一、字符串分片介绍 对操作的对象截取其中一部分的操作,比如想要获取字符串“888666qq.com前面的qq号的时候就可以用切片。 字符串、列表、元组都支持切片操作。 语法:字符串变量名 [起始:结束:步长] 口诀:切片其实很简单,只顾头来…

Mysql从入门到精通day5————子查询精讲

本文主要讲述子查询的几种方法,读者注意体会它们的不同场合的适用情况及功能,本篇文章也融入了小编实践过程遇到的坑,希望读者不要再踩坑 一.带IN关键字的子查询 in关键字可以检测结果集中是否存在某个特定的值,检测成功则执行外…