Godot - 用shader和animationplayer制作帅逼遮罩动画

想要做一个简单动效，又不想做的太俗气，想起以前用遮罩是个好方法，无奈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