UE5.4内容示例（4）UI_UMG - 学习笔记

news2024/9/25 3:21:53

https://www.unrealengine.com/marketplace/zh-CN/product/content-examples
《内容示例》是学习UE5的基础示例，可以用此熟悉一遍UE5的功能

UI示例
  1. UI_UMG ：基本UMG
  2. UI_CommonUI ：UMG多层应用
  3. UI_SlatePostBuffer UI ：FX的示例，UI在全局效果的使用

UI_UMG示例

开始：关于UE5的程序启动（入口）

示例需要了解UE5程序入口，一般先要注意3处地方：

  1. 项目设置->地图和模式
    这里可以配置GameMode与GameInstance；如果配置了，会启动对应的程序；如以下表示没有做任何配置（另外需要注意 项目设置->输入，这里会配置一些操作映射）
    在这里插入图片描述
  2. 世界场景设置
    这里可以配置GameMode，与第1条是重复的配置，这里的配置会覆盖第1条的配置。
    如果看到GameMode有配置，点下放大镜，可以找到并打开此GameMode蓝图
    在这里插入图片描述
    看到GameMode_UMG蓝图中，被更改的类
    在这里插入图片描述

从这2处地方收集到，入口程序需要关注的：GameMode_UMG、BP_PlayerController_UMG、MyCharacter_UMG这3个程序。

  1. 关卡蓝图
    另还有一个地方需要关注：打开关卡蓝图，查看有没有启动的程序代码

开始：关于GameMode、PlayerController、Pawn等关系

  • 在写程序时，很难规划好，什么功能写在pawn里，什么功能写在playerController里
    在这里插入图片描述
  • Pawn是角色，写角色的功能和接口，比如坦克可以开炮和行动，开炮和行动的功能写到Pawn，并提供控制接口。AI或Player是负责操作接口进行控制。
  • PlayerController处理操作Pawn提供的接口，还需要操作UI、关联Input和摄像机运动等，承担了更多的控制工作
  • 但也有很多程序并不这样编写。是把功能直接集成到Pawn里。
  • 那这几个类，哪个类是先执行的？经测试（按print字符的先后）；

发现顺序是：

  1. PlayerController
  2. 规则根据组合情况而不同，包括GameMode、Pawn、Actor，是不确定的运行顺序
  3. Pawn单独运行时，顺序高于PlayerController，但拖入Actor蓝图中，顺序就低于PlayerController
  • Player Start：玩家的起始位置
    可以把Pawn拖入场景，选择下Player 0等配置，等效于Player Start
    在这里插入图片描述

在入口类GameMode、PlayerController、Pawn等中，只有Pawn是可以被投入场景（Outliner大纲）中的

开始：UE5入口的思考

以上UE5提供的入口思维，似乎已经完美解决了问题。
但是，有一个问题在这样的结构下，显得不好操作：
一般我们做项目，需要做一些项目的配置，比如UI的首页是什么，默认有哪些模型先显示或运行、或者读取外部的哪些数据或图片等。
那这些配置的功能要在写在哪里呢？若按照UE5的入口规则，需要在GameMode（或者GameInstance）里进行配置，比较符合UE5的原意。
只是GameMode配置，要么在蓝图中，要么在变量中，这2处都不是很好配置。
熟悉Unity编程的同学，会习惯于在项目窗口里配置（相当于UE5的Outliner大纲里），会制作Manager对象完成配置工作。
个人感觉，同样可以制作Manager对象，结合世界场景设置，用PlayerController启动配置对象，来完成UE5的入口配置问题。

1.1 Sliders

在这里插入图片描述

  • MyCharacter_UMG：
    分为3类功能：控制UI的功能（显示、隐藏等）、控制角色移动的功能（鼠标看、走、跑）、生命值的功能

  • MyCharacter_UMG - UI功能：
    BeginPlayer是定义了一个Exit的UI
    在这里插入图片描述
    ShowElement：Lock Input UI是只使用UI模式；ShowElement把UMG类Create后加到屏幕Viewport中；并把Exit HUD（退出按钮的UI）也加到屏幕中。做了一个HUDActive的状态标记。
    若Lock Input UI为false，则触发UI后，角色还是可以继续走动。
    HideElement：隐藏UI

  • BP_EventDemoTrigger，触发器
    触发器可配置一个要显示的蓝图类、3DWidget还是HUD、是否Lock Input to UI
    在这里插入图片描述
    Event ActorBeginOverlap：当触发它的触碰区域后，默认会触发这个事件
    在这里插入图片描述

关于bool值的用法思考：
bool值有用于配置项的、有用于状态记录的，还有其他适合bool值的参数
如果是配置项的，可以If开头；状态的，可以Is开头；

关于状态的设计思考：
一个对象对外开放控制的接口，状态应该隐藏在接口里面，抽象出若干事件作为接口
参考软件的设计模式 - 状态模式

MyCharacter_UMG抽象出了ShowElement与HideElement 2个接口
另外，把Current Button（触发器）的对象传给UI，是为关闭UI时，同时触发触发器模型的灯的关闭；

  • BP_PlayerController_UMG
    FreeMouse：显示鼠标
    BindMouse：游戏模式

按照PlayerController与Pawn的分工，UI操作可以放在PlayerController里，不需要2个地方都放起来

触发过程：

  1. BP_EventDemoTrigger触发Overlap，找到Pawn（Character），为Pawn赋值触发器对象与UI类，然后运行ShowElement；
  2. ShowElement， 先CreateUI，加入屏幕，设置鼠标与UI操作模式
  • UMG_Sliders
    Begin：通过PlayerController设置下鼠标状态
    在这里插入图片描述
    这里使用了Text的绑定函数的功能，个人不推荐在实际项目中使用
  1. 当使用 Show Only Modified Properties来查看哪些属性被修改了时，而这个绑定是筛选不出来的
  2. 编程东一点西一点，就完全没有线索了
    在这里插入图片描述
    在这里插入图片描述
    可以使用Sliders的OnValueChanged简单实现
    在这里插入图片描述

1.2 Buttons

在这里插入图片描述

  • 通过在Text的Visibility绑定Get Visiblity_0的函数，实现Text的隐藏；实际项目中，不推荐绑定的做法。
    在这里插入图片描述
  • 如何快速地 创建或定位 一个Button的OnClicked事件
    在Designer里，选中某Button；切换到Graph视口，此时Variables会选在Button上；在右边能看到Events列表，点击创建或定位
    在这里插入图片描述

1.3 Input

在这里插入图片描述

  • UI里有3个组件：SpinBox，ComboBox，CheckBox
    在这里插入图片描述
    SpinBox取值
    在这里插入图片描述
    ComboBox判断是否有选择，示例是判断获取的值是否为空，其实可以判断Index值，没有选为-1
    在这里插入图片描述
    ComboBox取值
    在这里插入图片描述
    CheckBox取值
    在这里插入图片描述

1.4 Nested widgets

在这里插入图片描述

  • 嵌套UI，主UIWidget_NestedWidgets，在右侧有一个Scroll Box，是放嵌套的UI
    在这里插入图片描述
  • 这里蓝图写得有点乱，主要2个功能：
  1. 创建Widget_PlayerEntry的UI，嵌套在框中
    在这里插入图片描述
  2. 当Input里的值改变时，改变嵌套的UI里的值
    这里用到PlayerData结构体
    在这里插入图片描述
    在Widget_PlayerEntry中，绑定各文字框的值
    在主UI中，当Input的值改变时，重新组成PlayerData数据，并赋给Created Widget

2.1 Progress Bars

在这里插入图片描述

  • 通过2个按钮，增加或减少Progress Bar Percent的值，并判断下这个值的上下限；并给Progress Bar 赋值
  • 可以打开Hide Unrelated的按钮，清晰看到一条蓝图的主线
    在这里插入图片描述

2.2 Progress Bars

在这里插入图片描述

  • 与上面示例的差别：值是在MyCharacher_UMG里health值
  • 调用了Increase health接口来增加health值
    在这里插入图片描述

Cast To是非常消耗性能的，所以要在Begin的时候，先做一遍Cast to保存起来
另外，绑定的函数里，使用Cast To性能消耗太大

2.3 3D Widgets

在这里插入图片描述

  • 这里采用了BP_EventDemoTrigger_3D，而非BP_EventDemoTrigger
    就是说，BP_EventDemoTrigger里的Show3DWidget这个配置项是假的，Display HUD也是无用的
  • BP_EventDemoTrigger_3D里有一个3dWidget的组件，初始为隐藏，通过Overlap，来控制显示
    在这里插入图片描述
    在这里插入图片描述

讨论下，如果使用原来的触发器，要怎么实现：
把3D Widgets单独做一个蓝图Actor，放到场景中
触发器会触发PlayerController（这里是Pawn）
PlayerController可以根据tag，找到3D Widgets，触发显示3DUI（tag的名字可以和蓝图类名一致）

2.4 Widget Animation

在这里插入图片描述

  • UMG的Animations功能，示例有Bounce和Scale 2个动画（另外一个动画是无用的）

在这里插入图片描述

  • 如何启动动画？
    在这里插入图片描述
    如果Loops这里设置成0，即为循环
  • 如何停止动画？可以使用单独动画停止，或全部动画停止
    在这里插入图片描述
  • 如何全部播放动画？
    可以先建立一个动画数组，然后循环播放
    在这里插入图片描述

3.1 Images

在这里插入图片描述

  • 此示例边上有一个摄像头，拍摄人物的动画，并实时渲染到UI中
    在这里插入图片描述
  • 摄像机的蓝图RenderCapture，里面有Camera和Scene Capture Component 2D 2个组件；
    Scene Capture Component 2D选了RenderTarget图片；用于实时拍摄保存。
    在这里插入图片描述
    在这里插入图片描述
  • 建立一个材质 M_RenderTarget，材质类型是User Interface
    在这里插入图片描述
  • 图片绑定这个材质

一个问题是，这张图片的色彩太暗了，如何配置成和实际场景的色彩差不多呢？

在Scene Capture Component 2D进行一些配置
在这里插入图片描述
对环境光的亮度进行一些调整
在这里插入图片描述
对RenderTarget图片的大小也可以调整
在这里插入图片描述
最后调整下UI里的图片比例，呈现出合适的效果
在这里插入图片描述

3.2 Widget Slots

在这里插入图片描述

  • 在Canvas Panel中，可以通过设置图片的Slot，重新设定位置（这个写法比较特殊，需要Cast To）
    在这里插入图片描述

3.3 Loading Icons

在这里插入图片描述

  • 这里展示了3种进度条：CircularThrobber、Throbber、ProgressBar
  • Throbber可以放一张图片作为加载效果，可以设置多个块（Number Of Pieces）
    在这里插入图片描述

3.4 Alignment Options

在这里插入图片描述

  • 3种布局方式：Horizontal Box、Vertical Box、Uniform Grid Panel
  • 其中Horizontal Box、Vertical Box是自动布局的，随便拖一些组件进去，就会横向或纵向自动局部
    在这里插入图片描述
  • Uniform Grid Panel是需要在子元素里，设置行列2个值，才能定位在正确的位置
    在这里插入图片描述
  • 这样总要去写这个2个值比较麻烦，可以做一个蓝图去自动实现
    在这里插入图片描述

本示例就学习完毕，欢迎同学一起讨论指教，本人微信:canchs

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

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

相关文章

python中的print函数总结

python中的print函数总结

文章目录 打印变量打印数学计算多行文本复制n次字符串 x*n,n*x不换行输出多个数据换行符制表位转义原字符字符串切片格式化字符串千位分隔符（只适用于整数和浮点数）浮点数小数部分的精度字符串类型，.表示最大的显示长度整数类型浮点数类型 打…
阅读更多...
＜Qt＞ 常用控件

＜Qt＞ 常用控件

目录 一、控件概述 二、QWidget 核心属性 （一）QWidget的核心属性概览 1. enabled 2. geometry 3. WindowFrame的影响 4. windowTitle 5. window Icon 6. windowOpacity 7. cursor 8. font 9. toolTip 10. focusPolicy 11. styleSheet 三、…
阅读更多...
docker网络介绍net

docker网络介绍net

docker 几种网络模式 bridge模式 使用–netbridge参数指定网络模式，docker的默认模式就是bridge模式，默认选择bridge的情况下，容器启动的时候会通过DHCP获取一个ip地址，这可能不是我们想要的，在centos系统下&#xff…
阅读更多...
springboot给类进行赋初值的四种方式

springboot给类进行赋初值的四种方式

目录 1. 使用Value和ConfigurationProperties2. 使用PropertySource创建Person.java写一个测试类 3. 使用ImportResourceStudent类创建beans.xml在主类中引入测试 心得 1. 使用Value和ConfigurationProperties 这里不加赘述了，前面我也发过，这里就放个链…
阅读更多...
redis--分布式锁(1)

redis--分布式锁(1)

分布式锁的基本需求 互斥性：在任何时刻，只有一个客户端能持有锁。无死锁：即使一个客户端在持有锁的期间崩溃，其他客户端也能获得锁。容错性：分布式锁的实现应该能够容忍部分组件的失败，例如，锁服…
阅读更多...
Open Interpreter - 开放解释器

Open Interpreter - 开放解释器

文章目录 一、关于演示它是如何工作的？与 ChatGPT 的代码解释器比较 二、快速开始三、更多操作1、互动聊天2、程序化聊天3、开始新的聊天4、保存和恢复聊天5、自定义系统消息6、更改模型7、在本地运行 Open Interpreter终端Python上下文窗口，最大令牌 8、…
阅读更多...
JavaScript异步编程的Promise

JavaScript异步编程的Promise

目录 1.对Promise的了解 （1）介绍 （2）Promise 的优缺点 2.Promise的基本用法 （1）创建Promise对象 （2）Promise方法then() （3）Promise方法catch() &…
阅读更多...
力扣SQL50 删除重复的电子邮箱 自连接删除 连表删除

力扣SQL50 删除重复的电子邮箱 自连接删除 连表删除

Problem: 196. 删除重复的电子邮箱 👨‍🏫 参考题解 Code DELETE p1 FROM Person p1,Person p2 WHEREp1.Email p2.Email AND p1.Id > p2.Id
阅读更多...
前端Web-JavaScript(下)

前端Web-JavaScript(下)

主要是补全一下JavaScript 基本对象: String对象 语法格式 方式1： var 变量名 new String("…") ; //方式一 例如： var str new String("Hello String"); 方式2： var 变量名 … ; //方式二 例如： var …
阅读更多...
CHCSA第二次作业

CHCSA第二次作业

#01、创建以上目录和文件结构，并将/yasuo目录拷贝4份到/目录下 [rootlocalhost ~]# ls /yasuo // 先检查是否有yasuo目录 ls: 无法访问 /yasuo: 没有那个文件或目录 [rootlocalhost ~]# mkdir -p /yasuo/dir1 // 递归创建目录 [rootlocalhost ~]#…
阅读更多...
Pandas的30个高频函数使用介绍

Pandas的30个高频函数使用介绍

Pandas是Python中用于数据分析的一个强大的库，它提供了许多功能丰富的函数。本文介绍其中高频使用的30个函数。 read_csv(): 从CSV文件中读取数据并创建DataFrame对象。 import pandas as pd df pd.read_csv(data.csv) read_excel(): 从Excel文件中读取数据…
阅读更多...
嗖嗖移动业务大厅（JDBC）

嗖嗖移动业务大厅（JDBC）

一、项目介绍 1、项目背景: 该项目旨在模拟真实的移动业务大厅，。用户可以注册新卡、查询账单、管理套餐、充值话费、打印消费记录等功能。同时，项目还模拟了用户使用场景，如通话、上网、发短信等，并根据套餐规则进行相应的扣费…
阅读更多...
AutoCAD ObjectArx二次开发(二) 关于程序入口的介绍

AutoCAD ObjectArx二次开发(二) 关于程序入口的介绍

在上一章节中，我们介绍了环境搭建和程序插件的加载，基本的编程模板（框架）已经准备就绪。接下来，我们将开始编写自己的业务逻辑。ARX开发的核心在于将自定义函数注册到库中，并通过指定的调用命令来实现功能。…
阅读更多...
【论文解读|Data Intelligence】 Large Knowledge Model: Perspectives and Challenges

【论文解读|Data Intelligence】 Large Knowledge Model: Perspectives and Challenges

论文链接：Large Knowledge Model: Perspectives and Challenges (sciengine.com) 来源： Data Intelligence 论文介绍： 文章简述了人类语言和世界知识的紧密关系，对比了语言模型和知识图谱在表示和处理人类知识方面的优缺点&…
阅读更多...
Candance Allegro 入门教程笔记：PCB封装库的组成元素

Candance Allegro 入门教程笔记：PCB封装库的组成元素

文章目录 一、PCB封装库的组成元素二、使用Padstack Edictor制作封装焊盘引脚三、PCB Editor软件创建贴片封装（STM32F103T8U6 QFN36 为例）1.引入库2.读入数据 一、PCB封装库的组成元素 一般来说，针对于Allegro软件，完整的封装是由…
阅读更多...
blender里的辉光

blender里的辉光

cycle的辉光， 点开支持后期效果 eevee的辉光，直接点bloom就行。 eevee的透明
阅读更多...
GORM更新操作（Save、Update、Updates）

GORM更新操作（Save、Update、Updates）

在 Go 语言的 Web 开发中，GORM 是一个广泛使用的 ORM (Object-Relational Mapping) 框架。它提供了一种流畅的方式来处理数据库的交互，其中包括记录的更新操作。GORM中的更新操作主要是update、updates、save这几种 操作前的准备工作：声明模…
阅读更多...
C语言进阶版第五课—函数递归

C语言进阶版第五课—函数递归

文章目录 1. 什么是函数递归2. 函数递归的思想3. 函数递归的限制4. 函数递归练习4.1 n的阶乘4.2 按照顺序打印一个整数的每一位4.3 自定义函数不允许创建变量，求字符串长度 1. 什么是函数递归 函数递归就是函数自己调用自己 图片中的函数test（&#xff0…
阅读更多...
Monaco 使用 TypeDefinitionProvider

Monaco 使用 TypeDefinitionProvider

Monaco 中的 TypeDefinitionProvider 和 ImplementationProvider、DefinitionProvider 类似，右键点击变量名称，现在 “选择转到类型定义”， 跳到指定位置。 通过 registerTypeDefinitionProvider 添加 TypeDefinitionProvider 处理方法 实现…
阅读更多...
力扣SQL50 按日期分组销售产品 group_concact

力扣SQL50 按日期分组销售产品 group_concact

Problem: 1484. 按日期分组销售产品 👨‍🏫 参考题解 select sell_date, count(distinct product) num_sold,group_concat(distinct product order by productseparator ,) products from activities group by sell_date
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023