UE5——UMG——分析5

已于 2024-03-19 22:31:44 修改
阅读量1.3k 收藏 6
点赞数 3
分类专栏： UE5UMG 文章标签： ue5
于 2024-03-19 22:31:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43945471/article/details/136824184
版权
本文详细介绍了SDF（有向距离场）在材质绘图中的应用，包括基本形状如圆、线段、矩形和五角星，以及高级技术如RayMatching、碰撞测试和体积云。文章还涉及SDF在字体渲染中的优势，如无失真缩放和一步绘制多效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

材质绘图:SDF 有向距离场
1.每一个点的数值=离最近图形的距离值，形状内部为负值，外部为正值
2.可以用于U边框，阴影等效果一次绘制，缩放不会变模糊，更加通用
3.多个SDF容易合并，将简单图形组合成复杂图形
在这里插入图片描述

一些高级应用:
1.Ray Matching
2.碰撞测试
3.距离场阴影
4.程序化建模
5.体积云
在这里插入图片描述

材质绘图:SDF圆

圆圈的距离为0
圆内部的为负值
圆外部的为正值
因此:SDF圆=SDF圆心点-圆半径
在这里插入图片描述
在这里插入图片描述
可以推导出以下结论:
任意图形的距离场减去半径等于带圆角图形的距离场
上图可以看到矩形的距离场，减去圆角半径，就是圆角矩形的SDF

材质绘图:SDF线段

任意一点到线段AB的距
最低0.47元/天 解锁文章
【虚幻引擎UE】UE5 UMG布局和视觉设计（自适应篇）
灵境引路人
10-28 8388
UI自适应是前端基础，本文基于官方文档讲解一些常见必备知识点。
设置UIView的边界为圆角矩形
Jymn_Chen
07-24 2126
画个圆角的矩形没啥难的，有两种方法： 1 。直接修改view的样式，系统提供好的了： view.layer.cornerRadius = 6; view.layer.masksToBounds = YES; 用layer做就可以了，十分简单。这个需要倒库 QuartzCore.framework； 2. 在view 里面画圆角矩形 CGFloat radius = 20.0; CGContextR
UE4圆角矩形切割
h87795694的专栏
05-14 3657
UE5——UMG——分析4
weixin_43945471的博客
03-18 1709
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——分析1
weixin_43945471的博客
03-16 759
SWiget控件基本都继承这个三大类：SPanel，SCompoundWidget，SLeafWidgetSLeafWidget：没有Slot的Widget，自己就是控件树的叶子节点SCompoundWidget：一个Slot的Widget,Slot内可以放置一个子WidgetSPanel：多个Slot的Widget，通过OnArrangeChildren对Widget布局。
UE5——UMG——分析6
weixin_43945471的博客
03-19 995
需要尽量把主界面Ul的drawcal控制在20以内，场景和角色/玩法就会有更多的性能发挥空间，很多3A追求的极简风UI是个不错的选择。解决思路:定制绘制流程，将icon和文字一次绘制，程序化绘制边框和品质背景色等信息，减少drawcal提交。5.通过合图集，材质内部拼接绘制可以显著减小drawcal，降低CPU开销，能解决一部分问题。引擎材质大部分逻辑默认是在PS执行，但UI的顶点很少，实际需要尽可能把逻辑放到VS做。2，合Instance，每个ltem一个Instance。
UE5-UMG学习笔记
ttod的博客
11-22 1715
UE5-UMG学习笔记
UE5 UI系统（UMG）基础学习
2302_80694433的博客
01-26 1449
感悟：在虚幻里蓝图是比较重要的，无论是在虚幻里贴图还是做UI界面，都要熟练掌握蓝图。作为新手小白，我之前因为在虚幻里贴图，了解到一点点蓝图，但还没有完全掌握，所以，为了更好的深入学习，我打算近期一边学UI一边逐渐掌握蓝图。大小到内容：与尺寸x、尺寸y是矛盾的，如果勾选，则想要改变图像大小只能通过改变“图像大小”数据来改变。笔刷-图像：可在UI文件夹下新建image，在此存放图片，选中图片，点击（←即可。想要在画布内添加控件，直接在控制区找到控件，将控件拖到编辑区的控件内即可。另：建成之后勿忘保存！
UE5——UMG——分析3
weixin_43945471的博客
03-18 992
1.UI贴图关掉MIPS，可以省掉3分之一内存，一般ASTC4x4压缩肉眼看不出变化，大色块图可以更激进。比如背包系统，能明确知道行列个数，每个ltem固定大小，可以在背包的容器层直接给出计算结果。4.绘制的element也可以改为自定义绘制的方式，自行缓存顶点索引等数据，避免每帧重新计算。3.在逻辑很明确时，可以override对应函数，直接给出布局结果，避免递归子Widget。虚幻商城和github都有第三方封装过的UMG组件，包括网格，粒子，Niagara等版本。
UE5 UMG UI编辑器工作流
他在试图用代码书写这个世界，字里行间温柔尽显。勿忘初心，努力做有价值的技术文章。
08-26 2641
1.在内容菜单（Content Browser）面板，点击添加（Add）或者右键空白处，依次选择用户界面（User Interface）/ 控件蓝图（Widget Blueprint）。2.在弹出来的窗口中，点击User Widget即可创建一个UI控件，可以自定义命名（规范一点可以命名为WBP_XXX）。
UE5【UMG】 - Simple Menu UI v3 学习笔记
Unity、UE5开发
02-02 1912
UE5，UMG插件学习笔记，了解UI的做法
UE5 实现UMG环状图控件
IgoAheadNow的专栏
04-25 762
与饼状图类似，唯一不同的是中心位置是中空的，需要算出每一度的内圆和外圆的顶点，需要使用2个三角形填充区域才能完成一个梯形的绘制。使用UE5原生方式实现常用图表控件之一——环状图，可用于蓝图调用。
UE5 实现UMG曲线图控件
IgoAheadNow的专栏
04-25 1735
第一步：新建一个Class类，继承自UUserWidget类（依赖模块需要添加SlateCore和UMG）第四步：重载NativeOnMouseMove方法，判断当前鼠标位置，控制是否显示曲线点的值标签。1、圆滑曲线的可以依靠FRichCurve来对关键点进行定位后进行曲线模拟。第三步：重载NativeTick方法，当重载数据后添加曲线绘制的动画实现。第二步：重载NativePaint方法，实现曲线图绘制。2、坐标轴的曲线点与绘图的屏幕坐标点的转换。
UE5 实现UMG柱状图控件
IgoAheadNow的专栏
04-25 936
2、根据X轴的类别个数分别计算出每个类别的宽度及每个柱状允许的宽度并取合适值。使用UE5原生方式实现常用图表控件之一——柱状图，可用于蓝图调用。1、使用使用四个顶点组成2个三角形填充区域进行柱状绘制。3、Y轴坐标与屏幕坐标值的转换。
UE5实现UMG饼图控件
IgoAheadNow的专栏
04-25 904
第一步：新建一个class类，继承自UUserWidget（确保已添加依赖模块SlateCore、UMG）将一个圆分为360份，每一度的区域用三角形进行填充绘制，最终形成一个圆。使用UE5原生方式生成常用图表控件之一——饼图，可用于蓝图调用。第二步：重载NativePaint方法，进行饼图绘制。
UE5基础UMG学习记录
Zaregoto_Tsukai的博客
06-04 9141
UMG全称为Unreal Motion Graphics UI Designer，是UE自带的UI设计系统。 新建控件/Widget 最好在工程中新建Widget文件夹，将所有的空间蓝图都放在此文件夹内，方便管理和查找。 新建控件蓝图的方式是右键——用户界面——控件蓝图。 命名最好为UMG_起头，后面跟不同的内容，比如玩家HUD，就是UMG_PlayerHUD。 控件蓝图编辑器 双击打开控件蓝图，进入编辑器，在屏幕主界面/视口周围，分布着不同的面板。 控制板中有自定义控件和UE提供的预
UE5.4内容示例（4）UI_UMG - 学习笔记
Unity、UE5开发
08-03 1849
内容示例》是学习UE5的基础示例，可以用此熟悉一遍UE5的功能。本示例学习UMG功能
Unreal5从入门到精通之UMG的使用
TxNet
08-17 2092
UMG (Unreal Motion Graphics UI Designer)是Unreal种的可视化 UI 工具。它就类似于Unity中的UGUI,可用于为用户创建游戏内 HUD、菜单和其他与界面相关的图形。UMG 的核心是UI控件。它可用于创建UI界面（按钮、复选框、滑块、进度条等）。这些UI空间可以使用蓝图进行编辑，并具有以下两个选项卡进行编辑：“设计器”选项卡允许您直观地布置界面和基本功能。“图表”选项卡提供所使用的小部件背后的功能。
UE5材质基础
jwdym01的博客
08-01 6023
超详细讲解UE5材质节点基础知识。
UE5 UMG实线切换互斥效果
最新发布
01-14
### UE5 UMG 实现实线切换互斥效果方法 在 Unreal Engine 5 (UE5) 中实现 UI 组件之间的实线切换互斥效果可以通过蓝图逻辑来完成。具体来说，当一个按钮被按下时，其他按钮应失去焦点或改变状态，从而达到互斥的效果。 #### 创建基础UI组件 首先，在UMG编辑器中创建所需的各个按钮和其他UI元素，并确保这些按钮具有不同的名称以便于区分[^1]。 #### 编写交互逻辑 为了使多个按钮之间形成互斥关系，可以采用如下方式： - **定义全局变量**：在一个合适的父级Widget Blueprint内声明布尔类型的数组或者其他数据结构用于跟踪哪些按钮处于激活状态。 - **设置事件响应函数**：为每一个按钮绑定点击事件处理程序。每当某个按钮被触发时，更新上述提到的状态记录，并调用刷新显示的方法重新渲染所有受影响的对象。 - **编写刷新显示的辅助功能**：此部分负责遍历所有的子控件（即那些可能参与互斥机制中的按钮），依据当前存储的状态信息调整它们的表现形式——比如颜色变化、图标替换等。 下面是一个简单的例子展示如何通过Blueprint Visual Scripting实现这一目标: ```blueprint // 假设有一个名为ButtonA, ButtonB 和 ButtonC 的三个按钮实例存在于场景当中. Event Graph: Event Construct -> Set Initial States of Buttons For Each Button Do { OnClicked(ButtonX) -> Update Global State Array -> Call RefreshDisplay() } Function RefreshDisplay(): Iterate Over All Child Widgets As CurrentChild{ If(CurrentChild Is A Button){ Check Against The Global State And Apply Styles Accordingly; } } ``` 以上伪代码片段展示了基本思路，实际应用时需根据项目需求进一步细化和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值