android 刮彩票效果,UE4中实现刮刮乐效果(刮彩票)RenderTarget(二)

我们接着前面的文章继续。如果您没有读过前面的文章,请看这里。

在设置好基础材质,画笔材质,我们接下来要完成的就是将一张纹理设置给基础材质用作混合计算使用(Alpha节点输入),然后动态的调整纹理上的内容(使用画笔材质,在纹理上进行绘制)

01.调整应用底图材质

构建蓝图,类型选择Actor(用来进行Mesh承载,绘制)

在Actor上添加StaticMesh组件,将Mesh选择Plane

在蓝图中,添加变量M_BaseMat,M_Seal,RenderTarget,类型分别是Material Instance,Material Instance,Texture Render 2D

02.初始化Actor蓝图数据

5401304f7b3c5c36404ddf16bc290f70.png

借助蓝图构造图表,我们进行参数基本初始化,构建动态材质,用来进行运行时态调整材质内容

将Base材质赋予面片Mesh

构建叠加画笔材质赋值给Seal

03.为Base材质构建Aphla贴图

368106f6a614030c37c1491db6889466.png

在BeginPlay节点中,我们动态构建了一张RenderTarget2D贴图,并赋值给我们的RenderTaget,尺寸256,256(尺寸大小随意,只用于混合)

初始颜色设置为黑色,这样Aphla贴图将会渲染节点A贴图,也就是纯色顶图

将构建的RenderTarget2D贴图设置给平面Mesh的材质,用于混合使用

构建完成后,将蓝图Actor拖入场景中,运行工程将看到底色被渲染到面片Mesh上

04.借助画笔绘制内容到RenderText2D上

说明

在之前工作完成后,我们可以通过调整画笔材质中的绘制中心点(Postion),将材质叠加到RenderTarget2D上,画笔材质中心点是个白色渐变的点,叠加后,就会留下痕迹,我们需要解决的问题

绘制位置

如何进行绘制

如何绘制位置?

我们可以借助引擎提供给我们的碰撞UV检测(需要开启),在Editor-Project Settings-Physics-Optimization中开启Support UV From Hit Results(默认是关闭的,这是有消耗的)。这样我们就可以在碰撞中获得UV坐标

540a090290c7a9800bbc6dba640044f5.png

你可以在任意地方发射射线

射线结束后你可以进行检测碰撞是否成功

通过使用节点Find Collision UV获得UV碰撞坐标

将UV坐标设置给画笔材质

将画笔材质绘制到RenderTarget2D上

至此所有工作步骤均完成,可以进行测试。

总结:

关键借助Lerp节点特性进行混合输出,这在材质设计中很常见

混合中的Aphla贴图我们选取动态构建RenderTarget2D

构建画笔材质,要求输出白色,并更改材质渲染模式为叠加

开启UV碰撞检测

设置RenderTarget2D到底图材质

绘制画笔到RenderTarget2D上

UE版本  4.18.3

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你好!感谢你的提问,我会尽力回答。以下是用JS实现图片手风琴效果的步骤: 1. 首先在HTML创建一个包含多张图片的容器,可以使用ul和li标签来实现。 2. 给每张图片绑定一个点击事件,当点击某张图片时,将该图片放大并使其居展示,同时缩小其他图片。 3. 可以通过CSS样式或JS动态修改图片的大小和位置,实现手风琴效果。 下面是一个简单的示例代码: HTML代码: ``` <ul class="accordion"> <li> <img src="img1.jpg"> </li> <li> <img src="img2.jpg"> </li> <li> <img src="img3.jpg"> </li> </ul> ``` CSS样式: ``` .accordion li { float: left; width: 20%; height: 100px; overflow: hidden; text-align: center; cursor: pointer; } .accordion li img { transition: all 0.5s ease-in-out; } .accordion li.active img { transform: scale(1.2); margin-top: -10px; } ``` JS代码: ``` const lis = document.querySelectorAll('.accordion li'); for (let i = 0; i < lis.length; i++) { const li = lis[i]; li.addEventListener('click', function() { for (let j = 0; j < lis.length; j++) { const otherLi = lis[j]; if (otherLi !== li) { otherLi.classList.remove('active'); otherLi.querySelector('img').style.transform = ''; otherLi.querySelector('img').style.marginTop = ''; } } li.classList.add('active'); li.querySelector('img').style.transform = 'scale(1.2)'; li.querySelector('img').style.marginTop = '-10px'; }); } ``` 希望这能帮助到你!如果还有其他问题,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值