代码改变世界

umg控件总结

2022-09-14 22:11  kk20161206  阅读(751)  评论(0编辑  收藏  举报
  1. 背景是模糊的,在Background Blur前面的控件二不会模糊。

可以调整顺序,让按钮也模糊。然后按钮被模糊了,但是按钮还可以被点击的,Background Blur控件并不会阻止点击事件。被模糊的场景地图也是 可以被操作的。

  1. Throbber跟Circular Throbber一样,都是用来提示玩家后台有数据正在加载中。

    二、Throbber是横向显示动态图标。其他方面跟Circular Throbber一样。Circular Throbber详见

    1. Circular Throbber,圆形的、环形的动态图标

一、就是圆形的,转动的很多小圆点。

二、Circular Throbber.Appearance.Number Of Pieces:可以通知显示的小圆点个数。

  img

三、Circular Throbber.Appearance.Period,可以控制小圆点转动的速度

  img

四、Circular Throbber.Appearance.Radius,可以控制小圆点转动的半径大小。如果Circular Throbber的父级容器是Canvas Panel,则先必须勾选Size To Content,才可以调整Radius值。

  img

五、Circular Throbber控件一般在发出网络请求,需要等待一段时间的时候显示出来,告诉玩家游戏正在处于请求阶段,相当于loading。

六、Circular Throbber.Appearnace.Image,可以修改小圆点的图片为自定义的图片

  img

  1. Spacer:留白占位控件

    二、如下图所示,如果想要2个按钮都在容器右对齐:

      img

    三、可以放一个Spacer到最左边,设置成Fill,Spacer控件就是起到占位的作用。

      img img

5.菜单锚点

一、想要弹出某个菜单的时候,Menu Anchor可以做为菜单弹出的位置。

二、Menu Anchor本身不显示任何东西

  img

三、Menu Class:选择要弹出的UI,可以是任意的UserWidget

  img

四、Menu Anchor.Open:显示关联的UI,Menu Anchor.Close:关闭关联的UI

  img

  img

  1. Spin Box,数字输入,可拖动

    一、Spin Box在Input组下

      img

    二、Spin Box的文字样式可以在Spin Box.Display中修改

      img

    三、Spin Box事件

      img

      1、On Value Changed:值改变时触发

      2、On Value Committed:直接输入状态下按回车时触发

      3、On Begin Slider Movement:开始拖动时触发

      4、On End Slider Movement:结束拖动时触发

    1. Expandable Area可展开的区域

      img

      一、Expandable Area控件分成头部和主体部分,头部和主体都是一个Named Slot,可以放置任何控件进去,点击头部会因此主体部分

        img

        1、如果勾选Size To Content,则收起的时候会变成img

          img

        2、如果不勾选,则变成,只是将主体部分隐藏,并不会收缩起来

          img

      二、展开收缩的箭头可以自定义。

        img

       

      1. Slider

        Slider:滑动条

         

        一、Slider.Bar Thickness:滑动条厚度

          img

        二、Slider.Appearance.Step Size:每次滑动的步进值

          img

        三、Slider.Appearance.Value:滑动条的值(从0到1的小数)

        四、Slider.Appearance.Orientation:滑动条横向或纵向

          img

        五、可以改变滑动条各种状态的展示图片

          img

        六、On Value Changed 值变化事件

          img

          Value值从0到1的小数

          img

         

        1. gressBar,进度条

          准备好2张进度条图片

            img

            img

          一、新建名为“testProgress”的UserWidget,添加一个名为“ProgressBar_0”的ProgressBar到默认容器Canvas Panel

            img

          二、进度条进行如图所示设置,其中Draw As一般选中“Image”

            img

          三、更改不同的百分比,可以看到进度图片是逐渐展示,而不是拉伸

            img

            img

          四、可以设置一个填充色,填充色与Fill Image产生颜色叠加效果。

            img

          五、虚幻商城有一个免费的进度条可以使用

            img

           

          1. Named Slot

            用户创建的UI成为其他UI的子控件的时候,默认情况下是不能拥有子控件的,给UI添加一个Named Slot,这个UI就可以拥有子控件

             

            一、创建一个名为testNameSlot的UI,添加3个Named Slot,分别命名为:NamedSlot_Top、NamedSlot_Body、NamedSlot_Bottom。

              img

            二、在别的UI中把“testNameSlot”拖放进来,可以看到3个NamedSlot:NamedSlot_Top、NamedSlot_Body、NamedSlot_Bottom

              img

            三、在创建Named Slot的时候,可以将动画附加到Named Slot上,这样不管使用本控件的其他控件给Named Slot放置什么控件,都会有动画效果。

              1、添加Animation,添加Track——》选择NamedSlot_Top

                img

              2、添加Transform追踪

                img

              3、输入要定位到的时间轴位置。动画曲线保持打开状态

                img

              4、选中Translation.X,在时间轴0.00S位置右键,选中“Add Key Here(添加关键帧)”

                img

              5、在1秒处,添加一个关键帧,Translation.X=0

                img

                选中关键帧,可以直接输入值、时间、动画曲线

                img

              6、点击Play按钮,可以看到NamedSlot_Top从x=300在1秒内移动到x=0位置。

            1. Image

              一、Image.Appearance.Brush.Tiling:平铺方式

                img

                1、No Tile:不平铺,拉伸会变形

                2、Horizontal:横向平铺。纵向拉伸会变形

                  img

                3、Vertical:纵向平铺。横向拉伸会变形

                  img

                4、Both:横向和纵向都平铺。横向和纵向拉伸都不会变形

                  img

              二、Image.Appearance.Brush.Draw As:绘图方式

                img

                1、None:不画图,Image为空。

                  img

                2、Box:九宫格。横向和纵向拉伸都可以保证图片的四个角不变形。将图片分成9个部分。只拉伸中间部分,保持4个角区域不变形。

                  Margin:Left(左边所占比例)、Top(上边所占比例)、Right(右边所占比例)、Bottom(下边所占比例)

                  img img

                3、Border:在九宫格基础上扣掉中间部分。

                  img

              三、Image.Tint和Image.Color and Opacity设置的颜色都会跟图片本身的颜色叠加。如果同时设置Image.Tint和Image.Color and Opacity的颜色,最终效果颜色是3中颜色叠加,保留图片纹理。

                img

              四、Image支持On MOuse button Down事件,相当于点击事件。

                img

               

              1. CheckBox

                一、CheckBox默认情况下是比较小的

                  img

                二、要让CheckBox变大,最简单的方法就是直接设置Transform.Scale,但如此一来CheckBox就变得模糊了。

                  img

                三、CheckBox控件是在Canvas Panel容器中:

                  img

                  设置Size To Content,让CheckBox边框大小变得适合控件实际大小。

                  img

                四、CheckBox在UE4中实际就是使用不同的图片来表示不同的状态,这些状态图片都是可以改变的。

                  CheckBox.Style.Unchecked Image:未勾选状态下的图片和样式

                  CheckBox.Style.Unchecked Hovered Image:未勾选状态下鼠标移上去的图片和样式

                  CheckBox.Style.Unchecked Pressed Image:未勾选状态下按下鼠标的图片和样式

                  CheckBox.Style.Checked Image:勾选状态下的图片和样式

                  CheckBox.Style.Checked Hovered Image:勾选状态下鼠标移上去的图片和样式

                  CheckBox.Style.Checked Pressed Image:勾选状态下按下鼠标的图片和样式

                 img

                五、游戏应用场景:选择一个物品的时候,物品的整个底板的颜色就发生变化了:物品栏的物品使用CheckBox来做。

                六、CheckBox只有一个事件:On Check State Changed

                  img

                  每次CheckBox的状态发生变化的时候,都会触发On Check State Changed事件,可以在该事件中得到CheckBox是否被勾选。

                  img

                 

                1. Button

                  一、按钮有4种状态:Normal(普通状态)、Hovered(鼠标悬停状态)、Pressed(鼠标按下状态)、Disabled(禁用状态),可以分别给每种状态设置样式。

                    img

                  二、按钮有如图所示的5个事件,其中On Clicked和On Released事件是同时触发的。

                    img

                  三、可以将一个图片添加到按钮内,按钮内的图片可以进行缩放、旋转等变形操作

                    img

                    img

                2. Border

                  Border: 边界; 边; 镶边; 包边;

                  img

                  Border也是一个容器,只能包含一个子元素。

                   

                  一、添加一个名为testBorder的UserWidget,添加一个Border到默认成Canvas Panel容器,添加一个TextBlock到Border容器,没有看到TextBlock文字,是因为Border背景是白色、TextBlock的文字颜色也是白色。

                    img

                  二、Border可以设置背景图片,也可以是颜色。

                   img

                  三、背景颜色和背景图片可以同时设置,最终的效果是保留图片纹理+图片颜色背景颜色(“颜色颜色”就是叠加颜色)。

                    如果背景颜色为白色,则保留背景图片原本的颜色。也可以设置Brush Color的透明度,这样背景图片也会变得透明了。

                    UE4中的所有颜色都可以设置透明度。

                    img

                  四、与其它容器不同的是,Border容器可以在Border本身属性中设置子控件的颜色(不局限与文本控件,子控件也可以是图片等所有UI控件)和透明度,最终的效果是保留图片纹理+图片颜色*Border.Content.Color。

                    如果Border.Content.Color为白色,则呈现子控件本来的颜色。

                    如果Border的子控件BlockText设置了字体颜色,最终颜色也会跟Border.Content.Color叠加。

                    img

                  五、Border控件还有一个比较特殊的地方就是可以相应鼠标的各种事件。

                    img

                3. RichTextBlock:富文本

                  一、新建一个名为“TestRichTextBlock_0”的UserWidget,并添加名为RichTextBlock_0的RichTextBlock控件,并设置Text为“你好”,但是RichTextBlock并没有显示刚输入的“你好”,这是因为还没有设置文本样式。

                    img

                  二、新建一个名为“TextStyleDataTable”,Row Structure=Rich Text Style Row

                    img

                    img

                    img

                  三、编辑“TextStyleDataTable”,添加名为“n(表示normal,正常样式)”;“red(红色字体)”。保存TextStyleDataTable

                    img img

                  四、编辑TestRichTextBlock_0.Text=<n>今天</><red>下雨</><n>,不出去了,就家里了!</>

                    最后每一个样式标签是以“</>”结束。

                    img

                  五、还可以进行图文混排,详见:官方博客

                    img

                4. Text Box:文本输入控件。

                   

                  一、新建一个名为testTextBox的UserWidget,添加一个名为“EditableTextBox_0”的TextBox到默认容器Canvas Panel

                  二、选中EditableTextBox_0,添加如图所示2个事件

                    img

                    img

                  三、运行游戏,输入文字“Hello World!”,可以看到没输入一个字符都会触发Text Changed事件

                    img

                  四、输入文字“Hello World!”以后,按回车,会执行Text Committed事件。

                    img

                  五、如果输入中文,事件会被执行2次,这是引擎自身的Bug。

                    img

                  六、输入了中文,然后按回车,其实也会执行2次Text Committed事件,只不过被判定条过滤了一次,所以只打印了一次“Hello”

                    img

                    img

                   

                5. 字体材质](https://www.cnblogs.com/timy/p/10299076.html)

                  一、准备好一个字体文件,直接拖放到内容浏览器

                    img

                  二、创建一个名为testFontMaterial的UserWidget,添加一个TextBlock到默认的CanvasPanel。Font Family:要使用的字体,选择第一步创建好的字体资源

                    img

                  三、新建一个名为M_fontMaterial的材质,Material Domain=User interface(如此才能在UI中使用该材质),添加一个TextureSampeParameter2D节点,并将UVs链接到M_fontMaterial节点。最后记得保存材质。

                    img img

                  四、Font Material=M_fontMaterial,如图所示文字被材质填充了。

                    img

                  五、修改TextBlock文字内容为:武将。可以看到材质被拉伸填充到“武将”这2个文字了。

                    img

                  六、TextBlock文字内容恢复成“武”。按照第三步的方法创建一个名为M_fontMaterial2的UI材质。选中TextureSampeParameter2D节点,选中一张图片M_fontMaterial材质不一样的图片。最后记得保存材质。

                    img img

                  七、回到testFontMaterial编辑界面Outline Settings.Outline Material=M_fontMaterial2,Outline Settings.Outline Color=白色,透明通道值也设置为1。得到如图描边材质效果,看起来就像是美术用Photoshop做的图片一样。

                    img

                  八、将TextBlock文字内容改成“武将”,可以看到描边跟字体材质一样,描边材质的图片也会被拉伸填充。

                    img

                  九、TextBlock文字内容恢复成“武”。Show Offset(投影)和Shadow Color(投影颜色,RGB=1,1,1,也就是白色,A=1透明通道值完全不透明。)如图所示,投影看起来就是直接复制了本体加上偏移。

                   img

                  十、如果Shadow Color投影颜色不为白色,则最终颜色=材质颜色×Shadow Color(相乘也就是叠加),但是保留纹理。如果是白色,则跟本体一样(包括描边,如第九步的图片所示)。

                    img

                  十一、同理,描边材质和字体材质则最终颜色:材质颜色×自定义颜色(相乘也就是叠加),但是保留纹理。如果自定义颜色为白色,则最终呈现的颜色就是材质颜色。

                    img img

  2. Retainer Box

    img

    把子元素的内容渲染到一个Render Target上去,然后放把它放置到到屏幕上去。

     

    Retainer Box的作用:

      1、控制UI更新频率

      2、把渲染后的UI当成Texture,放入材质中,加工后,再显示

     

    img

    一、Phase Count,多少帧更新一次子元素。没到更新时间时,子元素处于完全静止状态,包括子元素的tick事件也不会被调用

    二、Phase,在Phase Count中的第几帧开始更新。例如:Phase=2,Phase Count=60:每60帧更新一次子元素,每次更新周期的第2帧才开始更新。

    1. Invalidation Box

      Invalidation Box:使条目无效的容器。使容器内的条目不再更新,如果确定某一个UI不需要更新的话,就可以把这个UI放到Invalidation Box中。

      img

      一、Invalidation Box是一个性能优化容器

      二、通过外界给Invalidation Box内的子控件赋值,子控件是会更新的。只有子控件自身代码引起的变化会被Invalidation Box禁止更新

        img

       img

      三、Invalidation Box.CanCache:Invalidation Box的子控件是否可被更新,true可更新,false不可更新。

        img

        1、创建一个名为“CountsWidget”的UserWidget,添加名为TextBlock_1的TextBlock,并在TextBlock_1的Tick事件中递增一个数字:

          img

        2、创建一个名为“TestInvalidationBox”的UserWidget

          img

          Invalidation Box.SetCanCache可以设置子控件是否可更新。

          img

       3、运行游戏,Invalidation Box子控件默认是不更新的。

          img

        4、点击“Toggle CanCache”按钮开始更新,再点击一下“Toggle CanCache”按钮,数字停止在31并停止更新

          img

        5、过了一段时间,再点击一下“Toggle CanCache”按钮,数字从31开始继续更新,而不是Invalidation Box的子控件实际在更新,但被Invalidation Box阻止在界面上显示出来

        6、Invalidation Box的子控件完全停止,所有一切互动都静止,包括tick事件也不会被调用。

      1. Dynamic Entry Box

        Dynamic Entry Box:条目创建容器

          img

        一个特殊的容器,能够自动创建条目,在可变数量条目的时候,但是又不值得创建一个ListView或者Tile View。

        注意:

          Dynamic Entry Box没有做性能优化,不适合像ListView和Tile View一样一次可以填充数千条以上的条目。

        一、Dynamic Entry Box与HorizontalBox、Vertical Box的区别是:HorizontalBox、Vertical Box容器的元素不能再运行时添加删除,但Dynamic Entry Box就可以(Uniform Grid Panel也可以)。

        二、Dynamic Entry Box跟List View一样也需要设置一个Entry Widget Class,但是不像List View必须要求实现User Object List Entry接口的UserWidget,任何UserWidget都可以作为Dynamic Entry Box的Entry Widget Class

          img

         Num Designer Preview Entries:预览数量

          img

          Entry Box Type容器类型:

            1、Horizontal(横向排列子控件,跟Horizontal Box一样)

            2、Vertical(垂直排列子控件,跟Vertical Box一样)

            3、Wrap(自动换行子控件)

            4、Overlay(叠加显示子控件,跟Overlay容器一样,所有子控件都叠加在一起)

          img

        三、Dynamic Entry Box提供有7个方法

          img

          1、Create Entry:创建一个条目

          2、Create Entry of Class

          3、Get All Entries

          4、Get Num Entries

          5、Remove Entry:删除一个条目

          6、Reset

          7、Set Entry Spacing

        1. [UE4]字体材质

          一、准备好一个字体文件,直接拖放到内容浏览器

            img

          二、创建一个名为testFontMaterial的UserWidget,添加一个TextBlock到默认的CanvasPanel。Font Family:要使用的字体,选择第一步创建好的字体资源

            img

          三、新建一个名为M_fontMaterial的材质,Material Domain=User interface(如此才能在UI中使用该材质),添加一个TextureSampeParameter2D节点,并将UVs链接到M_fontMaterial节点。最后记得保存材质。

            img img

          四、Font Material=M_fontMaterial,如图所示文字被材质填充了。

            img

          五、修改TextBlock文字内容为:武将。可以看到材质被拉伸填充到“武将”这2个文字了。

            img

          六、TextBlock文字内容恢复成“武”。按照第三步的方法创建一个名为M_fontMaterial2的UI材质。选中TextureSampeParameter2D节点,选中一张图片M_fontMaterial材质不一样的图片。最后记得保存材质。

            img img

          七、回到testFontMaterial编辑界面Outline Settings.Outline Material=M_fontMaterial2,Outline Settings.Outline Color=白色,透明通道值也设置为1。得到如图描边材质效果,看起来就像是美术用Photoshop做的图片一样。

            img

          八、将TextBlock文字内容改成“武将”,可以看到描边跟字体材质一样,描边材质的图片也会被拉伸填充。

            img

          九、TextBlock文字内容恢复成“武”。Show Offset(投影)和Shadow Color(投影颜色,RGB=1,1,1,也就是白色,A=1透明通道值完全不透明。)如图所示,投影看起来就是直接复制了本体加上偏移。

           img

          十、如果Shadow Color投影颜色不为白色,则最终颜色=材质颜色×Shadow Color(相乘也就是叠加),但是保留纹理。如果是白色,则跟本体一样(包括描边,如第九步的图片所示)。

            img

          十一、同理,描边材质和字体材质则最终颜色:材质颜色×自定义颜色(相乘也就是叠加),但是保留纹理。如果自定义颜色为白色,则最终呈现的颜色就是材质颜色。

            img img

        2. Tree View

          类似List View,但Tree View要求提供树形结构的数据。Tree View和Tile View都是继承自List View

           

          一、创建一个名为“TreeEntry”的UserWidget,添加一个TextBlock,设置为红色。

            img

            在类设置img中实现User Object List Entry接口。img

            实现 Event On List Item Object Set事件,每次创建一个树形节点,TreeView组件就会触发该事件:img

          二、创建一个名为“TreeItemData”的蓝图类,继承自Object类。

            1、创建如下图所示的id、Children、TreeLevel三个成员变量。其中id和TreeLevel勾选Instance Editable和Expose on Spawn选项

              img img

            2、创建一个自定义函数Create Children,用来递归生成节点的子节点。

          img

          三、创建一个名为“TestTeeWidget”的UserWidget,用来测试显示TreeView

            1、添加TreeView控件,并选择TreeEntry作为Entry Widget Class。

              img

            2、创建一个自定义函数InitialTreeItemData,并在事件中调用

              img

              img

           3、创建一个函数并绑定到On Get Item children事件。

              img

              img

             img

          四、在关卡蓝图BeginPlay事件中将Test Tree Widget加载进来。

            img

            可以看到TreeView例子成功运行,点击节点可以展开收起子节点:

            

        3. 裁剪 Clipping

          img

          Clipping裁剪,是每个UI都有的属性。一般是在容器UI上设置,对容器内的UI进行裁剪。

          一、Clip to Bounds:裁剪到边界

            img

           img

          二、Clip To Bounds - Without Intersecting(Advanced):如下图的UI层级结构。

              img

            Inner容器的Clipping设置为Clip to Bounds(裁剪到边界),上图是Outer容器没有设置裁剪,如果Outer的的Clipping也设置为Clip to Bounds(裁剪到边界),则Inner容器被Outer容器裁剪了,下图所示:

              img

            这时,如果把Inner容器的Clipping设置为Clip To Bounds - Without Intersecting(Advanced),则表示Inner容器的UI不会被交叉裁剪,可以理解为Inner容器内的UI只被Inner自身裁剪,不会被Inner的父级容器再次裁剪。

              img

            接着,如果又把Outer的Clipping设置为Clip To Bounds - Always(Advanced),则不管Inner内的Clipping如何设置,Inner都会被Outer强制裁剪。

              img

          三、On Demand,这个也是裁剪到边界,跟Clip to Bounds选项的功能是一样的,只是做了性能上优化而已。

            img

           

        4.