UE5 UMG学习笔记

视频资料:https://www.bilibili.com/video/BV1aLdBYkEfs?spm_id_from=333.788.videopod.sections\&vd_source=707ec8983cc32e6e065d5496a7f79ee6

笔记1:UMG自适应

  • UMG有锚点的概念,可以根据左上角为锚点,来进行自适应布局
  • 制作大屏的互动多媒体时,也可以左上角为锚点,建立一个可以控制缩放的canvas,来缩放大小,并兼容一定的自适应

笔记2:Canvas

  • 为其他需要调整大小的组件,提供锚点,提供ZOrder等模式
  • 作用是规定了大小,模拟屏幕

笔记3:Overlay

  • 用作组件的叠加
  • 一个overlay里,可以加入很多组件,形成一个组合
  • 用作三维空间里UI

Canvas 可用作布局

Overlay 可用作一个固定的组合

笔记4:Vertical Box 垂直盒子

  • padding可以设置间隙
  • box是平铺布置的,不会叠加,相对位置稳定

笔记5:Grid Panel 栅格

  • 创建里面的组件后,可以点击组件边上的小箭头,移动到其他格子
  • row span是占的格子数
  • layer的作用和order类似,层级
  • Nudge,可以让格子偏移位置

笔记5:Uniform Grid 统一栅格

  • 统一栅格是简单的平分grid的空间
  • 点击size to content,根据内容调整大小
  • 可以规定最小大小

Uniform Grid 可用作列表的制作

Grid Panel 可用作布局

笔记6:Size Box 尺寸盒

  • 可用作图片的尺寸调整,要选择Size To Content
  • 固定尺寸、最小尺寸、最大尺寸
  • Aspect Ratio 是为防止过度拉伸,设置的拉伸比

笔记7:Scale Box 缩放盒

  • 在Border中,给到Text,但是Text内容增加,会超出Border
  • 给一个Scale Box后,字体就会自动缩放到合适尺寸

  • Stretching里,可以设置scale to fit,也可以设置裁剪等

笔记8:Wrap Box 包裹盒

  • 设置3个image在wrap box,随着box的缩小,最后一个image会跑到下面一行

  • 当把最后一个图片,设置成fill empty space时,它会填充后面的空间,用作一些标题栏很好
  • fill span when less then,当小于某值时,会自动对齐
  • force new line,换行

笔记9:Widget Switcher

  • 通过Active widget index来切换下面的哪一层
  • 可以用蓝图制作按钮来切换层
  • 形成层的互斥功能
  • 可以安装Common UI Plugin,里面有带简单动画功能的Switcher

https://blog.csdn.net/qq_17523181/article/details/140925013?spm=1011.2415.3001.5331

笔记10:根

  • Color And Opactiy:可以改变子类所有背景颜色
  • Foreground Color:可以改变最前层的背景颜色(需要点Inherit继承选项)
  • Preview Background:可以放一张预览图片,用于开发的时对照

笔记11:UI的大小和位置控制

  • 几乎所有的UI大小和位置,都是由它的父类控制的
  • 一张canvas下图片,有2种大小控制方式,1是由图片的slot(canvas)来控制大小,2是点sizeToContent,才由image size来控制大小
  • horizontal box下的图片,如果auto,由图片大小控制,如果是fill,由box来控制大小

笔记12:Scroll Box

  • 可以设置横向或纵向
  • 可以设置滚动条的一些样式
  • 可以设置动画滚动,更加丝滑
  • 不可以设置无限循环滚动,可以制作向下无限滚动的功能,把内容设置2份,或多出一些;然后滚动大于一个距离时,直接跳转到0

笔记13:Image

  • 可以设置Draw As,边框图;box类似于9宫格的图片,中间拉伸
  • 可以设置Tilling,来设置平铺

笔记14:Slider 滑块

  • 可以用图片替换滑块,可以设置轴的样式(同样可以用图片)

笔记15:ProgressBar 进度条

  • 设置is marquee,设置marquee,让进度条变成一个流动动画的线条

笔记16:Border 边框

  • 只能一个子类
  • 可以设置边框

笔记17:Named Slot 插槽

  • 插槽可以布局好结构,然后再在结构里放入一个子类
  • 在插槽里,追加内容

笔记18:Transform

  • 在动画使用Transform做比较好用
  • is volatile,和缓存有关,如果是图片是动态的,可以点击

笔记19:Spin Box

  • 一个数字范围控制的盒子

笔记20:Throbber

  • 一个表示动态加载的图形
  • Circular Throbber,加载的动态圈圈

笔记21:Multi TextBox

  • 多行文本

笔记22:Combo Box

  • 有Key和String 2种,一个是string返回,一个是name格式返回

笔记23:MenuAnchor 菜单锚点

  • 可以选择一个umg蓝图,并通过蓝图点击打开或关闭

笔记24:Spacer 空格

  • 用作水平盒子或垂直盒子里

感谢教程作者冰火百科老师的讲解,声音好听,逻辑清晰,也祝福大家学习愉快

相关推荐
jinanwuhuaguo2 小时前
AI应用开发与自动化工具全景解析:Coze、Dify、FastGPT、n8n、MCP、Manus、Claude Code、OpenClaw
人工智能·学习·重构·新人首发·openclaw
左左右右左右摇晃2 小时前
JVM 整理(五) 垃圾回收(GC)
jvm·笔记
EnglishJun2 小时前
ARM嵌入式学习(六) --- ARM基础介绍和相关专业术语讲解
arm开发·学习
平行云2 小时前
数字孪生信创云渲染系列(一):混合信创与全国产化架构
unity·ue5·3dsmax·webgl·gpu算力·实时云渲染·像素流送
我要成为嵌入式大佬2 小时前
正点原子MP157嵌入式学习驱动开发--问题详解(一--Ubuntu根分区扩容速解)
学习
He BianGu2 小时前
【笔记】在WPF中QueryContinueDragEvent的详细介绍
笔记·wpf
He BianGu2 小时前
【笔记】在WPF中QueryCursor事件的功能和应用场景详细介绍
笔记·wpf
booksyhay2 小时前
XCP协议学习笔记
网络·笔记·学习