在UE4里使用LGUI插件(五)——特效

Special Effects

在UE4里使用LGUI插件(五)——特效_第1张图片

未使用过LGUI插件的同学可先看看之前的博客:在UE4里使用LGUI插件(一)

本篇使用UE4.24+LGUI 2.7
熟悉UMG的同学应该都知道UMG中有个控件名叫Background Blur,使用它可以让被此控件遮住的画面产生模糊效果。在LGUI中也有同样的控件叫UIBackgroundBlur。LGUI中的UIBackgroundBlur不仅能支持背景模糊,还可以用贴图来控制模糊的强度和模糊遮罩,使用方法如下:
需要注意的是UIBackgroundBlur只在屏幕空间UI有效
1、新建场景,模板选择VR-Basic
在UE4里使用LGUI插件(五)——特效_第2张图片
2、从菜单中点击按钮LGUI Tools/ Basic Setup/ Screen Space UI 创建个屏幕空间UI的基本框架,并将ScreenSpaceUIRoot的z轴位置移动到100
在UE4里使用LGUI插件(五)——特效_第3张图片
3、点击ScreenSpaceUIRoot后面的箭头,从菜单中点击Create UI Post Process/ UIBackgroundBlur
在UE4里使用LGUI插件(五)——特效_第4张图片
4、选中刚才创建的UIBackgroundBlurActor,在属性界面里找到Blur Strength并改为10
在UE4里使用LGUI插件(五)——特效_第5张图片
点击运行之后可以看到屏幕中心有个方形区域的模糊效果
在UE4里使用LGUI插件(五)——特效_第6张图片
可以看到文字也被模糊了,这是因为深度排序的问题,我们把UIBackgroundBlur的深度改为-1就可以不影响文字了
在UE4里使用LGUI插件(五)——特效_第7张图片
5、选中UIBackgroundBlurActor,点开属性窗口中的Anchors,按住Ctrl键并点击右下角的吸附方式让UIBackgroundBlur占满屏幕
在UE4里使用LGUI插件(五)——特效_第8张图片
点击运行可以看到全屏幕的模糊特效了(下图的Blur Strength值是40)
在UE4里使用LGUI插件(五)——特效_第9张图片
6、有时候我们希望模糊的区域不只是方形,比如我想要五角星形,那我我们可以用个黑白的五角星贴图来控制模糊强度,黑色是不模糊,白色是Blur Strength的模糊强度,灰色过渡。我找了一张这样的图片:

在UE4里使用LGUI插件(五)——特效_第10张图片
导入UE4中,选中UIBackgroundBlurActor,把刚刚导入的图片拖拽到Mask Texture上,加大Blur Strength的值,下图修改了尺寸和深度值便于看到效果
在UE4里使用LGUI插件(五)——特效_第11张图片

你可能感兴趣的:(UE4,LGUI,3D,UI)