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

于 2024-08-03 20:44:16 发布
阅读量985 收藏 11
点赞数 21
分类专栏： UE5 文章标签： ue5 ui 学习 游戏引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17523181/article/details/140799835
版权

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

朗迹 - 张伟
关注
  • 21
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
UE4 CanvasUI遮罩
05-30
在UE4（Unreal Engine 4）中，CanvasUI是一种用于创建2D用户界面（UI）的方法，适用于游戏、模拟应用和其他2D图形项目。CanvasUI遮罩是这个系统的一个重要组成部分，它允许开发者实现不透明度控制和部分可见性效果，...
ue4-uitween:C ++中的虚幻4 UMG UI补间插件
05-22
UE4 / UMG的UI补间库使用C ++为UMG小部件创建简单的补间。 UBUITween::Create ( SomeWidget, 0 . 2f ).FromTranslation( FVector2D( - 100 , 0 ) ).FromOpacity( 0 . 2f ).ToTranslation( FVector2D( 20 , 10 ) )....
UE5【UMG】 - Simple Menu UI v3 学习笔记
Unity、UE5开发
02-02 1554
UE5，UMG插件学习笔记，了解UI的做法
UE5-UMG学习笔记
ttod的博客
11-22 885
UE5-UMG学习笔记
Unreal 5 实现UI制作
现在学习也不晚
06-25 4632
这一篇讲解一下unreal engine里面的内置ui插件UMG，虚幻示意图形界面设计器（Unreal Motion Graphics UI Designer）(UMG) 是虚幻引擎内置的一套ui制作工具，通过它我们能够实现平面ui，场景hud内容。
UE5 实现UMG曲线图控件
IgoAheadNow的专栏
04-25 619
第一步：新建一个Class类，继承自UUserWidget类（依赖模块需要添加SlateCore和UMG）第四步：重载NativeOnMouseMove方法，判断当前鼠标位置，控制是否显示曲线点的值标签。1、圆滑曲线的可以依靠FRichCurve来对关键点进行定位后进行曲线模拟。第三步：重载NativeTick方法，当重载数据后添加曲线绘制的动画实现。第二步：重载NativePaint方法，实现曲线图绘制。2、坐标轴的曲线点与绘图的屏幕坐标点的转换。
UE5——UMG——分析4
weixin_43945471的博客
03-18 934
lmage:需要绘制的贴图或材质Tint:1.图片叠加颜色 2.Brush的最终颜色=lmage*TintDraW As1.Image 普通贴图/材质，4个顶点2.Border 九宫格边框贴图/材质，32个顶点，可单独控制tiling3.Box 九宫格贴图/材质，常用于绘制窗口面板背景，16个顶点4.RoundedBox圆角9宫格贴图/材质，常用于绘制圆角按钮等Margin（Box/Border专用）0utline Settings（RoundedBox专用）
UE5 UMG滚动框可从前从后添加新UI思路
02-27
UE5 UMG滚动框可从前从后添加新UI思路
UE4_TinyGUI.zip
09-23
UE4使用蓝prints和C++来创建UI元素，如按钮、文本框等，并通过UMG(User Made Graphics)系统进行布局管理。UMG允许开发者以可视化的方式创建和组织UI组件，但其灵活性和扩展性在面对大型项目时可能会显得不足。这就...
UE4 UI简单例子 C++
09-13
本示例"UE4 UI简单例子 C++"展示了如何利用C++编程语言在UE4中创建一个简单的UI交互，特别是点击按钮后更换图片的功能。以下将详细解析这个过程中的关键知识点： 1. **UMG UserWidgets**：UMG UserWidgets是UE4中UI...
UE5数字孪生系列笔记(四)
qq_44924388的博客
04-15 1461
目标点切换、多个地点切换与旋转、控制器切换、场地漫游、退出UI切换视角制作
UE5 UI系统（UMG）基础学习
2302_80694433的博客
01-26 902
感悟：在虚幻里蓝图是比较重要的，无论是在虚幻里贴图还是做UI界面，都要熟练掌握蓝图。作为新手小白，我之前因为在虚幻里贴图，了解到一点点蓝图，但还没有完全掌握，所以，为了更好的深入学习，我打算近期一边学UI一边逐渐掌握蓝图。大小到内容：与尺寸x、尺寸y是矛盾的，如果勾选，则想要改变图像大小只能通过改变“图像大小”数据来改变。笔刷-图像：可在UI文件夹下新建image，在此存放图片，选中图片，点击（←即可。想要在画布内添加控件，直接在控制区找到控件，将控件拖到编辑区的控件内即可。另：建成之后勿忘保存！
UE5实现UMG饼图控件
最新发布
IgoAheadNow的专栏
04-25 431
第一步：新建一个class类，继承自UUserWidget（确保已添加依赖模块SlateCore、UMG）将一个圆分为360份，每一度的区域用三角形进行填充绘制，最终形成一个圆。使用UE5原生方式生成常用图表控件之一——饼图，可用于蓝图调用。第二步：重载NativePaint方法，进行饼图绘制。
UE5——UMG——分析3
weixin_43945471的博客
03-18 525
1.UI贴图关掉MIPS，可以省掉3分之一内存，一般ASTC4x4压缩肉眼看不出变化，大色块图可以更激进。比如背包系统，能明确知道行列个数，每个ltem固定大小，可以在背包的容器层直接给出计算结果。4.绘制的element也可以改为自定义绘制的方式，自行缓存顶点索引等数据，避免每帧重新计算。3.在逻辑很明确时，可以override对应函数，直接给出布局结果，避免递归子Widget。虚幻商城和github都有第三方封装过的UMG组件，包括网格，粒子，Niagara等版本。
UE5——UMG——分析6
weixin_43945471的博客
03-19 603
需要尽量把主界面Ul的drawcal控制在20以内，场景和角色/玩法就会有更多的性能发挥空间，很多3A追求的极简风UI是个不错的选择。解决思路:定制绘制流程，将icon和文字一次绘制，程序化绘制边框和品质背景色等信息，减少drawcal提交。5.通过合图集，材质内部拼接绘制可以显著减小drawcal，降低CPU开销，能解决一部分问题。引擎材质大部分逻辑默认是在PS执行，但UI的顶点很少，实际需要尽可能把逻辑放到VS做。2，合Instance，每个ltem一个Instance。
UE-简单游戏
qq_52825422的博客
09-01 1715
UE-学习记录
UE4.22 编辑器工具——制作一个批量改名的小工具
瓦间草的开发笔记
03-05 3722
前言 最近项目里改名的工作量较大，受不了了，所以发现4.22的新增功能很有意思，决定试试。 一实验还真成功了。 原来不只可以改名，批量的工作，看来都可以用【编辑器工具】了。 使用版本 UE4.22 需求 实现UE4当中，将选择的 Actor 批量改名成 自己的StaticMeshComponent 的 StaticMesh 的名称。 本文将使用蓝图中如下几个关键功能 核心内容 1. Forloop...
ue4开关门点击时onclicked事件没有触发的解决方案
牧空的博客
07-17 2755
开关门onclicked事件不被触发
虚幻4基础：Actor事件接口
weixin_42111061的博客
07-18 1064
首先创建Actor，Blueprint Class->Actor Actor生命周期 Event tick：每帧都打印一次。delta seconds是前后两帧的时间差 Event Beginplay：打开游戏时执行一次（用作初始化） Event Destroyed：当Actor被销毁后，激活该函数。 举个例子；选中Actor—>关卡（上方的Blueprints）—>Open Level Blueprint—>点击新窗口中的部分—>Create a Reference t
UE4UMG使用序列图
09-01
UE4UMG使用序列图是指在UE4中使用UMG（Unreal Motion Graphics）创建用户界面时，可以使用序列图来展示一系列的图像或动画。序列图是一种将多个图像帧或动画帧按照一定的顺序播放的方式来呈现动态效果的方法。它可以用于创建复杂的UI动画效果，比如按钮的点击动画、进度条的加载动画等等。通过使用序列图，开发者可以在界面上展示各种各样的交互效果，提升用户体验。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [UE4 CanvasUI遮罩](https://download.csdn.net/download/u014532636/10447860)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [UE4入门之路（UI篇）：UMG系统介绍](https://blog.csdn.net/weixin_39816362/article/details/111775943)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朗迹 - 张伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值