首页 > 业界新闻 > 详情

UE4快速实现涂鸦功能

UE4快速实现涂鸦功能

 

原文链接:http://gad.qq.com/article/detail/27605

之前有人发给我一个人在ue4里面拿枪在一面墙上乱画的短视频,希望我能做一个一样的小demo。这里为了快速实现涂鸦效果,这里直接使用蓝图是来做涂鸦功能实现。废话不多说,看具体步骤:

1.画布材质

Alpha纹理用来存储画笔的痕迹,并用PaintColor绘制在模型上 
01.png

2.画笔材质

画笔材质相对来说,会稍微复杂一点点,主要是用Position来获取当前射线所在的uv位置,并绘制相应的PaintTex也就是我们自己所设置的画笔纹理到目标纹理上,这里的size是用来控制PaintTex的大小 
02.png

3.画笔纹理

因为ue4对图片都有相应的Texture设置,这里也需要对纹理进行的相应的设置。不然纹理会是平铺状态,就不符合我们的需求了 
03.png

4.墙面蓝图

我在这个蓝图下面就添加了一个cube,并创建了开始的画布材质赋值给cube,这里还可以为其设置自己喜欢的画笔颜色。 
04.png
然后我们还需要为这个蓝图创建一个RenderTarget,用来存储画笔的痕迹,并设置为当前画布材质的Alpha纹理 
05.png

5.画笔蓝图

为了更加方便,我们借用ue4模板的自带的蓝图进行更改,大概的意思就是通过射线来获取画布模型的uv,再通过画布材质渲染到RenderTarget上。 
创建画笔材质,并设置其笔刷大小与纹理 
06.png
设置了一个bool变量,表示是否按住了鼠标 
07.png
创建射线,蓝图较大,截了两部分 

08.png
射线检测是否是之前的画布蓝图,并获取uv通过画笔材质绘制到画布蓝图的RenderTarget上,这样你的画笔就已经实现了 

09.png 

6.测试

将画布蓝图与画笔蓝图都拖在场景中,开始测试 
涂鸦之前 

10.png
涂鸦后 
11.png

实现相对简单,但对用户来说有较强的交互性,能轻松提高用户的体验,是属于常用的功能。

工程链接https://github.com/coding2233/Painting-ue4 

 


QR code