参考博客:吾爱豆
一、通过UMG来展示角色
在UE4中使用UMG来展示角色的原理主要通过UE4提供的一个SceneCapture2D
相机来捕捉场景中的画面,搭配Render Target
将捕捉到的画面显示到贴图上,然后将贴图制作成材质,将材质运用到UMG中就可以了,当然也不一定非得要将贴图制作成材质再给UMG使用,贴图也是可以直接给UMG使用的,只是我们后面还需要在材质里对贴图做一些处理,所以这里就直接把贴图做成材质了。
首先像场景中添加一个SceneCapture2D,并把它位置设置到角色前,设置到自己想要的效果就行了。
然后再创建一个Render Target,在SceneCapture2D的Details/Scene Capture/Texture Target下把目标贴图设置成我们新建的Render Target,这样Render Target就可以接收到SceneCapture2D捕捉到的画面了。
然后创建一个Material,双击打开材质界面,把材质的Matrial Domain设置成User Interface,把Blend Mode设置成Translucent,Translucent是后面过滤背景用的,现在先设置好。
把RenderTarget直接拖进材质界面,会自动生成一个Texture Sample节点,然后把节点连接到材质。
然后我们需要创建一个UMG来展示角色,创建一个UserWidget,添加一个Image用于展示角色。把Image的Brush/Image设置成我们创建的材质,于是人物就出来了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJL93jYF-1628171702446)(https://raw.githubusercontent.com/Goulandis/ImgLib/main/img/20210805215115.png)]
运行出来的效果就是这样的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U71qvyNZ-1628171702446)(https://raw.githubusercontent.com/Goulandis/ImgLib/main/img/20210805215119.gif)]
这里我给人物加了一点动画。
二、过滤不需要的背景
从上面的运行结果可以看到,效果还是不错的,只是我想要角色,而不想要地板和天空球,怎么办呢?
SceneCapture2D提供了一种渲染模式Use ShowOnly List,意思是只渲染我们添加到列表里的Actor,我们把SceneCapture2D的Scene Capture/Primitive Render Mode换成Use ShowOnly List模式,然后再Show Only Actors下添加我们要显示的角色,这里Capture Source要设置成SceneColor(HDR) in RGB,Inv Opacity in A,in A表示颜色模式是带透明度的,这个设置是过滤背景的关键,没有透明度信息的话,就没办法过滤背景了。
到这一步我们运行场景的话,效果就是这样的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LayH0Aie-1628171702447)(https://raw.githubusercontent.com/Goulandis/ImgLib/main/img/20210805215127.png)]
可以看到Image上已经没有显示Palne和天空了,但是不渲染的部分都是黑色的,怎么办呢?这就需要用的材质了,打开我们之前创建的Material,添加一个OneMinus节点,设置到透明度上。
然后我们再运行,效果是这样的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2WBBAZfS-1628171702448)(https://raw.githubusercontent.com/Goulandis/ImgLib/main/img/20210805215135.png)]
可以看到Image中出人物的部分已经完全变透明了。
三、设置网页图层
既然小已经达成了,我们就可以把人物嵌入到网页里了。
这里我们需要自定义一个WebBrowser控件,具体的操作可以看我的另一篇博文。
做好之后,就可以直接Palette里搜索到我们自定的WebBrowser了,拖两个到UMG中,然后在蓝图中分别给两个WebBrowser加载两个网页。
现在运行,网页会把我们的角色给遮挡住,我们要的效果是角色夹在两个网页之间,这就需要我们自己手动调整三个图层的前后位置了。
只需要把显示角色Image的Slot/ZOrder的值设置在两个WebBrowser之间就可以了,这个值默认为0,值越大表示图层越高,高图层会覆盖低图层。
然后我们看一下效果。
图层会覆盖低图层。
然后我们看一下效果。
[外链图片转存中…(img-axAVXAVw-1628171702450)]
然后具体角色想要在网页上达到什么效果就自己灵活调整了。如果觉得角色太暗,可以在场景中为角色打个灯光。