[Cocos Creator] 颜色可变的剪影效果 Shader

前言

想了很久，前言实在是不知道说啥好，那就提前祝大家新年快乐吧！

另外再给大家分享一个颜色可变的剪影效果 Shader 。

效果

使用前

使用后

正文

代码展示

★ 支持版本： Cocos Creator 2.3.x

代码语言：javascript复制

// Eazax 剪影效果

CCEffect %{
  techniques:
  - passes:
    - vert: vs
     frag: fs
     blendState:
       targets:
       - blend: true
     rasterizerState:
         cullMode: none
     properties:
         targetColor: { value: [0.0, 0.0, 0.0, 1], inspector: { type: color } }
}%

CCProgram vs %{
  precision highp float;

  #include <cc-global>

  attribute vec3 a_position;
  attribute vec2 a_uv0;
  out vec2 uv0;

  void main () {
    gl_Position = cc_matViewProj * vec4(a_position, 1);
    uv0 = a_uv0;
  }
}%

CCProgram fs %{
  precision highp float;

  in vec2 uv0;
  uniform sampler2D texture;
  uniform FragConstants {
    vec4 targetColor;
  };

  void main () {
    vec2 coord = uv0.xy;
    vec4 color = texture2D(texture, coord);
    gl_FragColor = vec4(targetColor.r, targetColor.g, targetColor.b, color.a);
  }
}%

使用方法

1. 将下载的 eazax-silhouette.effect 文件放到项目的任意文件夹下：

放在找得到的地方

2. 在资源管理器任意文件夹上点击鼠标右键，选择 新建 -> Material 来新建一个新的材质：

new 一个呗

3. 选中刚刚新建的 Material 文件，在属性检查器中设置它的 Effect 为 eazax-silhouette ，在 targetColor 处选择需要的颜色，点击右上角 应用 即可：

默认是黑色哦

4. 将设置好的 Material 文件拖到节点上的 Sprite 组件的 Materials 属性上即可，此时也可以继续修改 Material 文件的颜色，直到你满意为止哈：

拖完再改颜色也可以

shader sprite target

0 人点赞