UE4快速实现涂鸦功能

发表于2017-09-30
评论14 7.4k浏览

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

1.画布材质

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

2.画笔材质

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

3.画笔纹理

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

4.墙面蓝图

我在这个蓝图下面就添加了一个cube,并创建了开始的画布材质赋值给cube,这里还可以为其设置自己喜欢的画笔颜色。 

然后我们还需要为这个蓝图创建一个RenderTarget,用来存储画笔的痕迹,并设置为当前画布材质的Alpha纹理 

5.画笔蓝图

为了更加方便,我们借用ue4模板的自带的蓝图进行更改,大概的意思就是通过射线来获取画布模型的uv,再通过画布材质渲染到RenderTarget上。 
创建画笔材质,并设置其笔刷大小与纹理 

设置了一个bool变量,表示是否按住了鼠标 

创建射线,蓝图较大,截了两部分 


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

6.测试

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


涂鸦后 

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

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

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

14个评论

  • 清风 2017-04-28 1楼
    好文,对用蓝图是来实现涂鸦功能的步骤介绍的很详细啊,可以照着这个教程一步步学了。
  • 你好coding2233。我没能实现出来,能把工程发给我吗? paiwow@qq.com
  • 。。。 2017-09-14 3楼
    能否给个工程学习下,343154853@qq.com 感谢
  • 取决于命 2017-09-16 4楼
    能把工程发给我一下么,感谢各位大神
  • 挖毒游民 2017-10-15 5楼
    感谢大神分享
  • 烧云 2017-10-16 6楼
    可以可以,收下日后学习
  • 掌灯师 2017-10-16 7楼
    酷,有空实践一下
  • 后田 2017-10-16 8楼
    666
  • 荣归鹤 2017-10-16 9楼
    为炫酷的楼主打call
  • Escoita 2017-10-16 10楼
    挺不错的
  • 夜の月 2018-04-09 11楼
    涂鸦轨迹无法保存下来 是为什么呢 使用的版本4.18.3
  • 徐康 2018-06-06 12楼
    我使用的4.19版本的,无法保存轨迹,只能打在什么地方,什么地方显示,一个圆圈
  • 醉酒流云 2018-07-31 13楼
    楼主用的是哪个版本,我打开是的时候提示编译失败4.17到4.19都试过。照着做也没有出来轨迹的效果。。
  • *冰极'/。光 2018-08-16 14楼
    感觉楼主分享,我也照着实现了。但是有个需求不能满足,就是我想用各种颜色的笔来画。好像按此方式,所有线条的都是一个色的,虽然能改变。楼主有什么好的想法吗?