想要做一个简单动效,又不想做的太俗气,想起以前用遮罩是个好方法,无奈godot 并没有提供遮罩mask功能,好在godot的shader可以有很多种玩法,这就介绍其中一种。
准备素材
- 一个背景面板
- 一个运动的图片(带alpha通道)
shader开发
shader_type canvas_item;
uniform sampler2D src;
uniform float ps:hint_range(0.,1.) = .5;
void fragment(){
vec4 cc = texture(TEXTURE,UV);
vec2 uv = UV;
vec2 scale = vec2(textureSize(src,0));
uv*=1./TEXTURE_PIXEL_SIZE/scale;
uv*=scale.y*TEXTURE_PIXEL_SIZE.y/1.3;
uv.x+=-scale.x*TEXTURE_PIXEL_SIZE.x*mix(-2.,3.,ps);
vec4 cc_src = texture(src,uv);
cc = mix(cc,cc_src,cc_src.a*.8);
COLOR = cc;
}
- shader建立在面板图像上
- 将运动图片作为额外纹理导入到shader中
- 并定义一个运动过程参数ps,用来控制图片的位置
- 原面板图像直接赋给最终色
- 获取运动图片相对于面板的修正比例关系的uv数据,并根据ps系数进行横向移动
- 可以使用
cc+=cc_src;
或cc = mix(cc,cc_src,cc_src.a*.8);
(其中0.8为修正两个贴图的采样比例关系,它相当于运动图片的透明度,0不可见,1完全替换原贴图像素)
动画的制作
通过拉动属性面板上的ps,可以看到运动物体从左移动到了右。
- 新建一个AnimationPlayer节点
- 将ps属性作为关键帧,并对其进行动画调节
-
结果就是这个样子
这里不贴源码了,因为是游戏中用到的,没有单独剥离,;p