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 空格

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

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

相关推荐
red_redemption5 小时前
自由学习记录(175)
学习
ZhiqianXia6 小时前
《The Design of Design》阅读笔记
前端·笔记·microsoft
nashane6 小时前
HarmonyOS 6学习:画中画(PiP)状态同步与场景化实战指南
学习·pip·harmonyos·harmonyos 5
祁白_6 小时前
nmap工具笔记整理
笔记·web安全·测试
_李小白6 小时前
【android opencv学习笔记】Day 8: remap(像素位置重映射)
android·opencv·学习
勤劳的进取家6 小时前
数据链路层基础
网络·学习·算法
南境十里·墨染春水6 小时前
C++笔记 STL——set
开发语言·c++·笔记
d111111111d6 小时前
直流电机位置式 PID 控制 和 舵机的区别
笔记·stm32·单片机·嵌入式硬件·学习
LZYmarks7 小时前
小白买车笔记
笔记
码途漫谈7 小时前
Easy-Vibe开发篇阅读笔记(二)——前端开发之Figma与MasterGo入门
人工智能·笔记·ai·开源·ai编程·figma