【Shader】cocos3.x 攻击闪白shader

 

一 vscode安装effect提示插件

二 复制一份cocos提供的effect和material

 三 修改effect文件，增加亮度和色彩

四  效果演示

 

一 vs code安装effect提示插件

菜单-查看-扩展

搜索 cocos effect 并安装即可

 

 

二 复制一份cocos提供的effect和material

effect：internal/effects/for2d/builtin-sprite.effect

material：internal/default_materials/ui-sprite-material.mtl

复制后修改文件名

选择atk-write-sprite-material，把Effect属性设置为atk-write-sprite.effect

 

 三 修改effect文件，增加亮度和色彩

在vscode中打开 atk-write-sprite.effect，在properties中增加亮度light属性和亮度色彩lightColor

CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
        alphaThreshold: { value: 0.5 }
        lightColor: {value: [255,0,255,255] ,editor: {type: color} }
        light: {value: 5.0}
}%

　

用uniform定义light和lightColor，并将原来的颜色o乘以亮度和亮度颜色

  uniform color2 {
    vec4 lightColor;
  };

  uniform Properties {
    float light;
  };

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif
    #endif

    o *= color;
    ALPHA_TEST(o);

    o *= lightColor;

    o = vec4(o.r*light, o.g*light, o.b*light, o.a);
    
    return o;
  }

　　

cocos编辑器中选中atk-write-sprite-material.mtl， 可以看到定义的lightColor和ligth属性

 

在场景中放入一张图片，并给图片的material属性赋值atk-write-sprite-material.mtl

 

代码中实现闪白和闪红效果

export class AtkShaderDemo extends Component {

    @property(Node)
    img: Node = null;  //图片

    protected onLoad(): void {
        //获取自定义material
        let material: Material = this.img.getComponent(Sprite).customMaterial;

        //点击改变亮度和亮度颜色
        this.node.on(Node.EventType.TOUCH_END, () => {

            //设置亮度
            material.setProperty("light", 3.0);

            //设置亮度颜色
            //material.setProperty("lightColor", new Vec4(228/255, 52/255, 52/255, 1));  //闪红
            material.setProperty("lightColor", new Vec4(1, 1, 1, 1));  //闪白

            //点击0.1秒后，恢复原来颜色
            this.scheduleOnce(() => {
                material.setProperty("light", 1.0);
                material.setProperty("lightColor", new Vec4(1, 1, 1, 1));
            }, 0.1);
        }, this);
    }
}

　　

四  效果演示