Cocos Creator | ShaderLab：spine和sprite受击闪白特效

更多教程请关注

// 演示 //

 

 

// 实现 //

 

1编写 effect

声明相关属性，既可以通过代码赋值，也可以通过编辑器修改

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

CCEffect %{  techniques:  - passes:    - vert: vs      frag: fs      blendState:        targets:        - blend: true      rasterizerState:        cullMode: none      properties:        texture: { value: white }        alphaThreshold: { value: 0.5 }        u_color: { value: [1,1,1,1], editor: {type: color} }        u_rate: { value: 1 }}%

 

顶点着色器，我们这里 spine 和 sprite 使用的是同一份材质，所以会存在两者相关的宏定义

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

CCProgram vs %{  precision highp float;
  #include <cc-global>  #include <cc-local>
  in vec3 a_position;  in vec4 a_color;  out vec4 v_light;
  #if USE_TINT    in vec4 a_color0;    out vec4 v_dark;  #endif
  #if USE_TEXTURE    in vec2 a_uv0;    out vec2 v_uv0;  #endif
  void main () {    mat4 mvp;        #if CC_USE_MODEL      mvp = cc_matViewProj * cc_matWorld;    #else      mvp = cc_matViewProj;    #endif
    #if USE_TEXTURE      v_uv0 = a_uv0;    #endif
    v_light = a_color;    #if USE_TINT      v_dark = a_color0;    #endif
    gl_Position = mvp * vec4(a_position, 1);  }}%

 

片段着色器，通过 mix 函数获得最终色值

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

CCProgram fs %{  precision highp float;    #include <alpha-test>  #include <texture>
  in vec4 v_light;  #if USE_TINT    in vec4 v_dark;  #endif
  #if USE_TEXTURE    in vec2 v_uv0;    uniform sampler2D texture;  #endif
  uniform ARGS {    vec4 u_color;    float u_rate;  };
  void main () {    vec4 texColor = vec4(1.0);
    #if USE_TEXTURE      CCTexture(texture, v_uv0, texColor);    #endif        vec4 finalColor;
    #if USE_TINT      finalColor.a = v_light.a * texColor.a;      finalColor.rgb = ((texColor.a - 1.0) * v_dark.a + 1.0 - texColor.rgb) * v_dark.rgb + texColor.rgb * v_light.rgb;    #else      finalColor = texColor * v_light;    #endif
    ALPHA_TEST(finalColor);
    vec3 result = mix(u_color.rgb, finalColor.rgb, u_rate);    gl_FragColor = vec4(result.rgb, finalColor.a);  }}%

 

2编写脚本组件

在 onLoad 中初始化所需属性

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

onLoad() {    this._median = this.duration / 2;    // 获取材质    if (this.node.getComponent(cc.Sprite)) {        this._material = this.node.getComponent(cc.Sprite).getMaterial(0);    } else {        this._material = this.node.getComponent(sp.Skeleton).getMaterial(0);    }    // 设置材质对应的属性    this._material.setProperty("u_rate", 1);}

 

在 update 中计算时间流逝，依此来计算差值，并赋值给片段着色器

•  
•  
•  
•  
•  
•  
•  
•  

update(dt) {    if (this._time > 0) {        this._time -= dt;        this._time = this._time < 0 ? 0 : this._time;        let rate = Math.abs(this._time - this._median) * 2 / this.duration;        this._material.setProperty("u_rate", rate);    }}

 

3我来组成头部

将材质文件拖拽到 spine/sprite 的材质位置，脚本文件也拖到该节点下，设置闪烁的时间

 

也可以在材质中设置相关参数，比如目标色值等

 

—END—

 

获取源码请在公众号回复：

受击闪白