评论

颜色可变的剪影效果 Shader

分享一个颜色可变的剪影效果 Shader


​本文由“壹伴编辑器”提供技术支

前言

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

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


效果

使用前后 

嗨起来!!!


正文

代码展示

获取完整文件:传送门

★ 支持版本: Cocos Creator 2.3.x

// Eazax 剪影效果

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

CCProgram vs %{
  precision highp float;

  #include 

  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 文件的颜色,直到你满意为止哈:

拖完再改颜色也可以


结束语

以上皆为本菜鸡的个人观点,小生不才, 文采不足,如果写得不好还请各位多多包涵。如果有哪些地方说的不对,还请各位指出,希望与大家共同进步。

接下来我会持续分享自己所学的知识与见解,欢迎各位关注本公众号。

我们,下次见!



最后一次编辑于  04-25  
点赞 1
收藏
评论
登录 后发表内容