3.5.2-2D实时水面反射-开箱即用

前几天看到大佬 2D水面的Shader 教程,creator shader:不从零开始了,2d的河面河流水面波浪漂流的效果

效果挺好的,跟着做了一个3.5.2版本,支持角色移动。

预览地址http://yiyizu.com/reflection
白嫖地址2D水面反射 | Cocos Store
(求好评鸭)

178139324-7c10ea25-2a80-4a56-8e66-df49936bfbe7
整个方案使用了3个摄像机
RT摄像机负责所有游戏物体,RT相机会获取Rendertexture渲染到地面和水面的2个精灵上。
image

FixCamera 是固定摄像机,只会拍摄 地面和水面这2个精灵。
image
UI相机负责UI层级。
最终的Drawcall 是8个 1个基础的+1个背景+1个角色+2个技能特效+1个UI+ 1个水面渲染+1个地面渲染
image
即使增加了1个新的精灵类,我们整个drawcall也只会增加1个。
image

针对反射方案,第一个RT摄像机负责地面部分的截取,这里把rect设置成了-0.37 , 只截取63%的上半部分屏幕。

image

针对地面部分,我们使用了自定义Shader,移植了默认的Sample from RT,使用了和Canvas一样的尺寸,针对屏幕适配,canvas上的 rtAdapter里有解决方案。


水面部分只使用了一半的屏幕高度,这里加了Tiling的Macro,设置了UV。


水浪效果,通过update wavetexture的uv 得到一个偏移量 offset, 并于原始图片的uv相加。

波浪效果有了,但是看起来比较单一,这里希望水面的颜色更有多彩,同时有一点邪恶的小紫色。
image
加了casutic效果后,水面有了焦散的流动。

image
为了让水面底部看起来颜色更深,这里使用了smoothstep根据uv.y 做变化。
image
image
为了让水面上部看起来更通透,彷佛有水波打到岸,对透明度也使用了smoothstep
image

image
最后给小姐姐加上一个FSM状态机和1个spriteatlas的animator controller,就可以拖到摇杆跑起来啦!
image
这里要注意的是,我只移动了rt相机,没有移动水面的renderer,所以水面会看起来比较奇怪,可以在人物移动的时候,给水面的水波和焦散一个反方向。
下次一定,下次一定。

27赞

厉害了,大佬:cow::beer:!!!!

厉害,给大佬递茶:tea: :smile:

Mark! 大佬牛逼

24602155 的,大佬!!

太牛了,我cv一下,希望以后自己的项目能用得上

:laughing: cv记得商店给个好评

我先标记一下,用的时候给你好评哦

送花,已收藏

mark two win

大佬牛皮,收藏了 :kissing_heart:

插眼!!!!!!

大佬牛批~

这不帮你顶起来吗.
mark

:frog: :ox: :frog: :ox: :frog: :ox:

只怪自己没文化,一句牛批走天下。

Mark!

给大佬递茶

mark!mark!mark!mark!mark!

卧槽,大佬NB